Variation Swatches for Woo-commerce: Complete Guide How to Use

Variation Swatches for Woo-commerce: WooCommerce is an absolute gem when it comes to creating an online store. If you want to boost the sales of your online store, you have to work on the visuals of the items they interact with. If you offer variable products in the store, you should showcase all the variations of these products in a user-friendly manner.

Variation Swatches for WooCommerce

This is exactly what Variation Swatches for WooCommerce offers you. It has all the basic user-friendliness-oriented features, such as responsiveness and quality coding. Its function is to allow you to change product variations’ default select fields into colors, labels, and images.

It saves you from having to use the default WooCommerce dropdown fields.

Variation Swatches for WooCommerce allows you to customize the borders of your product swatches to match your site’s style. If you want, you can quickly add an image or floor to your background. It allows you to have a tooltip on your product and product category pages.

Also Read: How to Build an eCommerce Website with WordPress? 2024

Instead of removing out-of-stock products, it allows you to disable a variation, use a cross (with the color of your choice), and have opacity control.

What’s more, WooCommerce Variation Swatches has the Quick View feature. This plugin works on the product detail page by default. It lets you control the tooltip, image size, and font color and size. You can also choose whether you want a rounded or square swatch type.

For the ultimate shop page experience, you should also consider adding the Classified Listing Pro to your website. It facilitates the straightforward creation and management of a classified listing website. It boasts a wide range of backend settings for the site admin and frontend management settings for users. For instance, users can add, edit, or delete their posts at will.

How to Use Variation Swatches for WooCommerce 

First, download Variation Swatches for the WooCommerce plugin or install it from the backend. Just go to the dashboard of your website, then to plugins, then add new. Search for Variation Swatches for WooCommerce, and activate the Variation Swatches for WooCommerce Plugin by RadiusTheme.

Add and Edit Attributes and Attribute Terms

If you want to create global color attributes, navigate to WooCommerce Products à Attributes. Add the attributes you want by choosing the right type, from button, color, image, or radio.

If you want to add or edit new attribute terms, click on Configure Terms. To edit color attributes, select the color you want from the color picker. You can also set the tooltip type and tooltip text.

Also Check: WooCommerce Paytm Payment Gateway for WordPress

Set the Product Attributes

Go to the particular product in the editing mode and select Product Date à Variable Product. Now choose to add the custom product attributes and click on save. Ensure that you’ve checked “Used for Variations”.

Set the Product Variations

Set the product variation while ensuring that each variation has the image, price, and stock, or else it won’t show in the front end.

Go to Product Data, then select the Variations, Default Variation, and select Attributes, Image, Price, and Stock, setting them as necessary. When you get to Add Variation, you can set each variation one after another or create all of them at the same time by clicking on Create Variations from All Attributes. You should also set other fields, such as shipping, weight, SKU, and descriptions, as per your needs.

Set Individual Variations

If you want to control the settings of each product variation to override global variations, go to the Product Swatches tab and set the property. You can set the attribute you want to display for catalog mode.

Choose the type of image (and set the tooltip as text or image if you wish) and the type of color that you want. After choosing the individual property that you want, click on the Save Product Swatches button.

Also Check: Multiple Payment Solutions for WooCommerce Plugin

Frontend Variations

You can control the display of the shop or archive page by going to WooCommerce à Settings à Product Swatches à Shop/Archive Page. You can then take a look at the front-end view to see the results.

Custom Attributes

To add custom product attributes, go to Variable Product à Attributes, then add Custom Product Attributes. After clicking the Add button to add custom product attributes, give a name and value to your custom attributes. Click the Save Attributes button.

To add custom attributes in variation, add variations using the custom attributes you added in the previous step.

You can then set the custom attribute type by going to the Product Swatches tab on the left. From the Products Swatches, you can override global attribute settings. All you need to do is set the attribute types, be they color, button, image, or radio, set the property, and click the Save Product Swatches button.

You can have a common attribute type or just set it to custom if you want different attributes for each. From here, you can also set the tooltip for each attribute. You can then click the Save Product Swatches button.

Conclusion – Variation Swatches for Woo-commerce

Hopefully, this has been a good guide in helping you start using the Variation Swatches for WooCommerce without a hitch. Don’t hesitate to talk to the plugin’s reliable and responsive support if anything should not be clear while using the RadiusTheme template.