Adding variation swatches to your WooCommerce product pages can help improve the shopping experience. Swatches visually showcase product variations like color and size options.
In this in-depth guide, we’ll explain how to install, set up, configure, and customize the Variation Swatches for WooCommerce plugin by Themehigh for optimal performance.
Why Use Variation Swatches on WooCommerce Sites?
Before jumping into the setup, let’s discuss why swatches are so valuable for WooCommerce stores:
- Make Variations Visual – Swatches display variations visually for easy identification.
- Enhance UX – They improve user experience by simplifying product configuration.
- Reduce Clutter – Swatches eliminate bulky select dropdowns and radio buttons.
- Boost Conversions – Visitors can view and select options faster leading to more sales.
- Cross-Sell Products – Linking related products by color, size, etc may increase cross-sells.
- Improve Aesthetics – Swatches lend a clean, modern look and feel to product pages.
In summary, variation swatches benefit customers and store owners alike. The enhanced experience leads to higher conversions and revenue.
How to Install Variation Swatches for WooCommerce
There are two ways to install the Variation Swatches plugin:
Option 1: WordPress Directory
- In your WP dashboard, go to Plugins > Add New
- Search for “Variation Swatches”
- Click the Install Now button
- Activate the plugin
Option 2: Manual Upload
- Download the plugin .zip file from WordPress.org
- Go to Plugins > Add New
- Click Upload Plugin and choose the .zip file
- Install and activate the plugin
Either method works fine. The plugin will now show in your plugins list.
Configuring Product Attributes as Swatches
To use a product attribute for swatches:
- Go to Products > Attributes
- Edit an existing attribute or add a new one
- Set the Type to “Color”, “Image”, or “Label”
- Click Save Changes
This enables swatch functionality for that attribute. Repeat for all attributes you want displayed as swatches.
Adding Swatch Variation Terms
The next step is configuring the terms for each swatch-enabled attribute:
- On the Attributes screen, click “Configure Terms”
- For color swatches, pick the color in the built-in picker
- For images, upload the swatch image file
- For text labels, enter the descriptive label
- Save your changes
Add all the required terms for each attribute. For example, the different color options for a Color swatch.
Setting Up Swatches for Variable Products
To configure swatches for variable products:
- Edit the target variable product
- Go to the Attributes tab
- For the swatch attributes, add the required terms
- Upload color images or define text labels
- Update and publish the product
The defined swatches will now display on the product page!
Customizing Swatch Display and Functionality
Under Products > Swatch Settings, you can customize:
- Swatch icon size – Height and width in pixels
- Label dimensions – Height and width
- Icon shape – Round, square, etc
- Tooltip display – Toggle tooltip help text
This allows you to refine swatch display to match your theme and site design.
There are also settings for:
- Tooltip style – Background and text colors
- Unavailable variation handling – Hide or grey out
- Display order – Sequential, alphabetical, etc
Configuring these options allow you to fine-tune swatch functionality.
Tips for Using Variation Swatches
Some tips for success with swatches:
- Use transparent background color images
- Size swatch icons appropriately
- Pick intuitive colors and labels
- Keep label text short and descriptive
- Thoroughly test swatch selection behavior
- Educate customers on using swatches
- Link products by common swatches to encourage cross-sells
Taking time to polish swatch implementation will maximize benefits.
- Best WooCommerce Currency Switcher Plugins
- FlyCart Alternatives 2023
- 13 Best Dropshipping Plugins for WooCommerce
- Best WooCommerce Payment Gateways in Pakistan
- Best Amazon Affiliate Plugins for WordPress
Adding variation swatches enhances the shopping experience and product selection process. The Variation Swatches for WooCommerce plugin streamlines setup.
A recap of the key steps:
- Install the plugin via the WordPress directory or manual upload
- Configure attributes as Color, Image, or Label swatches
- Add visual terms for each swatch-enabled attribute
- Set up swatches for variable products
- Customize display settings and behavior as needed
Leveraging swatches allows customers to easily view, compare, and select product configurations. This leads to higher conversions.
Implementing variation swatches is a great way to improve your WooCommerce product pages.