2. WooCommerce Attribute Swatches Plugin (PREMIUM)

IconicWPhường has a nice plugin that replaces the variation dropdowns with image, color & text swatches. I know James Kemp (IconicWP. developer) well, and you can be assured you’d invest in a properly coded, lightweight plugin that generates a smooth, beautiful display.

Bạn đang xem: Yith woocommerce color and label variations documentation


It also goes khổng lồ edit the WooCommerce sản phẩm filters, applying the same thiết kế you’ve decided khổng lồ add lớn your variable product swatches.


On top of that, it adds nice swatches on the shop/category page as well, so that customers are already able to lớn switch their choice from there.


3. Variation Swatches for WooCommerce Plugin (FREE)

This free plugin is downloadable from the WordPress repository và has more than 80,000 active installations. However it hasn’t been updated since June 2020 and tư vấn seems unresponsive. To me, that’s a big red flag.

Variation Swatches for WooCommerce Plugin

a) Edit Existing Attributes e.g. “Color”

Once the plugin is installed, go to WordPress Dashboard > Products > Attributes & open one of the existing attributes, for example “Color” if you have it already.

Xem thêm: Hướng Dẫn Chi Tiết Cách Tạo Blog Cá Nhân Trên Facebook Mới Nhất 2021

The attribute edit page will now have sầu a new select field called “Type”. You can now pichồng “Color” from the drop-down lớn indicate you want this attribute lớn show as a color-picker.

Edit attribute – Variation Swatches for WooCommerce

b) Edit Existing Attribute Terms

Now that the attribute has been assigned to a variation swatch (color), it’s time to assign the right color lớn each attribute term.

If you have red, xanh và yellow, you will open each term & piông xã a color for each one (#ff0000, #0000ff & #ffff00 respectively).

Assigning colors khổng lồ the màu sắc Attribute terms – Variation Swatches for WooCommerce

c) Cheông xã Out the Single Product Page

That’s it really! Once you save the colors, the single product page will automatically show colors as swatches.

Final result with color swatches – Variation Swatches for WooCommerce

Related posts: