WooCommerce Product Variations Swatches




WooCommerce Product Variations Swatches - 1
WooCommerce Product Variations Swatches - 2

What is WooCommerce Product Variations Swatches?

WooCommerce Product Variations Swatches is a professional plugin that allows you to show and select attributes for variations products. The plugin displays variations select options of the products under colors, buttons, images, variation images, radio. Therefore, the plugin helps the customers observe the products they need more visually, save time to find the wanted products than dropdown type for variations of a variable product.

Infographic WooCommerce Product Variations Swatches

Variation Swatches on Shop


Variation Swatches on Product page


WooCommerce Filter Widgets

WooCommerce Product Variation Swatches - WooCommerce Filter Widgets


Converting any variations dropdown type into swatches with a couple of clicks.

When you activate WooCommerce Product Variations Swatches plugin, the variation products in the dropdown type will be converted into the variation swatches.

Customizing the global attributes and custom attributes in the plugin setting.

This plugin allows you to customize quickly all existing global attributes in WooCommerce through the swatches setting of this plugin.

  • Search attribute: You can use the search bar to search for an existing global attribute.
  • Display Style: You can set to display global attributes in 2 styles: Horizontal or vertical.
  • Display Type: You can set to display global attributes in 5 types: Button, Color, Image, Variation Image, Radio.
  • Swatches profile: You can select to show one of the available swatches profiles.
  • Show on product list: this allows you to show/hide an existing global attribute on the product list.
  • Edit terms of the global attributes: You can customize each attribute term of an existing global attribute.

You can easily install to display custom attributes of the variations products by the custom attribute feature in the plugin.

  • Custom attribute name: you can enter the name of the existing attributes, then customize them rapidly.
  • Assign category: Choose in which categories customizing the attribute be applied.
  • Display Style: You can select to display custom attributes in 2 styles: Horizontal or vertical.
  • Display Type: You can select to display custom attributes in 5 types: Button, Color, Image, Variation Image, Radio.
  • Swatches profile: Selecting to show custom attributes in one of the available swatches profile.
  • Show on product list: This allows you to show/hide a particular custom attribute on the product list.

Unlimited Swatches profiles

WooCommerce Product Variations Swatches plugin allows you to design and style for swatches profiles.

  • Customizing a swatches profile: You can customize to display a default swatch design pattern: Name, Padding, Height, Width, Font size, the size on mobile mode, on the product list, Color, Box-shadow effect.
  • Styling Hover status: You can customize the hover status including Color, Background, Border, Box-shadow effect, Reduce size.
  • Styling Selected status: You can customize the display status when a variations swatch is selected. The customization includes Color, Background, Border, Box-shadow effect, Reduce size.
  • Customizing Tooltip: You can customize the tooltip status when a variations swatch is selected. including Color, Border, Font size and Positions of the tooltip.
  • Clone/remove: You also can duplicate the current swatches profile to generate rapidly many swatch design patterns

Display product variations swatches in the product list and assigned pages.

You can manage to show/hide the product variations swatches through some options in the display on the product list tab.

  • Show Add to cart button: You can enable to show the Add to cart button and it will show up after selecting attributes.
  • Show attribute name: You can select to show/hide the attribute name of variations swatches.
  • Position: You can customize the positions of the variations swatches on the shop page, category page, and the products list.
  • Text tooltip: This allows you to show or hide the variations text tooltip on the products list.
  • Maximum attribute item: You can manage the number of the attribute items shown on the swatches.


  • Auto-update: E nter your purchase code and the plugin will auto-update whenever there is a new version.
  • Works on mobile: WooCommerce Product Variations Swatches works perfectly on mobile devices.
  • Easy to use: Friendly interface and easy to use.


/**1.0.3 - 2021.04.22**/
- Fixed: Show selected attribute item on single
- Fixed: Variation image in product list not change when selecting an attribute with image caused by some lazyload functionality of some plugins/themes
- Fixed: Swatches type Variation image not working with translated product variations(WPML)
- Fixed: Conflict with Contact form
- Update: Hide 'out of stock' variation item option for Product list
- Update: Product edit page: button "Add new" -> "Add", add button "Add new" like WooCommerce which is to create a new term for global attributes
- Update: “Out of stock” products are still selectable
- Added: Option to change product image according to attribute/variation image when selecting an attribute value
- Added: Compatibility with FacetWP, Ajax load more(Darren Cooney)
- Added: Add to cart button text on product list can be translated with WPML, Polylang
- Added: Swatches align for single product


There are no reviews yet.

Be the first to review “WooCommerce Product Variations Swatches”

Your email address will not be published. Required fields are marked *