Hướng dẫn đầy đủ về Khối WooCommerce

WooCommerce là một trong những plugin phổ biến để xây dựng các trang thương mại điện tử trên WordPress. WooCommerce Blocks là một trong những plugin trong WooCommerce, được thiết kế để giúp người dùng dễ dàng tạo cửa hàng trực tuyến trên WordPress. WooCommerce Blocks hỗ trợ tạo các trang cửa hàng được cá nhân hóa, hiển thị sản phẩm của bạn và thêm các tính năng thương mại điện tử nâng cao như lọc và tìm kiếm sản phẩm – tất cả mà không cần viết một dòng mã nào. 

Bạn phải cài đặt plugin WordPress WooCommerce Blocks để sử dụng các khối mới này. Plugin này là môi trường thử nghiệm cho các tính năng thử nghiệm có thể được thêm vào lõi WooCommerce.

Trong hướng dẫn thực tế này, chúng ta sẽ thảo luận về các tính năng của khối WooCommerce và cách tùy chỉnh chúng. 

Khối WooCommerce là gì?

WooCommerce Blocks là một tập hợp các khối được tích hợp với trình biên tập khối WordPress (Gutenberg) cho phép bạn dễ dàng thêm nhiều tính năng và chức năng khác nhau của WooCommerce vào các trang và bài viết của mình. Không cần viết mã, những khối này cho phép bạn trưng bày sản phẩm, danh mục sản phẩm, bộ lọc tìm kiếm, giỏ hàng, thanh toán và nhiều hơn nữa.

Nói một cách đơn giản, WooCommerce Blocks là các thành phần được xây dựng sẵn mà bạn có thể chèn vào trang WordPress của mình bằng trình soạn thảo khối, mang đến một cách dễ dàng để tích hợp chức năng thương mại điện tử được cung cấp bởi WooCommerce. Đây là một phần của plugin WooCommerce cốt lõi, vì vậy bạn sẽ có chúng tự động khi cài đặt và kích hoạt WooCommerce trên trang WordPress của mình.

Ngoài ra, chúng tích hợp liền mạch với trình soạn thảo khối của WordPress, cho phép bạn tạo các trang sản phẩm tùy chỉnh, bố cục danh mục và trải nghiệm mua sắm bằng giao diện kéo và thả quen thuộc.ext here ...

Danh sách tính năng của WooCommerce Block

Sau khi hiểu khối WooCommerce là gì, tiếp theo, chúng ta sẽ thảo luận từng tính năng được cung cấp một

