When WooCommerce first launched, setting up an online store was often more challenging than it is today. Installing plugins, configuring product variations, and customizing the way items are displayed on your store required multiple steps and sometimes technical know-how.
Early WooCommerce users often had to manually tweak settings or even edit code to get their product pages looking and functioning the way they wanted. Over the years, WooCommerce and its plugin ecosystem have evolved tremendously. Today, installing and configuring plugins is far simpler, even for beginners.
The interface is intuitive, and many plugins, such as the Variation Swatches for WooCommerce, make it possible to replace standard dropdown menus with visual, clickable swatches in just a few steps. This shift has transformed product pages from plain lists into interactive, user-friendly experiences, helping shoppers quickly choose the color, size, or style they want without confusion.
In this guide, we’ll walk you through the entire installation process for the Variation Swatches for WooCommerce plugin. By the end, you’ll see just how easy it is to set up radio button swatches and upgrade your product pages for a more engaging shopping experience.
Installing the Variation Swatches Plugin
Installing the Variation Swatches as Radio Buttons for WooCommerce by Extendons is easier than it might seem, and you don’t need any coding knowledge. Once downloaded and uploaded, the plugin gives you full control over how your product variations appear, whether as colors, images, or text labels.
You can adjust the size and shape of swatches, set how out-of-stock variations are displayed, and even customize settings at both a global and individual product level.
Step-by-Step Installation Guide
- Download the Plugin – Log in to your WooCommerce account and download the Variation Swatches as Radio Buttons for WooCommerce zip file. Save it somewhere easy to access on your computer.
- Access WordPress Admin – Log in to your WordPress admin panel and go to Plugins > Add New.
- Upload the Plugin – Click the Upload Plugin button at the top, select the zip file you downloaded, and click Install Now.
- Activate the Plugin – Once installation is complete, click Activate. A new Variation Swatches tab will now appear in the WooCommerce settings menu.
- Start Configuring – Open the Variation Swatches settings to customize how radio buttons are displayed. You can choose between colors, images, or text labels, adjust the size and shape, and set rules for out-of-stock variations. These settings can be applied globally or per product, depending on your store’s needs.
With the plugin installed and configured, your WooCommerce product pages can now offer a more interactive and visually appealing way for customers to select variations. This setup ensures shoppers have a clear view of their options, making the buying process smoother and more enjoyable.
Configuring the Plugin Step by Step
Once the WooCommerce Colour Swatches plugin is activated, go to WooCommerce > Settings > Variation Swatches. Here are the main configuration steps you’ll want to follow:
- General Settings – Decide whether you want to show out-of-stock variations crossed out, blurred, or hidden entirely. Choose if the product image on the shop page changes when customers hover over or click a swatch. You can also set whether swatches appear for all variable products or only selected ones. There’s even an option to generate variation URLs so customers can land directly on a specific combination of attributes.
- Shape Settings – Configure whether swatches are round or square, set the width and height, and adjust the font size for text labels. These options make your swatches look consistent with your theme and product presentation.
- Tooltip Settings – Enable tooltips to show either text or images when a customer hovers over a swatch. You can also set the font size, background color, and text color of the tooltip to ensure it fits your store’s design.
- Border Settings – Decide if you want to add borders around swatches and customize the border color. This can help highlight selections and make your swatches stand out more clearly.
- Map Attributes to Swatch Type – Assign each attribute to a specific swatch type. For example, color attributes can appear as color swatches, while size attributes appear as text labels. You can also override these settings at the product level, giving you flexibility for special items or collections.
Once these configurations are complete, your product pages will have interactive swatches that replace the default dropdowns and provide a cleaner, more engaging selection experience.
Benefits of Using Variation Swatches
Using variation swatches for WooCommerce is more than just a visual upgrade. It makes your product pages easier for customers to navigate, which can reduce confusion and improve sales. When shoppers can see all options at a glance through colored or image swatches, they are more likely to make a purchase without hesitation.
The Extendons plugin in particular adds several conveniences that make it stand out. It allows you to display swatches on both the product and shop pages, show all attributes, and even let customers edit their selections directly from the cart page.
The WooCommerce colour swatches and customizable radio button shapes give you the ability to represent products accurately and clearly, which is especially useful for clothing, accessories, and home decor items. Overall, stores that use this plugin tend to see faster selection times, fewer abandoned carts, and an improved shopping experience for customers.
Conclusion
Installing variation swatches for WooCommerce doesn’t have to be overwhelming, and with the right plugin, it can completely change the way customers interact with your products. The Extendons plugin makes it easy to replace default dropdowns with radio buttons, color swatches, image swatches, and text labels, while offering full control over appearance and functionality.
By following this step-by-step guide, your store can offer a more interactive, engaging, and visually appealing shopping experience that keeps customers coming back and makes your products shine.
