Variation Swatches in Neve

­čôŁNote: The Variation Swatches feature is part of the Neve Pro's WooCommerce Booster module which you can get from here.

The default style for variable WooCommerce products in Neve is a drop-down choice.

To enable the advanced style for them like color, label, or thumbnail, navigate to Dashboard -> Appearance -> Neve Options, Neve Pro tab, click on the arrow near the WooCommerce Booster module to expand the Extra features and enable variations swatches.

After that, navigate to Dashboard -> Products -> Attributes and create a global attribute, for example, Color. In this case, we'll set the attribute type to color.

New colors can be added now, including the attribute value.

Once all the desired values for this attribute are added, it's time to use them as variations for a WooCommerce product. This can be set while editing the product, by choosing the global attribute in the Attributes tab of the product - make sure to use these options for variations by checking the box.

The final step is to check the Variations tab of the product, set the desired color from the global attribute and price for each variation.

Now the colors will appear instead of the default drop-down choice on the product page.

Enabling the variation swatches on the shop page (including product archive pages)

It's also possible to enable the variation swatches on the product archive pages, there are two settings for it. 

The first step is to enable a checkbox while editing an attribute in Dashboard -> Products -> Attributes. This way, it can be specified for each attribute if it should appear on the products archives pages or not.

The second step is to make sure the add-to-cart is also enabled on the product archive pages and it's also set to appear below the product thumbnail(and not in front of it with the hovering effect). In the same set of Customizer settings with the add-to-cart button, there is also a toggle that needs to be enabled to show the variation swatches on the product archive pages.

Sync variation swatches with the product featured image

For a better user experience, it is possible to sync the variation swatches with the product's featured image. For example, if we have a Hoodie product available in three different colors, each variation can be associated with a product image. This way, a different image will be shown based on the selected variation.

This can be configured while editing the product.

This feature works in the following cases.

Product page

Shop (product archive) page

Quick view modal from the archive page

If a product has more than 30 variations, you need to add a custom code to support that as by default Neve supports up to 30 variations. You can install the plugin provided below or add this function to your child theme.

Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.