QODE Variation Swatches for WooCommerce provides you with a clear-cut way to present all your shoppers with detailed product variations alongside your products on shop single pages. This lets you reduce the user interaction cost as well as product viewing & comparison times, as you can feature a num
PricingFree downloadThe WordPress.org download is free. Pro versions, add-ons or external services may cost extra.
CompatibilityRequires WordPress 6.3 and PHP 7.4.
SourceWordPress plugins · Oct 23, 2026
01 / Source details
Aboutthistool.
QODE Variation Swatches for WooCommerce provides you with a clear-cut way to present all your shoppers with detailed product variations alongside your products on shop single pages.
This lets you reduce the user interaction cost as well as product viewing & comparison times, as you can feature a number of easily adjustable attributes for your products and more.
Check out the QODE Variation Swatches Demo Check out the QODE Variation Swatches documentation
Basic Features:
Create Color attributes
Create Image attributes
Create Label attributes
Adjustable variation styles
Custom variation width
Custom variation height
Custom variation border color
Custom size for the space between swatches
Get Even More with Premium:
Dual swatches for two-color samples
Custom color codes for selected attributes
Create Radio attributes
Create Tab Switch attributes
Adjustable Image, Color & Label attribute layouts
Individual width, height & border color attribute settings
Choose to show or omit attributes on product pages
Max numbers of visible attribute terms in lists
AJAX-powered variation data loading on shop pages
Customizable “Add to Cart” button
Product availability info
Show single variations in loops
Hide parent products in loops
Create new attribute terms
Different image galleries for each variation
Showcase Product Variations in Great Detail Using QODE Variation Swatches
Enhance the eCommerce experience for all your visitors by featuring product variations next to your products with the help of flexible, option-rich QODE Variation Swatches for WooCommerce plugin.
You can include color , image , and label attribute swatches. The appearance of each attribute swatch can be modified thanks to a selection of stylization options that the plugin provides.
Best of all, each variation gets displayed on the fly once it is clicked on, providing the potential customer with a quick, streamlined way to view and compare different versions of a product they are viewing on a shop single page, thus eliminating the need to navigate to a different page on your website in the process.
The plugin is fully optimized for presenting your product variations to mobile users too.
Customize the Appearance of your Swatches and Attributes
The appearance of each attribute can be customized using a clearly outlined set of options included with the QODE Variation Swatches for WooCommerce plugin.
You can easily configure width , height , and idle/active border colors for each of the attributes.
Documentation & Support
Check out our step-by-step user guide on how to install and use QODE Variation Swatches for WooCommerce.
You can also submit a topic to the support forum at and our support team will be glad to help you out.
Privacy Policy
We use our services
Qode’s CDN – The domain https://export.qodethemes.com is a service from which we retrieve the list of all Qode plugins displayed in the admin dashboard. Qode’s API – The domain https://api.qodeinteractive.com is an API that’s called when a user deactivates the plugin, to retrieve the reason for deactivation. Upon deactivating the plugin, the users are prompted for a reason for doing so. They also have the option to deactivate without providing a reply. The data obtained from the users who respond to the question is collected to improve the plugin. After the analysis of said data, the plugin is upgraded and enhanced in such a way as to fulfill the users’ expectations. Qode’s Terms of Use – https://qodeinteractive.com/terms-of-use/ Qode’s Privacy Policy – https://qodeinteractive.com/privacy-policy/
Looking for more?
Feel free to try out some of our other products:
Qi Theme Qi Addons for Elementor Qi Blocks for Gutenberg QODE Wishlist for WooCommerce QODE Quick View for WooCommerce QODE Compare for WooCommerce QODE Product Extra Options for WooCommerce QODE Product Bundles for WooCommerce QODE Optimizer
See it in action
Screenshots & previews.
Variation Swatches Demo Part 1.Variation Swatches Demo Part 2.Circled Color & Tab Switch.Slider Image & EU/UK Tab Switch.Three-attribute Variation.Circled Color with Title & Tab Switch.Variation Swatches Global Options.Admin General Content Options.Variation Swatches Style Options.
02 / Source details
Gettingstarted.
From your WordPress dashboard
01Go to your WordPress Dashboard -> Plugins -> Add New
02Search for QODE Variation Swatches for WooCommerce
03Activate QODE Variation Swatches for WooCommerce from your Plugins page.
04Enjoy 🙂
From wordpress.org
05Download QODE Variation Swatches for WooCommerce.
06Upload the qode-variation-swatches-for-woocommerce directory to your ‘/wp-content/plugins/’ directory, using your favorite method (ftp, sftp, scp, etc…)
07Activate QODE Variation Swatches for WooCommerce from your Plugins page.
08Enjoy 🙂
03 / Source details
Frequently asked questions.
How do I install QODE Variation Swatches for WooCommerce?
There are two ways you can install QODE Variation Swatches for WooCommerce plugin.
You can install the plugin from your WordPress dashboard: 1. Navigate to your WordPress Dashboard -> Plugins -> Add New 2. Search for QODE Variation Swatches for WooCommerce plugin 3. Install and Activate QODE Variation Swatches for WooCommerce from your Plugins page.
Or you can install it directly from WordPress.org 1. Locate and download QODE Variation Swatches for WooCommerce on wordpress.org 2. Upload the qode-variation-swatches-for-woocommerce directory to your ‘/wp-content/plugins/’ directory using your preferred method (ftp, sftp, scp, etc…) 3. Install and Activate QODE Variation Swatches for WooCommerce plugin from your Plugins page.
Website LLMs.txt and LLMs-Full.txt Generator is an LLMs.txt generator and llms-full.txt generator for WordPress. It helps site owners generate, manage, preview, validate, and serve AI discovery files from published public content. Use it to create structured /llms.txt and optional /llms-full.txt end
EngageDock AI is a customizable floating contact widget for WordPress websites that want more leads and faster visitor communication. It helps small businesses turn website traffic into calls, texts, emails, and callback requests from one clean contact panel. Key Features: Click-to-Call – One tap ca
Altify AI is an auto ALT text and AI ALT text plugin for WordPress images. It helps generate descriptive image ALT text for accessibility and image SEO. Use bulk image ALT text tools for your Media Library, generate featured image ALT text automatically, and scale WooCommerce image ALT updates with
The Accepted Payment Methods plugin is a straightforward, lightweight solution that enhances your website by displaying visually appealing icons of the payment methods you accept. This plugin is ideal for a variety of websites, including e-commerce platforms, service-oriented websites, and informati
