The variation swatches module comes with extensive features. Rather than the default dropdown fields, this module allows you to display WooCommerce variations in labels, colors, and images. These options ensure that customers choose the products they want comfortably and make purchases quickly.
1. General #
To configure Variation Swatches for WooCommerce, navigate to the WordPress admin menu ShopBuilder =>Settings =>Variation Swatch => General
1.1) Enable Variation Swatches Module?: Toggle this button to activate the module.
1.2) Enable Tooltip: Enable / Disable plugin default tooltip on each product attribute.
1.3) Default Shape Style: Determine the attribute shape style.
Note: This option will not be applied to radio and button attributes.
1.4) Checkmark Selected Term: Enable this button to add checkmark icon on shape style.
Note: This option will not be applied to radio attributes.
1.5) Default Dropdown Convert: You can convert a dropdown into a default or an image.
1.6) Show Term Name: Enable this option to show the selected term name beside the attribute label.
1.7) Disabled Attribute behavior: Disabled attribute will be hide/blur.
Note: This feature will be operational for variation quantities below the “Ajax variation threshold”.
1.8) Product Page Attribute display limit: Set product page attribute display limit. Default is 0. Means no limit.
1.9) Attribute image size: Choose attribute image size.
1.10) Tooltip image size: Determine Tooltip image size
1.11) Disable Out of Stock: Switch on this option to disable out-of-stock variation attribute items.
1.12) Variation URL: Activate this button to generate a URL based on the selected variation attributes.
2. Showcase/ Shop #
2.1) Enable Swatches: Toggle this button to activate swatches on the archive/shop page.
2.2) Product Wrapper Selector: Insert archive product Wrapper Selector (.rtwpvs-product,.tmb-woocommerce)
2.3) Image Selector: Enter the archive product image selector to show the variation image. You can also use multiple selectors separated by a comma (.attachment-woocommerce_thumbnail, .wp-post-image)
2.4) Swatches Position: Determine the swatches’ position. Note: Some themes remove or override default WooCommerce hooks. If the swatches do not appear as expected, you may need to set a custom position manually.
2.5) Swatches Align: Customize the alignment (Left, Right, or Center) of the swatch.
2.6) Show clear link: Activate this button to show a clear link on the archive, shop page, or any other showcase.
2.7) Show Single Attribute: Toggle this button to single attribute taxonomies on the archive page.
2.8) Choose Attribute: Choose an attribute to show in catalog mode.
2.9) Catalog Mode Display Event: Show catalog mode image display event either “On Click” or “On Hover”.
2.10) Attribute display limit: Set the catalog mode attribute display limit. Default is 0. Means no limit.
3. Showcase/ Shop #
3.1) Checkmark: Customize the checkmark background color, icon color, width, and height.
3.2) Attribute Style: Change attribute border color and hover/active color.
3.3) Details Page Attributes: Fix the details page attributes color, font, width, height, and variation item font size.
3.4) Shop Page / Product Showcase Attributes Size: Set the shop page/product showcase variation item width, height, and font size.
3.5) Tooltip Style: Determine the tooltip image’s padding, background color, and text color.
Now, click on the “Save Changes” button to save the updates.
Add New Attributes #
Navigate to the WordPress admin menu, Products =>Attributes.
– Firstly, insert the name of the attributes. After that, click on the “Add Attribute” button.
– Secondly, click on the “Configure Terms”.
– Now, add the terms of those particular attributes one by one. For example, we’ve added color as an attribute. So, we’ve inserted different color names.
Variation Swatches Settings on Edit Product Page #
Now, navigate to the WordPress admin menu, Products => All Products. Select your preferred products to add to the variation swatches.
In the Product data section, choose the “Variable Product” option from the dropdown.
After that, move to the ‘Attribute’ section. To include the existing attributes, click on the “Add Existing” section. From the drop-down, you can pick your chosen attributes.
You’ll also get the freedom to add new attributes.
1) Firstly, click on the “Add New” button.
2) Set the attribute name.
3) In the value section, enter options for customers to choose from, for example, ‘Blue’ or ‘Large’. Enter | to separate different options.
Lastly, click on the “Save Attributes” button to save the updates.
Set Variation Swatch #
Now, move to the ‘Variation Swatches’ section.
Set individual variation swatches for each product to override global variations.
1. You can set which attribute you want to show for catalog mode.
2. Attribute Type: You can select attribute type from color, image, radio, and custom.
3. Type (image): You can override global settings to set your own attribute, like for image, set image.
4. Tooltip: You can set a tooltip like an image or text.
5. Type (Color): You can override global settings to set your own attribute, like for color, set color.
6. Tooltip: You can set a tooltip in a text format.
7. Type Button & Radio: You can select button and radio type.
After setting the individual property, you need to click the “Save Product Swatches” button.
Set Product Variation #
Now set Product variation, make sure each variation set image, price & stock; otherwise, it will not display in the front end.
1. Variations: Move to the ‘Variations’ section.
2. You can ‘Remove’ or ‘Edit’ your preferred variations.
3. Make sure to set the proper variation image.
4. Check the “Manage Stock” box.
5. Manage the stock quantity and configure the allow backorder option.
6. Make sure to set the price; otherwise, this variation will not show in the front end.
Other fields like SKU, Weight, shipping cost & descriptions, you can set as your need.
Front End View of Variation Swatch #
Product Detail Page #
In the front end, users can select different combinations and apply the variation swatch feature.
Shop/ Archive Page #
In the front end of the Shop/ Archive Page, users can see the variation swatch feature.
