WooCommerce Product Variations Swatches

Displaying variation swatches for WooCommerce is a very helpful and necessary feature for a WooCommerce website. Do you want your variations to look more decorated, with different styles, and you can even customize them? A plugin that helps you create and customize variation swatches for WooCommerce websites makes the variations of your items look impressive and professional. Customers find it more comfortable and convenient to view variations of products as swatches. It catches their eyes, therefore, they decide to purchase more quickly.

What are WooCommerce Product Variations Swatches?

WooCommerce Product Variations Swatches is a variation swatches for the WooCommerce plugin that allows you to show the product attributes in the front end the way you design them in the back end. It contains multiple options for the admin to manage the settings of global attributes and make them display in different types, styles, or profiles. The admin can decide to show them on a single product page, or the Product list. You can also customize the swatches profile, enable showing variation swatches for WooCommerce on the widget, add custom CSS to design variation swatches for WooCommerce, and do many more things with our plugin.

Important note:

The plugin supports displaying swatches of product lists on specific pages by using WP’s Conditional Tags.

To handle WP’s Conditional Tags, this plugin uses eval() which is very dangerous because it allows the execution of arbitrary PHP code. Therefore, please only fill this field with proper conditional tags that are validated and/or provided by trusted developers.

What the plugin can do?

Convert any variations into variation swatches for WooCommerce with a couple of clicks.

When you activate the WooCommerce Product Variations Swatches plugin, the variations that were displayed in the drop-down menu will be converted into the variation swatches for WooCommerce.

Customize the global attributes in the plugin settings.

This plugin allows you to customize quickly all existing global attributes in WooCommerce by the settings of this plugin.

• Search attribute: You can use the search bar to search for an existing global attribute.
• Display Style: Select the style to display the global attributes: Horizontal or vertical.
• Display Type: Select the type to display the global attributes: Button, Color, Image, Variation Image, Radio, and Select.
• Swatches profile: You can select to show the attribute with 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 the attribute term with Image and Color types.
• Change product image: You can select to change product images when switching among attributes.

Manage the custom attributes by the Custom Attributes tab.

You can add the name of the custom attribute, and the assigned categories to apply the settings of Types, Styles, Swatches Profiles, Change product images, and Show on the product list.

If the custom attribute matches the condition in the “Attribute name” and the “Product Category” fields – The custom attribute has the same name as the field “Attribute name” and products that contain this custom attribute, belong to one of the selected “Product categories” – The swatches settings of the current rule will be applied.

• Attribute name: Enter the name of the custom attribute.
• Assign category: Choose which product categories the attribute will be applied to.
• Display Style: You can select the style to display custom attributes: Horizontal or vertical.
• Display Type: You can select the type to display custom attributes: Button, Color, Image, Variation Image, Radio, and Select.
• Swatches profile: Select to show the custom attributes as swatches with one of the available swatches profiles.
• Show on product list: This allows you to show/hide a particular custom attribute on the product list.
• Change product images: You can select the option you want, to change product images when switching among attributes.
• Other action: Clone/Remove the custom attributes.

Create unlimited Swatches profiles

The WooCommerce Product Variations Swatches plugin allows you to create and customize variation swatches for WooCommerce. There are always 3 available swatch profiles for you to use, but by duplicating/removing them, you can create as many swatch profiles as you want or delete the one that is not appropriate anymore. You can also customize them to make them your ideal swatch profiles with:

• Default status: Customize how each swatch is displayed in default status with name, size, color, background, border …
• Hover status: You can customize each swatch when hovering over the Color, Background, Border, and Box-shadow effects.
• Selected status: You can customize how each swatch is displayed when selected. The customization includes Color, Background, Border, Box-shadow effect
• Tooltip: You can customize the tooltip which is shown when hovering over a variation swatch. including Color, Border, Font size, and Positions of the tooltip.
• Cloning/removing profile: You also can duplicate the current swatch profile, or remove it.

Display variation swatches for WooCommerce on the product list and assigned pages.

You can manage to show/hide the variation swatches for WooCommerce by some options in the Swatches on Product List tab.

