To save your buyers, you need to appeal to their visual senses so they can be drawn to the products you offer. The default WooCommerce shops set up are usually very plain and do not provide for product variation swatches to attract customers.
For this reason, several variation swatches plugins for WooCommerce have been developed to assist you with this task. The variation swatches will enable you to display your products with increased variations, which benefits you because your site’s traffic will increase and improve customer experiences.
The variation plugins will boost your sales and purchases, enabling you to maximize profits from your products and establish a sustainable customer base. The variation swatches plugins for WooCommerce will put you in a position to design various product attributes ranging from color, images, buttons, and many other attributes.
This article focuses on the color attributes and clearly outlines how to add color variation swatches in WooCommerce using the widely known WooCommerce Variation Swatches plugins.
Let’s get started.
Add Colour Variation Swatches to Product Page with YaySwatches
Variation Swatches for WooCommerce – YaySwatches (free version) is a type of variation plugin for WooCommerce that will allow you to showcase different variation selectors such as image swatches and buttons and add color variations for your WooCommerce shop.
The steps to use this plugin are pretty simple:
First, you’ll need to purchase and properly install the YaySwatches Plugin and configure it with your WooCommerce Website. To install, follow the steps below;
- Go to Plugins – proceed to Add New – then upload the plugins.
- Select the downloaded zip file, upload it, then click on Activate
- Once activated, you’ll be required to enter the license key for validation.
- Now that the plugin is nicely installed, you can start adding the color variation swatches.
To do this;
- Go to Products – then to Attributes on the dashboard
- Click the edit button on the attributes you want to add to the color swatches.
- At the third stage, you can choose the Swatch type, which is the color swatch in this case
After selecting the color swatch, you’ll be presented with two additional configuration options: Swatch Shape and Enable Tooltips. Select the square or round for the swatch shape and Yes to enable tooltips.
Once done, proceed to the last configuration option, which will require you to decide if you want to show the swatch in a dialog box. Select Yes if this is your preferred outline.
Finally, click on Update to conclude the process.
Showing the color swatches for your customers to select from significantly improves their shopping experience.
Add WooCommerce Variation Swatches and Photos to Shop Page
With YaySwatches, adding variation swatches and photos to WooCommerce shop/category page is simple.
Please follow these steps:
Step 1: Ensure you add the attributes and set up product variables if you haven’t done so.
Step 2: Go to YaySwatches menu > Shop/category settings to find the variations tab.
Step 3: Configure the display of variation swatches based on selected attributes.
Step 4: Select the display size and other related options.
Step 5: Preview the swatches on the right panel and click Save changes.
Alternative Ways to Enable Swatches for WooCommerce
Apart from YaySwatches, here are a few other solutions to help you get swatches up and running in your store. Although the steps are not equally simple, these are still viable plugins that you can download from WordPress or Envato Codecanyon marketplace.
Let’s see what they have to offer.
Swatchly – WooCommerce Variation Swatches for Products
With Swatchly, you can effectively add color variation attributes to your site in the most convenient way. The plugin also provides a swatch preview column t available on the admin panel when installing it. Here’s how to use it to add the color variation swatches
Like the others, you’ll need to install and integrate it into your WooCommerce Website after purchase.
After doing this;
- Select the Products and then proceed to Attributes as in the dashboard
- Click on edit the attributes you want to add the color swatches to
- Select the Swatch type and click on the color swatch
- Add the color attributes in line with your required specifications
- Click on the Update setting to finish the process
This process is the same for even the pro version, which has more functionalities regarding variation swatches plugins.
WooSwatches – WooCommerce Color or Image Variation Swatches
WooSwatches supports color/image/text variation swatches and dropdown selections. It offers an inbuilt direct variation link feature.
You can display images or colors in all common sizes. Also, feel free to display them in round or square mode.
Conclusion
With YaySwatches – Variation Swatches for WooCommerce, it is a very elaborate step-by-step process that you can quickly complete. In just a few minutes, you’ll successfully add the color variation swatches to your WooCommerce shop.
You will not only be able to attract customers with nice attractive colors, but you’ll increase your site’s traffic which, in the end, influences product purchases.
