Hướng dẫn sử dụng Widget trong Woocommerce

Bài viết hôm nay, mình sẽ giới thiệu các Widget có sẵn của Woocommerce. Phần cuối là danh sách plugin có hỗ trợ Widget cho Woocommerce. Và một plugin miễn phí giúp bạn tùy biến hiển thị các Widget cho Woocommerce.

Sử dụng Widget

Cách sử dụng widget của Woocommerce cũng giống như cách sử dụng các widget khác. Bạn muốn sử dụng Widget nào chỉ cần kéo vào sidebar bạn muốn hiển thị. Như thường lệ, bạn sẽ cấu hình tại Giao diện -> Widget

Danh sách các Widget của Woocommerce

1. Giỏ hàng WooCommerce (WooCommerce Cart)

 Hiển thị giỏ hàng mini, giúp khách hàng xem danh sách các sản phẩm hiện có trong giỏ hàng

2. Chỉ dẫn sản phẩm theo lớp của WooCommerce (WooCommerce Layered Nav)

Cho phép khách lọc sản phẩm theo thuộc tính. Widget chỉ hiển thị trong trang lưu trữ sản phẩm (trang cửa hàng).

Các tùy chọn của Widget này

Tiêu đề: Tiêu đề hiển thị ra bên ngoài của Widget

Thuộc tính: Chọn thuộc tính cần lọc của sản phẩm. Giá trị ở đây là slug của sản phẩm nên nó không có dấu.

Kiểu hiển thị: Tùy chọn cách hiển thị chỉ dẫn.

Kiểu truy vấn:

• Và: chỉ hiển thị các sản phẩm có thuộc tính khớp với tùy chọn của bạn. Giả sử nếu bạn chọn 2 thuộc tính, chỉ những sản phẩm có cả hai thuộc tính mới xuất hiện
• HOẶC: Nếu bạn chọn 2 thuộc tính, sản phẩm phù hợp với một trong hai thuộc tính sẽ xuất hiện.

3. Bộ lọc chỉ dẫn sản phẩm theo lớp của WooCommerce (WooCommerce Layered Nav Filters)

Hiển thị các thuộc tính mà bạn đang lọc xem sản phẩm với widget Woocommerce Layered Nav. Mục đích cho khách hàng biết họ đang lọc theo thuộc nào để bỏ nó

4. Bộ lọc giá của Woocommerce (Woocommerce Price Filter)

Bộ lọc cho phép lọc sản phẩm theo giá bằng việc sử dụng một slide để chọn khoảng giá. Widget này chỉ hiển thị trong trang Cửa hàng (trang lưu trữ sản phẩm)

5. Danh mục sản phẩm của Woocommerce (WooCommerce Product Categories)

Hiển thị danh mục sản phẩm hiện có trong website

6. Sản phẩm WooCommerce (WooCommerce Products)

Các tùy chọn của Widget này

Tiêu đề: Tiêu đề hiển thị của Widget bên ngoài giao diện.

Số sản phẩm được hiển thị: Tùy chỉnh số lượng sản phẩm tối đa bạn muốn hiển thị ra bên ngoài.

Hiển thị

• Tất cả sản phẩm: Hiển thị toàn bộ sản phẩm theo thứ tự sắp xếp được tùy chỉnh phía dưới.
• Sản phẩm nổi bật: Hiển thị các sản phẩm nổi bật theo thứ tự sắp xếp được tùy chỉnh phía dưới.
• Sản phẩm giảm giá: Hiển thị những sản phẩm giảm giá theo thứ tự sắp xếp được tùy chỉnh phía dưới.

Sắp xếp theo

• Ngày: Sắp xếp sản phẩm theo thứ tự ngày tháng
• Giá: Sắp xếp sản phẩm theo giá
• Ngẫu nhiên: Sắp xếp sản phẩm theo kiểu ngẫu nhiên
• Doanh số: Sắp xếp sản phẩm theo doanh số bán ra.

Order

• Giảm: Sắp xếp sản phẩm theo thứ tự giảm dần
• Tăng: Sắp xếp sản phẩm theo thứ tăng dần.

7. Tìm kiếm sản phẩm trong Woocommerce (WooCommerce Product Search)

Hiển thị hộp tìm kiếm và chỉ tìm kiếm sản phẩm