• Show Add to Cart button: You can enable this option to show the Add to Cart button and it will show up after selecting attributes.
• Show attribute name: This option is to show/hide the attribute name.
• Position/Custom position: Select a position for variation swatches for WooCommerce on the shop page, category page, and product list. Or you can add your own custom position.
• Enable tooltip: This allows you to show or hide the tooltip of variation swatches for WooCommerce.
• Maximum attribute items: You can manage how many items of an attribute will be displayed.

OTHER FEATURES OF WOOCOMMERCE PRODUCT VARIATIONS SWATCHES

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

OUR PLUGIN IS COMPATIBLE WITH

You can see this video guide on how to install and use WooCommerce Product Variations Swatches

/**1.1.3 - 2024.10.11**/
- Added: shortcode [viwpvs_swatches_archive] to show product swatches on the archive page
- Updated: VillaTheme support
- Updated: Compatible with WooCommerce Composite Products plugin

/**1.1.2 - 2024.04.23**/
- Fixed: fixed show all attribute in product loop
- Updated: Compatibility with WP 6.5 and WC 8.7
- Updated: Update file support

/**1.1.1 - 2023.10.10**/
- Fixed: Fixed Custom attribute special charset
- Updated: Compatibility with WP 6.3 and WC 8.0

/**1.1.0 - 2023.08.08**/
- Updated: Update file support
- Updated: Option show all attribute in product loop
- Updated: Compatibility with HPOS-WC 7.9
- Fixed: Type button and radio not change image

/**1.0.19 - 2023.06.20**/
- Updated: Compatibility with WC 7.8

/**1.0.18 - 2023.05.15**/
- Updated: Compatibility with WC 7.7

/**1.0.17 - 2023.05.03**/
- Fixed: Fixed error display

/**1.0.16 - 2023.04.28**/
- Fixed: Can not save attributes for simple products
- Fixed: Slider not working in product loop
- Updated: Compatibility with WC 7.6

/**1.0.15 - 2023.04.06**/
- Fixed: Variable Slider in product page not working

/**1.0.14 - 2023.03.23**/
- Updated: Updated show all items of the attribute in a slider on Product Detail Page
- Updated: Compatibility with WP 6.2 and WC 7.5

/**1.0.13 - 2022.12.21**/
- Added: Compatibility with Oxygen builder

/**1.0.13 - 2022.12.21**/
- Added: Compatibility with Divi theme
- Added: Added filter hook to sort option before limit apply_filters( 'vi_wpws_sort_options_before_limit', $options, $product, $attribute_name );
- Updated: Update optimize loading global attributes in Global Attributes settings

/**1.0.12 - 2022.11.18**/
- Updated: Update file languages
- Updated: Updated to allow display of images in tooltip custom attribute with button and color display type
- Updated: Compatibility with WP 6.1 and WC 7.1
- Added: Compatibility with 'Germanized für WooCommerce' plugin

/**1.0.11 - 2022.07.29**/
- Fixed: Tooltip covered by out-of-stock attributes if Position is set to Right
- Fixed: Initialize swatches after a request to admin-ajax.php but not an ajax request
- Added: Prioritize first attribute

/**1.0.10 - 2022.06.15**/
- Fixed: CSS of out-of-stock icon when enabling option to show attribute value for Color/Image type
- Fixed: Custom attributes not saving correctly if name contains quote sign

/**1.0.9 - 2022.06.13**/
- Fixed: "Change the size of attribute items" not applied to Select type
- Improved: Values of Global attributes are paginated
- Improved: Remove empty css
- Added: Preview of attribute image and color on Global attributes page
- Added: Ability to modify tooltip content, show attribute image/variation image in tooltip
- Added: Option to show attribute value for Color/Image type

/**1.0.8 - 2022.03.29**/
- Fixed: Swatches sometimes not initialize on product page built with Elementor
- Fixed: Small bug causes Elementor Hamburger menu not working when using along with WP rocket
- Updated: VillaTheme support

/**1.0.7 - 2022.03.23**/
- Fixed: Out-of-stock visual issue
- Improved: Use srcset for attribute image when available
- Updated: VillaTheme support
- Added: Option to only use Custom position for swatches on product list