• Tất cả sản phẩm: Hiển thị tất cả sản phẩm của cửa hàng dưới dạng lưới.
• Bộ lọc sản phẩm đang hoạt động: Hiển thị các bộ lọc sản phẩm đang hoạt động dưới dạng danh sách hoặc dạng chip (tương tự như nút).
• Tất cả đánh giá: Hiển thị tất cả đánh giá sản phẩm.
• Sản phẩm bán chạy nhất: Hiển thị các sản phẩm bán chạy nhất ở dạng lưới.
• Thanh toán: Hiển thị biểu mẫu cho phép khách hàng hoàn tất đơn hàng của họ.
• Giỏ hàng: Hiển thị giỏ hàng.
• Danh mục nổi bật: Làm nổi bật các danh mục sản phẩm cụ thể cùng với các nút kêu gọi hành động.
• Sản phẩm nổi bật: Hiển thị các sản phẩm nổi bật đã chọn.
• Lọc theo giá: Hiển thị khoảng giá để khách hàng có thể lọc sản phẩm. Bạn cũng có thể bật khoảng giá có thể chỉnh sửa bằng cách nhấp vào nút hoặc văn bản tại đây.
• Lọc theo kho hàng: Cho phép lọc sản phẩm dựa trên trạng thái tồn kho. Tính năng này cung cấp các tùy chọn để hiển thị sản phẩm còn hàng, hết hàng hoặc đang được đặt hàng lại.
• Lọc theo đánh giá: Cho phép khách hàng lọc sản phẩm dựa trên đánh giá.
• Lọc theo thuộc tính: Lọc sản phẩm dựa trên kích thước hoặc màu sắc.
• Sản phẩm được chọn thủ công: Hiển thị các sản phẩm được chọn thủ công dưới dạng lưới, cho phép bạn chọn cụ thể những sản phẩm muốn hiển thị.
• Giỏ hàng thu nhỏ: Cung cấp chế độ xem nhanh về giỏ hàng.
• Sản phẩm mới nhất: Hiển thị các sản phẩm gần đây nhất được sắp xếp theo dạng lưới. Chúng có thể được tùy chỉnh bằng cách thêm/xóa các phần tử như tiêu đề, giá, đánh giá và nút mua.
• Sản phẩm đang giảm giá: Hiển thị các sản phẩm hiện đang giảm giá dưới dạng lưới và có thể tùy chỉnh bằng cách thêm/xóa các phần tử như tiêu đề, giá, đánh giá và nút mua.
• Tìm kiếm sản phẩm: Thêm thanh tìm kiếm để hỗ trợ khách hàng tìm kiếm sản phẩm.
• Sản phẩm theo thẻ: Hiển thị các sản phẩm có thẻ/nhãn cụ thể dưới dạng lưới.
• Sản phẩm theo thuộc tính: Hiển thị sản phẩm với các thuộc tính cụ thể (màu sắc, kích thước, v.v.) dưới dạng lưới.
• Sản phẩm theo danh mục: Hiển thị sản phẩm dựa trên danh mục ở dạng lưới.
• Đánh giá theo sản phẩm: Hiển thị các đánh giá được nhóm theo sản phẩm.
• Đánh giá theo danh mục: Hiển thị đánh giá sản phẩm từ các danh mục cụ thể.
• Sản phẩm đơn: Hiển thị chế độ xem chi tiết cho một sản phẩm.
• Sản phẩm được đánh giá cao nhất: Hiển thị các sản phẩm có xếp hạng cao nhất ở định dạng lưới.

Cách sử dụng khối lưới sản phẩm trong WooCommerce

Ngoài việc tìm hiểu về các tính năng có sẵn trong khối WooCommerce, hãy thử sử dụng hoặc thêm lưới sản phẩm trong WooCommerce. Hãy đảm bảo rằng bạn đã cài đặt plugin khối WooCommerce trên websitecủa mình. Sau đây là cách thêm nó:

1. Mở trang hoặc bài viết nơi bạn muốn hiển thị lưới sản phẩm, sau đó nhập tiêu đề "Sản phẩm".

2. Trên thanh điều hướng bên trái, nhấp vào nút (+) > cuộn xuống phần WooCommerce > chọn "lưới sản phẩm".

3. Tiếp theo, để cấu hình khối, hãy chuyển đến bảng điều khiển bên phải.

Trong bảng điều khiển này, bạn có thể điều chỉnh một số thứ, bao gồm:

• Cài đặt bố cục: Bạn có thể tùy chỉnh số hàng và cột hiển thị trong lưới sản phẩm. Ví dụ, đặt cả hai thành 2 để có chế độ xem cân đối.
• Cài đặt nội dung: Bạn có thể hiển thị menu thả xuống để sắp xếp sản phẩm. Tính năng này cho phép khách hàng sắp xếp sản phẩm theo sở thích của họ. Bạn có thể tắt tính năng này nếu không cần thiết.
• Tùy chỉnh nâng cao: Bạn có thể thêm các lớp CSS để tùy chỉnh giao diện.

Cách thêm sản phẩm nổi bật vào trang của bạn

Khối Sản phẩm nổi bật cho phép bạn trưng bày các sản phẩm cụ thể trên trang hoặc bài viết của mình. Với khối này, bạn có thể chọn sản phẩm, tùy chỉnh giao diện của chúng và đặt chúng vào nội dung để thu hút khách truy cập đến những mặt hàng bạn muốn quảng bá.

Để thêm Khối Sản phẩm nổi bật, hãy làm theo các bước sau:

1. Mở trang hoặc bài viết mà bạn muốn thêm nó. Ví dụ, nếu bạn đặt nó phía trên lưới sản phẩm, hãy tạo khoảng trống ở khu vực đó và nhấp vào nút "+" xuất hiện.

2. Chọn nút "+" trên thanh công cụ của khối để mở danh sách khối, sau đó tìm kiếm và chọn "Sản phẩm nổi bật".

