Có nhiều bạn inbox hỏi cách custom hiển thị màu sắc, size cho sản phẩm có biến thể trong wordpress cho nó đẹp xíu như hình bên dưới. Mặc định sản phẩm có biến thể của woocommerce rất xấu, không trực quan nên mình chia sẻ bài viết này làm cho nó đẹp hơn, người dùng dễ sử dụng ? .

Demo online trước nhé: Xem tại đây

Bắt đầu nhé, đầu tiên các bạn cần chuẩn bị cho mình plugin WooSwatches – Woocommerce Color or Image Variation Swatches
Bước cài đặt plugin các bạn tự tìm hiểu nhé.

B1: Mở trang chỉnh sửa sản phẩm và chọn sản phẩm biến thể  ở tab Product Data nhé.

B2: Nếu bạn chưa thêm thuộc tính thì vào tab Thuộc tính và thiết lập như bên dưới.

B3: Sau đó bạn chọn tab Các biến thể và tạo các biến thể từ các thuộc tính  – Thiết lập hình ảnh, giá cho từng biến thể và Cập nhật sản phẩm

B4: Bây giờ các bạn vào tab WooSwatcher, nhấp vào thuộc tính để cấu hình hiển thị cho nó.

Vậy là xong, lưu lại mọi thứ và cập nhật sản phẩm sau đó kiểm tra xem kết quả nhé. Chúc các bạn thành công

Nguồn: https://thanhtrungit.net