/**1.0.6 - 2022.03.11**/
- Fixed: Zoom image not changing accordingly for "Change product image" option when using with Woodmart theme
- Fixed: Impeka theme - product item height on archive not auto correcting after variation swatches init
- Fixed: Tooltip not showing for out-of-stock attributes
- Added: Action hooks viwpvs_before_loop_variation_swatches and viwpvs_after_loop_variation_swatches

/**1.0.5 - 2022.01.15**/
- Fixed: Deprecated is_ajax in WC6.1
- Fixed: Backorder status condition check
- Fixed: Swatches not working with Woodmart theme's quickview
- Fixed: Some fields of global attributes(Edit screen) are duplicated when WPML is active
- Fixed: "Change product image" option not working if a product has more variations than "Ajax variation threshold"
- Updated: Make "Out of stock" design(Swatches profile) apply no matter "Disable 'out of stock' variation items" option is on or off

/**1.0.4 - 2021.11.16**/
- Fixed: Custom attribute not saving the value 0
- Fixed: "Change product image" option overrides variation image when a variation is selected
- Added: Custom hook for swatches position

/**1.0.3.2 - 2021.10.15**/
- Fixed: Missing variation price on product list if swatches position is before/after title
- Fixed: Custom attributes not saving correctly if attribute name is in non-latin language
- Updated: Load images/colors(filter by attributes) from original language if not set in a second language(WPML)
- Added: Option to set maximum items shown by default for WooCommerce filter widget

/**1.0.3.1 - 2021.09.15**/
- Fixed: Change attribute select when an attribute does not exist in any variations
- Fixed: Swatches in product list not working if Default Form Values do not exist in any variations
- Fixed: Custom attributes not saving correctly if attribute name contains special characters
- Fixed: Out-of-stock attributes not blur out when turning off "Disable Out of stock variation items" option if Default Form Values are set
- Fixed: "Show selected attribute item" not working with products that have more variations than the Ajax variation threshold
- Updated: Remove Ajax variation threshold limitation
- Optimized: Do not print css with empty style
- Added: Compatibility with JetSmart filters plugin

/**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
- Updated: Hide 'out of stock' variation item option for Product list
- Updated: Product edit page: button "Add new" -> "Add", add button "Add new" like WooCommerce which is to create a new term for global attributes
- Updated: “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

/**1.0.2.6 - 2020.12.18**/
- Added: Reset settings general
- Added: Attribute image size
- Fixed: Auto update

/**1.0.2.5 - 2020.12.12**/
- Fixed: Swatches select revert to attribute slug after add to cart
- Fixed: Color separator selection changes not reflecting
- Fixed: Display swatches slider
- Fixed: Save attribute on product editor page
- Updated: Delete image for attribute item
- Updated: Style quantity on product list
- Updated: Compatibility with WP 5.6 and WC 4.8
- Added: New position on Product List - before product title, after product title
- Added: Enable/disable attribute title on single
- Added: Show selected attribute item on single
- Added: Import/ export settings general

/**1.0.2.4 - 2020.08.15**/
- Added: Compatibility with WP 5.5 and WC 4.3
– Fixed: 'Out of stock' Swatches - namesake
- Fixed: Check update request

/**1.0.2.3 - 2020.07.01**/
– Fixed: Design 'Filter Products by Attribute' WooCommerce

/**1.0.2.2 - 2020.06.29**/
– Updated: Class support
– Added: Add Quantity field in Product list
– Added: Add default Swatches profile
– Added: Add ajax variation threshold
– Added: Select multi value for global in the product edit page
– Added: Custom design Global Attribute for Product category
– Added: Design 'Filter Products by Attribute' WooCommerce
– Added: Carousel format for a large number of variations in Product list
– Added: filter 'viwpvs_variation_option_tooltip' to change content of the tooltip

/**1.0.2.1 - 2020.05.09**/
- Fixed: 'Out of stock' Swatches in single product page
- Fixed: Show in product list for custom attribute
- Fixed: Display color type and image type for custom attribute

/**1.0.2 - 2020.04.18**/
- Fixed: 'out of stock' Swatches in Product list
- Added: Text of 'add to cart' button in Product list
- Added: Hide 'out of stock' variation item

/**1.0.1 - 2020.04.04**/
- Fixed: Function prefix
- Fixed: Horizontal style

/**1.0.0 - 2020.04.02**/
~ The first released