3. Chọn các sản phẩm bạn muốn làm nổi bật, sau đó nhấp vào "Xong".
4. Để tùy chỉnh giao diện của khối, nhấp vào "Cài đặt". Trong bảng cài đặt, bạn có thể điều chỉnh một số thứ bao gồm:

• Hiển thị hoặc ẩn mô tả sản phẩm và giá.
• Cấu hình hiển thị phương tiện (hình ảnh và video).
• Thêm văn bản thay thế cho hình ảnh sản phẩm.
• Chọn màu lớp phủ của khối.
• Điều chỉnh độ mờ của khối.

5. Sau khi điều chỉnh, bạn có thể xuất bản hoặc cập nhật trang để xem hiển thị khối sản phẩm nổi bật của bạn.

Cách thêm khối bộ lọc trong WooCommerce

Khối Bộ lọc WooCommerce giúp khách hàng dễ dàng tìm thấy sản phẩm phù hợp với tiêu chí tìm kiếm của họ. Bằng cách cung cấp các tùy chọn lọc, khách hàng có thể nhanh chóng thu hẹp kết quả tìm kiếm để tìm ra những sản phẩm phù hợp với họ.

Để thêm khối bộ lọc, hãy làm theo các bước sau:

1. Mở trang hoặc bài viết nơi bạn muốn đặt khối bộ lọc.
2. Xác định vị trí mong muốn để đặt khối bộ lọc.
3. Trên thanh công cụ của trình soạn thảo khối, nhấp vào nút "+" và tìm kiếm các tùy chọn bộ lọc WooCommerce như Bộ lọc Giá, Bộ lọc Kho hàng, Bộ lọc Thuộc tính và Bộ lọc Đánh giá.

Bây giờ, hãy cùng thảo luận về từng loại bộ lọc hiện có. 

Thêm bộ lọc theo giá

Khối Sản phẩm Lọc theo Giá cho phép bạn thêm tính năng lọc giúp người dùng chọn khoảng giá mong muốn. Khoảng giá có thể được hiển thị dưới dạng nút có thể chỉnh sửa hoặc văn bản thông thường. Bạn có thể thêm nút nếu muốn và điều chỉnh cấp độ tiêu đề của chúng.

Thêm bộ lọc theo thuộc tính

Khối Bộ lọc Thuộc tính Sản phẩm cho phép người dùng lọc sản phẩm dựa trên các thuộc tính như màu sắc và kích thước. Bạn có thể chọn các thuộc tính muốn sử dụng từ danh sách có sẵn. Nó có thể hiển thị dưới dạng danh sách hoặc menu thả xuống. Bạn cũng có thể cấu hình loại truy vấn thành AND hoặc OR. Các tính năng khác bao gồm hiển thị số lượng sản phẩm, chọn cấp độ tiêu đề, thêm nút và chọn bộ lọc.

Thêm bộ lọc theo tồn kho

Khối Bộ lọc Sản phẩm theo Trạng thái Kho cho phép người dùng hiển thị sản phẩm dựa trên trạng thái sẵn có của chúng. Họ có thể hiển thị sản phẩm có sẵn (còn hàng), hết hàng (hết hàng) hoặc đặt trước. Bạn cũng có thể cấu hình để hiển thị số lượng sản phẩm, chọn cấp độ tiêu đề và thêm nút. Khối này có thể được sử dụng với các khối WooCommerce khác, chẳng hạn như Tất cả Sản phẩm. Thật không may, khối này không cung cấp bản xem trước khi được thêm vào trang.

Khối Giỏ hàng và Thanh toán

Khối giỏ hàng của chúng tôi thêm hiển thị giỏ hàng vào trang của bạn. Bạn có thể bao gồm công cụ tính phí vận chuyển, chọn liên kết cho nút thanh toán và đặt chế độ hiển thị tối. Khối này cũng cung cấp thông báo rằng bạn có thể đặt trang làm trang giỏ hàng mặc định trong cài đặt WooCommerce. Một liên kết để cung cấp phản hồi cũng được bao gồm.

