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

WooCommerce là một trong những plugin phổ biến để xây dựng trang web thương mại điện tử trên WordPress. Khối WooCommerce là một trong những plugin trong WooCommerce, được thiết kế để giúp người dùng tạo cửa hàng trực tuyến trên WordPress dễ dàng hơn. Khối WooCommerce hỗ trợ tạo trang cửa hàng tùy chỉnh, 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 code. 

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ột sân thử nghiệm cho các tính năng thử nghiệm có thể được thêm vào WooCommerce cốt lõi.

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

WooCommerce Block là gì?

Các khối WooCommerce là một tập hợp các khối tích hợp với trình chỉnh sửa khối WordPress (Gutenberg) cho phép bạn dễ dàng thêm các tính năng và chức năng WooCommerce khác nhau vào trang và bài viết của mình. Không cần viết mã, các khối này cho phép bạn giới thiệu 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.v.

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

Ngoài ra, chúng tích hợp liền mạch với trình chỉnh sửa khối WordPress, cho phép bạn xây dựng 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 cách sử dụng giao diện kéo và thả quen thuộc.

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

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

• Tất cả sản phẩm: Hiển thị tất cả sản phẩm cửa hàng ở định dạng lưới.
• Bộ lọc sản phẩm hoạt động: Hiển thị bộ lọc sản phẩm hoạt động dưới dạng danh sách hoặc dưới dạng chip (tương tự như các 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ị 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 thành đơn đặt hàng của họ.
• Giỏ hàng: Hiển thị giỏ hàng.
• Danh mục nổi bật: 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 được chọn.
• Lọc theo giá: Hiển thị phạm vi giá mà khách hàng có thể lọc sản phẩm. Bạn cũng có thể bật phạm vi 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 tồn kho: Cho phép lọc sản phẩm dựa trên trạng thái sẵn có. 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 xếp hạng: Cho phép khách hàng lọc sản phẩm dựa trên xếp hạng.
• 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 lọc: Hiển thị các sản phẩm được chọn lọc theo dạng lưới, cho phép bạn chọn sản phẩm để hiển thị cụ thể.
• Giỏ hàng thu gọn: Cung cấp cái nhìn tổng quan về giỏ hàng.
• Sản phẩm mới nhất: Hiển thị các sản phẩm mới 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 yếu tố như tiêu đề, giá, xếp hạng và nút mua.
• Sản phẩm đang giảm giá: Hiển thị các sản phẩm đang giảm giá theo dạng lưới và có thể được tùy chỉnh bằng cách thêm/xóa các yếu tố như tiêu đề, giá, xếp hạng 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ể theo dạng lưới.
• Sản phẩm theo thuộc tính: Hiển thị các sản phẩm có thuộc tính cụ thể (màu sắc, kích thước, v.v.) theo 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 trong định dạng lưới.
• Đánh giá theo sản phẩm: Hiển thị đá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 duy nhất.
• Sản phẩm được đánh giá cao nhất: Hiển thị sản phẩm có xếp hạng cao nhất trong định dạng lưới.

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

Bên cạnh việc tìm hiểu về các tính năng có sẵn trong các khối WooCommerce, hãy thử sử dụng hoặc thêm lưới sản phẩm trong WooCommerce. Đảm bảo bạn đã cài đặt plugin khối WooCommerce trên websitecủa mình. Dưới đâ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, đi đế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ố điều, bao gồm:

• Cài đặt bố cục: Bạn có thể tùy chỉnh số hàng và cột được hiển thị trong lưới sản phẩm. Ví dụ, đặt cả hai thành 2 để có cái nhìn cân bằng.
• 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 nó nếu không cần thiết.
• Styling 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 giới thiệu các sản phẩm cụ thể trên trang hoặc bài đăng 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 và đặt chúng vào nội dung của mình để thu hút khách truy cập đến các mục 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 trong 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ụ 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 nổi bật, sau đó nhấp "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ố điều bao gồm:

• Hiển thị hoặc ẩn mô tả và giá sản phẩm.
• 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 phủ 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 khối sản phẩm nổi bật của mình hiển thị.

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 để đến các sản phẩm liên quan đến 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 mà 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ụ trình chỉnh sửa 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 tồn kho, Bộ lọc thuộc tính và Bộ lọc xếp hạng.

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

Thêm bộ lọc theo giá

Khối sản phẩm bộ lọc giá cho phép bạn thêm tính năng lọc giúp người dùng chọn phạm vi giá mong muốn. Phạm vi 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 bạn muốn sử dụng từ danh sách có sẵn. Hiển thị của nó có thể ở 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 là 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 số lượng hàng tồn

Khối Bộ lọc Trạng thái Sản phẩm 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 hàng trước. Bạn cũng có thể cấu hình nó để 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 một hiển thị giỏ hàng vào trang của bạn. Bạn có thể bao gồm một máy tính chi phí vận chuyển, chọn một liên kết cho nút thanh toán, và thiết lập hiển thị chế độ tối. Khối này cũng cung cấp một 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 một 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ó một tùy chọn để hiển thị chế độ tối. Khối này bao gồm một số yếu tố mà bạn có thể tùy chỉnh riêng lẻ. 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 một số 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 trình đơn thả xuống.

4. Thêm Lọc Giá khối.
5. Thêm Sản phẩm Nổi bật khối và chọn các sản phẩm bạn muốn nổi bật. Cấu hình khi cần.

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

Đặt số cột và hàng thành 2, và tắt tùy chọn sắp xếp trình đơn thả xuống.

7. Cuối cùng, 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 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, giờ đây bạn có thể bắt đầu bán các sản phẩm vật lý và kỹ thuật số của mình. Đặc biệt đối với các sản phẩm kỹ thuật số, việc thêm plugin tải xuống tệp như WP File Download Addon là rất quan trọng.

Plugin này cho phép bạn bán sản phẩm tải xuống số trong WooCommerce. WP File Download Addon giúp quản lý tệp và danh mục tệp cho các sản phẩm số WooCommerce một cách 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 tệp từ các 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 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 hoàn toàn bổ sung 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 trong WordPress mà không cần viết code. Với các 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 một 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 một 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à kỹ thuật số. Bạn có thể sử dụng plugin WP File Download Addon để bán sản phẩm kỹ thuật 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 bắt đầu từ $49 mỗi năm và đã được sử dụng bởi hơn 60.000 thành viên. Vậy bạn còn chờ đợi gì? Tham gia cùng chúng tôi để bán sản phẩm số tốt hơn!