[Woocommerce] Cách sử dụng YITH WooCommerce Color and Label Variations [NEW]



Trong số các plugin nhỏ trong gói YITH Essential Kit for Woocommerce # 1 mà mình đã giới thiệu trước đó, có plugin này mà có lẽ nhiều bạn đang cần, mục đích của nó là giúp bạn tạo ra các tùy chọn về màu sắc hoặc nhãn, hình ảnh như hình bên dưới.

[Woocommerce] Cách sử dụng YITH WooCommerce Color and Label Variations [NEW]

Tất cả đều miễn phí Chà, mặc dù phiên bản trả phí sẽ có nhiều lựa chọn hơn nhưng nếu bạn chỉ cần như vậy thì phiên bản miễn phí là quá đủ.

Đầu tiên bạn phải cài đặt plugin YITH Essential Kit for Woocommerce # 1 mà mình đã hướng dẫn trước đó. Sau đó, bạn nhập YITH Plugins -> YITH Essential Kit cho Woocommerce # 1 và tìm plugin YITH WooCommerce Màu sắc và Các biến thể Nhãn để kích hoạt.

yith-color-label-02

Phiên bản miễn phí plugin này sẽ không có các tùy chọn chi tiết như phiên bản trả phí nên bạn vào thẳng phần Sản phẩm -> Thuộc tính để tạo.

Thêm thuộc tính bộ chọn màu

Trong phần tạo thuộc tính, bạn chọn loại thuộc tính là Colorpicker.

yith-color-label-03

Sau đó bạn chuyển đến trang để thêm giá trị thuộc tính vừa tạo.

yith-color-label-04

Và thêm từng giá trị màu như hình dưới đây.

yith-color-label-05

Làm tương tự nếu bạn muốn có nhiều màu hơn.

yith-color-label-06

Bạn sẽ thêm nó vào một sản phẩm có một biến thể như hướng dẫn này. Kết quả sau khi thêm vào sản phẩm.

yith-color-label-07

Thêm thuộc tính kiểu nhãn (Nhãn)

Chúng tôi tạo một thuộc tính sản phẩm của loại nhãn như sau:

yith-color-label-08

Và tương tự như trên, chúng tôi tăng thêm giá trị cho nó.

yith-color-label-09

Kết quả sau khi thêm một số giá trị cần thiết.

yith-color-label-10

Và tất nhiên, bạn cũng đưa nó vào sản phẩm giống như cách bạn thêm một sản phẩm biến thể thông thường. Và đây là kết quả sau khi thêm:

yith-color-label-11

Trong trường hợp nhãn của bạn quá dài nhưng khung của nó nhỏ, hãy thêm CSS sau style.css (sửa 30px thành chiều rộng bạn muốn kéo dài).


.select_option span, .select_option img {
width: 30px;
}

Các thuộc tính Image type còn lại, các bạn làm tương tự, cách sử dụng cũng không khác gì nên có lẽ mình không viết thêm. Chúc may mắn.

Đánh giá nội dung này

Tiếp tục đọc trong bộ truyện