Trong khi đó, khối thanh toán cung cấp biểu mẫu thanh toán cho giỏ hàng của bạn. Bạn sẽ được thông báo rằng trang này có thể được đặt làm trang thanh toán mặc định trong cài đặt WooCommerce. Ngoài ra còn có tùy chọn hiển thị chế độ tối. Khối này bao gồm một số phần tử mà bạn có thể tùy chỉnh riêng. Thật không may, khối này không cung cấp bản xem trước sau khi được thêm vào trang.

Cách tùy chỉnh trang cửa hàng trên WooCommerce

Sau khi tìm hiểu cách sử dụng các Khối WooCommerce khác nhau, bạn có thể kết hợp nhiều khối để tạo một trang cửa hàng tùy chỉnh thân thiện với người dùng. Để xây dựng bố cục trang cửa hàng cụ thể này, hãy làm theo các bước sau.

1. Tạo một trang mới và đặt tên là "Cửa hàng".

2. Thêm khối Tìm kiếm sản phẩm.

3. Thêm Danh sách danh mục sản phẩm khối

Sau đó, đặt kiểu hiển thị thành danh sách thả xuống.

4. Thêm khối Bộ lọc giá .
5. Thêm khối Sản phẩm nổi bật và chọn các sản phẩm bạn muốn làm nổi bật. Cấu hình theo nhu cầu.

6. Thêm khối Tất cả Sản phẩm .

Đặt số cột và số hàng thành 2, và tắt tùy chọn sắp xếp trong danh sách thả xuống.

7. Cuối cùng, hãy xuất bản trang để xem bố cục cuối cùng của trang cửa hàng bạn đã tạo.

Xây dựng cửa hàng trực tuyến của bạn với WooCommerce Block & Bán sản phẩm của bạn

Sau khi tạo thành công trang cửa hàng tùy chỉnh với WooCommerce Blocks, bạn có thể bắt đầu bán các sản phẩm vật lý và số của mình. Đặc biệt đối với sản phẩm số, điều quan trọng là thêm plugin tải xuống tệp như WP File Download Addon.

Plugin này cho phép bạn bán các sản phẩm tải xuống số trong WooCommerce. WP File Download Addon giúp việc quản lý tệp và danh mục tệp cho các sản phẩm số WooCommerce trở nên dễ dàng. Bạn có thể nhanh chóng tạo nhiều sản phẩm tải xuống số liên kết với một hoặc nhiều tệp.

Ngoài ra, plugin này tích hợp với Dropbox, Google Drive, Microsoft OneDrivevà tính năng Social Locker . Bạn có thể cung cấp các tệp từ những dịch vụ đám mây này dưới dạng tải xuống số WooCommerce với quyền truy cập được hạn chế cao thông qua các trình kết nối API đám mây.

Với WP File Download Addon, việc bán sản phẩm số trong cửa hàng trực tuyến WooCommerce của bạn đã trở nên dễ dàng và hiệu quả hơn. Sau khi xây dựng cửa hàng của bạn với WooCommerce Blocks, plugin này bổ sung hoàn hảo cho việc bán nội dung số của bạn.

Kết luận

WooCommerce Blocks là một plugin cho phép bạn xây dựng một cửa hàng trực tuyến hoàn chỉnh trên WordPress mà không cần viết mã. Với nhiều khối khác nhau, chẳng hạn như lưới sản phẩm, bộ lọc và hiển thị sản phẩm nổi bật, bạn có thể dễ dàng tạo ra trải nghiệm mua sắm hấp dẫn và thân thiện với người dùng. Giao diện kéo và thả quen thuộc giúp việc phát triển cửa hàng trực tuyến nhanh chóng và hiệu quả hơn.

Sau khi xây dựng cửa hàng trực tuyến của bạn, bước tiếp theo là bán các sản phẩm vật lý và số. Bạn có thể sử dụng plugin WP File Download Addon để bán sản phẩm số với WooCommerce, chẳng hạn như sách điện tử, phần mềm hoặc nội dung đa phương tiện.

WP File Download Addon có sẵn từ $49 mỗi năm và đã được hơn 60.000 thành viên sử dụng. Vậy bạn còn chờ gì nữa? Hãy tham gia cùng chúng tôi để bán sản phẩm số tốt hơn!