8. Từ khóa sản phẩm trong Woocommerce (WooCommerce Product Tags)

Hiển thị các từ khóa sản phẩm theo định dạng đám mây

9. Đánh giá gần đây trong Woocommerce (WooCommerce Recent Reviews)

Hiển thị các đánh giá trong các sản phẩm mới nhất, kèm theo số lượng ngôi sao đánh giá

10. Vừa được xem gần đây trong WooCommerce (WooCommerce Recent Review)

Hiển thị các sản phẩm khách hàng vừa xem

11. Các sản phẩm được xếp hạng cao nhất trong WooCommerce (WooCommerce Top Rated Products)

Danh sách các sản phẩm được nhiều người dùng đánh giá nhất.

Danh sách các plugin cho widget của WooCommerce

Nếu cần bạn cần thêm widget hỗ trợ cho WooCommerce, tham khảo danh sách sau

Miễn phí

1. YITH WooCommerce AJAX Product Filter:  Hỗ trợ tạo bộ lọc sản phẩm.

2. XoX Woocommerce Sidler/Carousel: Hỗ trợ hiển thị sản phẩm theo dạng slide

3. Search by SKU for Woocommerce: Widget tìm sản phẩm theo mã SKU

3. WooCommerce My Account Widget: Widget hiển thị form đăng nhập và các liên kết tới trang tài khoản WooCommerce

4. XO10 - WooCommerce Categories widget: Hiển thị danh mục sản phẩm có chứa ảnh đại diện

Trả phí

1 WC Products By Category Widget : Hiển thị sản phẩm theo danh mục

2. Woocommerce Similar Category Products Widget : Hiển thị sản phẩm cùng danh mục

3. Woocommerce Product Filter: Lọc sản phẩm chuyên nghiệp.

4. Woocommerce Sales Countdown : Hiển thị thời gian đếm ngược tới chương trình mã giảm giá

5. WooCommerce Ajax Drop Down Cart: Thêm widget giỏ hàng mini có hỗ trợ AJAX.

6. Shop Assistant for WooCommerce  : Trợ lý ảo cho khách hàng

7. WooCommerce Currency Switcher : Widget hỗ trợ chuyển loại tiền tệ theo tỷ giá tự động.

8. WooCommerce Cart - WooCart Pro : Tự động hiển thị giỏ hàng mini

Phân khu vực hiển thị Sidebar với WooSidebars

Một bài toán khá phổ biến khi bạn sử dụng các Widget trong Woocommerce. Đó là bạn cần phân chia các Widget hiển thị ra từng trang khác nhau.

Giả sử bạn chỉ có một sidebar duy nhất hiển thị bên phải. Nhưng bạn muốn trang hiển thị sản phẩm có widget riêng, trang danh mục sản phẩm có widget riêng.

Để giải quyết bài toán này, bạn có thể sử dụng plugin miễn phí WooSidebars. Plugin này hỗ trợ bạn tạo sidebar riêng và thay thế sidebar sẵn có.

Bây giờ chúng cùng xem cách sử dụng WooSidebars.

Sử dụng WooSidebars

Bạn cài plugin giống như mọi plugin khách trong WordPress. Sau khi cài đặt, bạn để ý thấy một mục mới có tên Widget Area trong menu Giao diện. Phần này giúp bạn tạo ra các sidebar để thay thế sidebar sẵn có

Đầu tiên, bạn ấn vào Add New để tạo một sidebar mới.

Bạn nhập vào tên cho sidebar. Ở phần Conditions, bạn chọn điều kiện hiển thị sidebar. Bạn có thể chọn Advanced để hiển thị giao diện đầy đủ với nhiều tùy chọn nâng cao.

Quan trọng nhất, phần Side To Replace bạn chọn side mặc định để thay thế khi điều kiện ở Conditions thỏa mãn. Sau khi bạn cấu hình xong, ấn Đăng bài viết.

Tiếp theo, bạn vào Giao diện -> Widget, bạn sẽ thấy sidebar bạn vừa tạo ra. Nhiệm vụ lúc này là bạn kéo widget cần hiển thị vào sidebar. Như vậy các widget sẽ hiển thị theo logic chúng ta vừa tạo ở trên. Đơn giản đúng không nào?