Trang chủ WordpressWordpress Plugin [Woocommerce] Cách sử dụng YITH WooCommerce Color and Label Variations

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

bởi Thạch Phạm
10 bình luận 6494 views

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

yith-color-label-01

Hoàn toàn miễn phí nhé, mặc dù bản trả phí sẽ có nhiều tùy chọn hơn nhưng nếu bạn chỉ cần thế thì bản miễn phí đã là quá đủ.

Đầu tiên bạn phải cài plugin YITH Esential Kit for Woocommerce #1 vào mà mình đã hướng dẫn trước đó. Sau đó bạn vào YITH Plugins -> YITH Essential Kit for Woocommerce #1 và tìm plugin YITH WooCommerce Color and Label Variations để kích hoạt lên.

yith-color-label-02

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

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

Ở 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 vào 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 sắc như ảnh dưới.

yith-color-label-05

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

yith-color-label-06

Cuối cùng là bạn thêm nó vào sản phẩm có biến thể giống 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 (Label)

Chúng ta tạo một thuộc tính sản phẩm kiểu label như sau:

yith-color-label-08

Và tương tự ở trên, ta thêm giá trị vào 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à dĩ nhiên, bạn cũng đưa nó vào sản phẩm giống như cách thêm một sản phẩm có biến thể thông thường. Và đây là kết quả sau khi thêm:

yith-color-label-11

Trường hợp label của bạn quá dài mà cái khung nó nhỏ thì thêm đoạn CSS sau vào style.css (sửa 30px thành độ rộng bạn muốn nới ra).

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

Thuộc tính kiểu Image còn lại các bạn làm tương tự nhé, cách sử dụng không khác gì nên có lẽ mình không viết ra thêm. Chúc các bạn thành công.

10 bình luận

Có thể bạn quan tâm

0 0 vote
Article Rating
guest
10 Comments
mới nhất
cũ nhất đánh giá nhiều
Inline Feedbacks
View all comments
Phi

A cho e hỏi nếu mình muốn tạo 1 lựa chọn có 2 màu (Vd Đỏ đen, xanh trắng,…) thì phải làm sao ạ?

Duyên

Anh Thạch cho mình hỏi xíu, khi sử dụng plugin này thì sẽ phải chọn sản phẩm biến thể thì khi xem sản phẩm mới hiển thị được màu sắc. Nhưng có 1 điều là sản phẩm biến thể lại không có chỗ điền giá sản phẩm. Vậy phải làm thế nào để có thể hiện được giá sản phẩm và lựa chọn màu sắc được vậy?

Phóng

Cài YITH WooCommerce #1 xong những cái khác mình đã crack sẽ bị vô hiệu hoá thì phải làm sao

Thi Phạm

Thạch ơi, cho mình hỏi là, Ví dụ: 1 sản phẩm có nhiêu size, mỗi size sẽ có giá riêng thì có thể làm giống như phần Thông tin kỹ thuật của trang này không?
http://www.minhthanhtackles.com/products/view/73/Daiwa_2012_New_Luvias
Thanks Thạch nhiều.

Pham Trung

Chào anh Thạch
Anh cho mình hỏi là trong woocommerce có chức năng cài đặt giá trị theo số lượng ko?
VD: 1 ream giấy có giá 50.000đ. Nếu mua dưới 5 ream thì giá là 50.000đ, còn mua trên 5 ream thì có giá 45.000đ, người mua chỉ cần nhập số lượng là giá tiền sẽ tự thay đổi theo. Nếu có thì cài đặt trong menu nào của woocommerce, nhờ anh giúp dùm. cảm ơn anh.

Phương

Hay quá ạ 🙂
benhtrivn.com

proacma

chào anh. có cách nào để nó hiển thị được nhiều hình hơn không. hiện tại nếu chọn màu nó chỉ hiện đúng 1 hình mà mình đã chọn. ví dụ sản phẩm mình có 3 màu và mỗi màu mình có 3 hình.

Hòa

tuy nhiên mình áp dụng vào Betheme mình đang sử dụng thì nó chỉ hiện text, (không nhấn đc mà ko có ô màu sắc), hỗ trợ giúp mình nhé,

trung

Thạch ơi cho mình hỏi,

Cái chỗ thêm size sản phẩm, giả sử màu đỏ có 2 size thì làm thế nào bạn.Như trong video thì mình chỉ có thể thêm 1 size or tất cả thôi

10
0
Would love your thoughts, please comment.x
()
x