SysBasics Color or Image Variation Swatches For WooCommerce
Formerly known as WooSwatches WooCommerce Color or Image Variation Swatches plugin helps you to convert your existing WooCommerce variable Product dropdown select into nicely looking color image and label swatches. You set color image globally once and plugin automatically syncs whenever you create variable product using that attribute. You can also enable swatches globally sitewide on all product that are created from global attributes. While plugin enables Swatches globally , it also have a flexibility to override color images on per product basis
WooSwatches – SysBasics Color or Image Variation Swatches For WooCommerce Features
Our Variation Swatches For WooCommerce Plugin Supports color image label variation swatches and dropdown select.
Woocommerce improved variable product attributes and attribute swatches.
Global color or image values for attributes.
Inbuilt color/image product filter.
Works on mobile devices.
Different sizes of swatch from small to large.
Square as well as round swatch support.
Option to display option name below swatch.
Show selected option name on single product page.
Shows color or image swatches on shop/category/tag archive pages.
Inbuilt direct variation link feature.
Change product image on swatch hover on category/archive pages.
Color , image swatches compatible with shortcode.
Show more link if swatches number are greater than defined.
Slider for shop swatches if swatches number is higher than set value.
WooCommerce color or image variation swatches Plugin Fully Compatible with Elementor Pro/Jetwoobuilder Crocoblock
Compatible with Flatsome Quickview Modal Popup
Using our WooCommerce color or image variation swatches Plugin Convert your normal variable attribute dropdown select to nicely looking color or image select. You can display images or color in all common size. Display them in round or square mode.
Fully Compatible with Yith Quick View Mode.
Our Variation Swatches for WooCommerce Plugin is fully compatible with most popular quick view plugin out there. All the features of single product page swatches will work smoothly with our plugin. See it in action
Fully Compatible with Elementor Pro/Crocoblock Jetwoobuilder.
All the features of plugin weather its is shop swatches or product page swatches , are fully compatible with Elementor Pro Builder as Well as Crocoblock Jetwoobuilder.
Use Variation Images as Swatch Images
For products made from single attribute you will have a option to use variation images as swatch images and that can be used as hover image also on Shop Page.This way you can save your time to asign swatch images. Imagine you product with 100 variation , it will take lot of time to asign swatches to each value. In such case you can use variation images as swatch images. It will save lot of time for you sitewide.
Show swatches in slider
You can enable swatch slider for shop swatches if number of swatches are greater than specified number. Also on single product page you can display show more link if number of swatches are greater than specified number. You will also be able to replace show more with your preferred text.
Optionally Display hover image on swatch hover on single product page instead of text tooltip.Works with global hover image also.
Optionally Display attribute description instead of attribute name for selected text.By default it shows only selected attribute name.
You can opt to display swatches of any one product attribute below product title on shop/category/tag archive pages.Product images will be replaced with swatch hover image whenever user takes cursor on any swatch.
Plugin comes with easy to use admin UI which will allow you to set color , image or other options in no time.
You will be able to show price along with text swatches on variable products made from one attribute.
You can also set image or color settings for each attribute value on attribute edit page . Once you set the image , this values will be used automatically for front-end swatch wherever preset attributes are used for variables.
SysBasics Color or Image Variation Swatches For WooCommerce Cross out of stock Options
Optionally you can enable crossing out of outofstock option on shop pages.It works with any number of attributes.
SysBasics Color or Image Variation Swatches For WooCommerce Flatsome Quickview
Our Plugin is fully compatible with Flatsome inbuilt quick view feature.All the features of single product swatches will work fine in quick view modal popup.
WooCommerce Variation Swatches Plugin FAQ
WooCommerce Color or Image Variation Swatches Changelog
== Changelog ==
Version 4.0.0 - 19 June 2024
- Fix - critical fatal error.
Version 3.9.26 - 13 December 2023
Version 3.9.26 - 13 December 2023
- Version 3.9.26 (13 December 2023) - Fix- Issue with plugin update.
- Version 3.9.25 (13 December 2023) - Enhancement - Backend Ui Improvement.
- Version 3.9.24 (10 December 2023) - Enhancement - UI improvements in backend.
- Version 3.9.23 (03 December 2023) - Enhancement - UI improvements in backend.
- Version 3.9.22 - 02 December 2023 - - Enhancement - Added interval check to auto update to improve perfomance.
- Enhancement - Updated Get domain validation url.
- Version 3.9.21 - 01 December 2023 - Fix - Debug errors.
- Version 3.9.20 - 01 December 2023 - Enhancement - Added update check interval.
- Version 3.9.19 (30 December 2023) - Fix - Debug errors.
- Version 3.9.18 (30 November 2023) - Fix - Debug errors.
- Version 3.9.17 (30 November 2023) - Fix - Added readme.txt for changelog with autoupdate.
- Version 3.9.16 (30 November 2023) - Fix - debug errors.
- Version 3.9.15 (30 November 2023) - Fix - domain mismatch issue.
- Version 3.9.14 (25 November 2023) - Fix - bug that breaks outofstock crossing.
- Version 3.9.13 (24 November 2023) - Enhancement - Improvement in backend admin menu styling.
- Version 3.9.11 (22 November 2023) - Fix - Debug errors on license activation tab.
- Version 3.9.10 (19 November 2023) - Fix - Some UI improvements.
- Version 3.9.9 (18 November 2023) - Fix - Github token issues causing automatic update fail.
- Version 3.9.8 (17 November 2023) - Fix - Some Debug errors.
- Version 3.9.7 (15 November 2023) - Fix - Added inbuilt auto update feature.
- Enhancement - Added HPOS Compatibility.
Version 3.8.0 - 15 August 2023
* Fix - debug errors with php 8.3
Version 3.7.3 - 17 March 2023
* Version 3.7.3 - 17 March 2023 - Fix - Compatibility issue with previous release.
* Version 3.7.2 - 17 March 2023 - Fix - Compatibility issues with Flatsome quick view feature
* Fix - Compatibility issues with YITH Quick View Mode Plugin
Version 3.6.6 - 17 February 2023
* Version 3.6.6 - Fix-issue with plugin setting not getting saved.
* Version 3.6.5 - Fixed php 8 related error.
* Version 3.6.4 - Added support for HTML5
How to Update WooSwatches – Woocommerce Color or Image Variation Swatches Plugin
Use Envato wordpress plugin to update all your envato marketplace themes and plugins.
Troubleshoot – Shopkeeper theme Add to cart button get disabled after choosing out of stock option
If you are using our plugin with shopkeeper theme and if you notice that whenever out of stock option are selected , “out of stock ” message appears then it makes add to cart button inactive. To fix this issue you will need to visit customize/product page and uncheck “Disable Out of Stock Variations” checkbox.
Keep that option unchecked as long as you use our plugin with shopkeeper theme.
Cross Out of Stock options
Please remember that this feature is still in beta. By default plugin do not crossout out of stock options. If you wish to enable this feature use below given php snippet code.
add_filter('wcva_cross_outofstock_options','wcva_cross_outofstock_options',10,2);
function wcva_cross_outofstock_options() {
return "yes";
}
You may use Code Snippets plugin to insert any extra php code.
Add text before or after shop swatches
To use this plugin you will need plugin version 3.0.15 or higher.
To add text before attribute swatches use this code snippet
add_action('wcva_before_shop_swatches','wcva_add_text_before_swatches',10,2);
function wcva_add_text_before_swatches($product_id,$attribute) {
if ($attribute == 'pa_size') {
echo 'Available Sizes :';
}
}
To add text after shop swatches use this code snippet
add_action('wcva_after_shop_swatches','wcva_add_text_before_swatches',10,2);
function wcva_add_text_before_swatches($product_id,$attribute) {
if ($attribute == 'pa_size') {
echo 'Available Sizes :';
}
}
To insert extra php code you may use Code Snippets plugin.
Show out of stock options on shop page
By default plugin hides out of stock options in case where no variation linked to that option exists. Optionally you can show them by using below given code snippet.
add_action('wcva_shop_outofstock_output','wcva_shop_outofstock_output_function',10,2);
function wcva_shop_outofstock_output_function($filtered_array,$all_values) {
return $all_values;
}
Restore original product image on shop swatch mouseleave
If you have all the product images and hover images that are of similar dimensions , you can enable this feature using snippets given below.
add_filter('wcva_restore_product_image_on_mouseleave','wcva_restore_product_image_on_mouseleave', 10,1 );
function wcva_restore_product_image_on_mouseleave() {
return "yes";
}
You can use Code Snippets plugin to insert extra php code.
There are two ways you can use wpml with WooSwatches. Here we are assuming that you already have products setup with WPML and it is working with default dropdowns. First check what product translation interface you are using. Visit settings tab under WPML/WooCommerce Multilingual menu.
Method 1 (for WPML Translation Editor) :- Visit attributes tab under WPML/WooCommerce Multilingual menu. add translations to all the attributes and its options.
Once translation done , click on below given button “Synchronize attributes and update product variations”
Override plugin’s variable.php file with your theme’s variable.php file.
To override plugin’s variable.php with your theme’s variable.php.copy/paste variable.php file from plugins woocommerce/single-product/add-to-cart to somewhere in your theme and then you will need some code in your theme’s functions.php file that replaces theme’s variable.php file as default variable template. Here is such sample code. Replace the/path/of/your/plugin/variable.php with the path of your theme’s variable.php.
Â
function wcva_use_theme_variable_template($template, $template_name, $template_path) {
if (strstr($template, 'variable.php')) {
    $template = ''.get_template_directory().'/variable.php';
  }
Â
  return $template;
}
add_action( 'woocommerce_locate_template', 'wcva_use_theme_variable_template', 10, 3 );
Here we are assuming that Variable.php file is located inside root folder of the plugin.
Video tutorials – Woocommerce color or image variation swatches
video tutorial on how to use color/image swatches with custom product attributes which you separate via pipe (|).
Video tutorial on how to setup color/image swatches with pre-created global attributes which you create under product/attributes.Â
Troubleshoot – Plugin options not saving on WooSwatches tab
This usually happens when number of inputs(form fields) on your page is higher then allowed number of input by your server.
Problem get solved in most of such cases by increasing max_input_vars .Â
Newer versions of PHP implement a php.ini directive called max_input_vars usually set to 1000. This means that posting > 1000 form fields for instance would be truncated  preventing data from being saved.
This can be changed in php.ini file Â
max_input_vars = 2000
If you are on shared host you can increase it via .htaccess file
php_value max_input_vars 2000
If you are not familiar with php.ini or .htaccess files ,open a ticket with your host and tell them to increase max_input_vars in php.ini file.Â
First visit products/display tab under woocommerce/settings menu and define custom product swatches height and width there.
Then select custom as display type while configuring into variation select tab.
Troubleshoot – wrong dimension for swatch hover images
Catalog image dimensions is a woocommerce feature. If you are experiencing wrong dimensions for hover images ,  you will need to set the correct dimension for catalog images at products/display under woocommerce/settings menu.
After changing it you may need to regenerate product thumbnails using this plugin.
If you still getting same dimensions on shop page check media settings page configuration. For example – if you are getting 150*150 dimension on hover images and media settings page has 150 * 150 thumbnail size. try changing it and regenerating thumbnails using aforementioned plugin.
How to change swatch size on shop/category pages
To change swatches size on shop/category page , visit swatches tab under woocommerce -> settings and define your preferable width and height.
How to use Global Attribute Color or Image Variation Swatches
First you need to setup global image or color for each attribute values.To do that visit attributes tab under products menu and add your attribute like this.
Once Attribute is added , click on settings icon to define its options.
Now add the options as shown in the image.
Once color or image value for all usable attribute and its options are set , you can use it on product.To use it on products visit attributes tab and select “color” inplace of custom product attributes and then click on add
Set your variable products now and then visit colored variables tab and select image or color in place of dropdown select and update the product . thats it now frontend will replace image or color with default select .
How to use Woocommerce Color or Image Swatches plugin
Open Product edit page of any Product on which you want to use image or color select and choose variable product. Upon selection of variable product you will see an extra tab with name “variation select”.
If you haven’t added attributes and setup variables then visit first attributes tab and set up attribute like this.
And then visit variations tab and setup variation product and then update the product. Make sure you have set the
prices for variations and after updating product , variable product works with default dropdowns.
Now visit variation select tab and click on the attribute to configure its display.
To replace default select you must select color or image for display type. Selecting none will display default dropdown select.
select display size and other display related option next.
Now click on each attribute value to setup color or image for each attribute.
Done. now open product to test everything from front-end
How to enable color/image swatches globally ?
Note :- to use this feature you must have version 1.9.0 or higher of “woocommerce color or image variation swatches” plugin.
To enable this feature visit swatches tab under woocommerce/settings menu and enable checkbox “Enable default attribute options“. Upon checking it you will see another table where you can configure your global attribute options. To set colors or images for specific attribute values click on “set color/images” button.
Please remember that this feature will work only for products which does not have display type set. if you have existing products with “custom color or image swatches ” as display type then global changes will not affect it but you can always change display type to “global values” in variation select tab to make global values work on those products. “global values” option in display type dropdown will be available only to attributes that are created under product/attribtues not for “Custom product attribute”(which you separate via “|”).Â
How to Install Woocommerce Color or Image Variation Swatches
FIrst unzip the file you downloaded from codecanyon. You will see three folders documentation,Licensing and Plugin . Plugin folder contains zipped file of plugin . Move that file to your desired location and remember that location.
Step 1: Go to your wordpress admin dashboard.
Step 2: Click on add new under plugin menu
Step 3: Click on �Upload� as shown in image
Step 4: Click On choose file and choose your plugins zip file from the location where you saved and click on install now.
Step 5: Click on Activate as shown in the image.
Step 6: Now plugin is ready to use.Now open any variable product and visit colored variables tab and design your variation selects there.
How to display one attribute swatches on shop/category pages ?
To display one attribute swatches on shop/category pages you need to check the “Enable one attribute swatches on shop/archive pages ” checkbox in variation select tab and then select the attribute in next option as shown in the below image.
You can also upload the hover image for each option of that selected attribute. Once hover image is set , plugin will replace the hover image with product image on swatch hover on shop/category pages.
If you are using global values as display type make sure you have set hover image for all options for chosen attribute under product/attributes menu.
WooCommerce Variation Swatches Plugin Changelog
== Changelog ==
Version 4.0.0 - 19 June 2024
- Fix - critical fatal error.
Version 3.9.26 - 13 December 2023
Version 3.9.26 - 13 December 2023
- Version 3.9.26 (13 December 2023) - Fix- Issue with plugin update.
- Version 3.9.25 (13 December 2023) - Enhancement - Backend Ui Improvement.
- Version 3.9.24 (10 December 2023) - Enhancement - UI improvements in backend.
- Version 3.9.23 (03 December 2023) - Enhancement - UI improvements in backend.
- Version 3.9.22 - 02 December 2023 - - Enhancement - Added interval check to auto update to improve perfomance.
- Enhancement - Updated Get domain validation url.
- Version 3.9.21 - 01 December 2023 - Fix - Debug errors.
- Version 3.9.20 - 01 December 2023 - Enhancement - Added update check interval.
- Version 3.9.19 (30 December 2023) - Fix - Debug errors.
- Version 3.9.18 (30 November 2023) - Fix - Debug errors.
- Version 3.9.17 (30 November 2023) - Fix - Added readme.txt for changelog with autoupdate.
- Version 3.9.16 (30 November 2023) - Fix - debug errors.
- Version 3.9.15 (30 November 2023) - Fix - domain mismatch issue.
- Version 3.9.14 (25 November 2023) - Fix - bug that breaks outofstock crossing.
- Version 3.9.13 (24 November 2023) - Enhancement - Improvement in backend admin menu styling.
- Version 3.9.11 (22 November 2023) - Fix - Debug errors on license activation tab.
- Version 3.9.10 (19 November 2023) - Fix - Some UI improvements.
- Version 3.9.9 (18 November 2023) - Fix - Github token issues causing automatic update fail.
- Version 3.9.8 (17 November 2023) - Fix - Some Debug errors.
- Version 3.9.7 (15 November 2023) - Fix - Added inbuilt auto update feature.
- Enhancement - Added HPOS Compatibility.
Version 3.8.0 - 15 August 2023
* Fix - debug errors with php 8.3
Version 3.7.3 - 17 March 2023
* Version 3.7.3 - 17 March 2023 - Fix - Compatibility issue with previous release.
* Version 3.7.2 - 17 March 2023 - Fix - Compatibility issues with Flatsome quick view feature
* Fix - Compatibility issues with YITH Quick View Mode Plugin
Version 3.6.6 - 17 February 2023
* Version 3.6.6 - Fix-issue with plugin setting not getting saved.
* Version 3.6.5 - Fixed php 8 related error.
* Version 3.6.4 - Added support for HTML5
Additional information
License Type
Single Domain, Upto 10 Domain, Upto 30 Domain
Subscription Validity
Lifetime, Annual
Shipping & Delivery
MAECENAS IACULIS
Vestibulum curae torquent diam diam commodo parturient penatibus nunc dui adipiscing convallis bulum parturient suspendisse parturient a.Parturient in parturient scelerisque nibh lectus quam a natoque adipiscing a vestibulum hendrerit et pharetra fames nunc natoque dui.
ADIPISCING CONVALLIS BULUM
Vestibulum penatibus nunc dui adipiscing convallis bulum parturient suspendisse.
Abitur parturient praesent lectus quam a natoque adipiscing a vestibulum hendre.
Scelerisque adipiscing bibendum sem vestibulum et in a a a purus lectus faucibus lobortis tincidunt purus lectus nisl class eros.Condimentum a et ullamcorper dictumst mus et tristique elementum nam inceptos hac parturient scelerisque vestibulum amet elit ut volutpat.