Hướng dẫn tạo nút chọn sản phẩm theo màu sắc trong Woocommerce

Trong bài viết trước, mình đã hướng dẫn các bạn tạo tùy chọn sản phẩm theo màu sắc, tuy nhiên chức năng mặc định của Woocommerce không làm chúng ta thỏa mãn thì hôm nay, mình xin trình bày cách để thể hiện tùy chọn màu sắc nhìn “chất” hơn, đó là chúng ta sẽ sử dụng plugin có tên “YITH WooCommerce Color and Label Variations Premium“.

Trước hết, để thể hiện được ô màu sắc, ta cần cài plugin YITH WooCommerce Color and Label Variations Premium.

Link download mình sẽ để ở cuối bài, tất cả các plugin download trên blog mình điều là hàng sạch và sẽ update liên tục khi có bản mới nhất.

Để tạo thuộc tính màu sắc, trong giao diện admin ta vào Products -> Attributes

Trang tạo Attributes hiện ra, ta nhập vào các thông số tương tự như hình:

Lưu ý rằng mục Type chỉ xuất hiện khi chúng ta đã cài đặt plugin YITH WooCommerce Color and Label Variations Premium nhé, nếu chưa cài, nó sẽ không xuất hiện mục này.

Ở mục Type, ta chọn Colorpicker.

Các ô khác các bạn nhập như bình thường nhé,

Sau khi đã bấm Add attribute xong, chúng ta đã hoàn tất bước tạo thuộc tính cho sản phẩm rồi.

Tiếp theo, ta phải thêm giá trị cho thuộc tính màu sắc

Chọn màu tương ứng cho ô Colorpicker, màu sắc này sẽ được hiển thị ra trang sản phẩm nhé.

Hình ảnh sau khi đã hoàn tất bước thêm giá trị cho thuộc tính màu sắc:

Ok, tiếp theo để thêm những thuộc tính này vào sản phẩm cụ thể thì ta vào trang add product hoặc edit product.

Product data : Chọn giá trị là Variable product

Sau đó vào Tab Attributes để thêm thuộc tính muốn sử dụng vào.

Add xong Attributes thì chuyển sang Tab Variations, chọn Add variation và bấm go:

Rê chuột vào dòng giá trị thuộc tính đó, sẽ hiện lên các tùy chọn, bấm vào nút xỗ xuống :

Bảng thông tin sản phẩm theo Attribute “Màu sắc” mang già trị “Màu đỏ” hiện ra, chúng ta nhập thông tin vào là xong

Làm tương từ đối với các màu khác, vậy là xong, quay lại trang sản phẩm, chúng ta sẽ được kết quả như mong muốn, các ô màu sắc đã hiện ra thay vì list xổ xuống, nhìn chuyên nghiệp hơn rồi đúng không 😀

Xem plugin và Download YITH WooCommerce Color and Label Variations Premium tại link dưới :

[sociallocker id=”36″] Download YITH WooCommerce Color and Label Variations Premium [/sociallocker]

4
Leave a Reply

avatar
4 Comment threads
0 Thread replies
0 Followers
 
Most reacted comment
Hottest comment thread
4 Comment authors
đào văn dânBaprangVõ QuyếtNgan Khanh Recent comment authors
  Subscribe  
newest oldest most voted
Notify of
Ngan Khanh
Member
Ngan Khanh

Plugin của Yith thì tuyệt rồi, mỗi tội đắt. Cám ơn bác Khải đã chia sẻ!

Võ Quyết
Member
Võ Quyết

Cảm ơn bạn, đang cần plugin này

Baprang
Member
Baprang

thank bác

đào văn dân
Member
đào văn dân

Cám ơn add nhá