CleverSwatches – WooCommerce Color or Image Variation Swatches (Products)

CleverSwatches – WooCommerce Color or Image Variation Swatches. 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. CleverSwatches allows you to add multiple gallery images for each variation and when visitor selects the variation those gallery images will be shown as gallery images instead of main product gallery images.

Showcases

• Novetty – Responsive Powerful WooCommerce Theme
• Moza – Minimal WooCommerce WordPress Theme

Key Features

• Support multiple gallery images for each variation
• Support color/image/text variation swatches for attributes
• Support color/image/text/dropdown select swatches for each variation custom attributes
• Square as well as circus swatch support
• Different sizes of swatch from small to large
• Enable / Disable tooltips for swatch item feature
• Swatches can be set per attribute globally, or overridden on an individual product level
• Shows color or image swatches on shop/category/tag archive pages
• Shows color or image swatches on[product_page ] shortcode.
• Enable / Disable pre-select for variable product

General Configuration

• Enable Swatches: Using this admin can enable/disable the image and color swatches for variable product instead of default select options.

• Enable Variation Wise Gallery: Using this admin can enable/disable the variation wise gallery feature shows on variable detail page when select an variation combination.

• Use Attributes Terms Thumbnails: Using this admin can allow usage of default attribute color and image swatches on product detail page.

• Use Attribute Term Label: Using this admin can hide the attibute name label on top of color and image swatches on product detail page.

• Attribute Term Thumbnail Display Type:Using this admin can select the color and image swatch display size and display type on product detail page when swatches setting is enabled.

• Enable Variation Update On Cart Page:Using this admin can allow there buyers to change the selected variation on cart page.

Set up default swatch type for global attributes

1. Go to: Products > Attributes.

2. Create a new attribute, at option CleverSwatches Type and select default type you want use.

   

   Edit a attribute: If your site already had attribute, you can edit it and set default swatch type for them.

   Select attribute you want edit and click to Edit

   

3. At new page appear, find option CleverSwatches Type and select default type you want use.

   

Set up colors and photos for global attributes

1. Go to: Products > Attributes

   

2. Create a new attribute, or skip this step if you already have one

3. Click Configure terms

   

4. Add New Color or whatever your attribute is called (or choose to edit an existing term)

5. Select either Color or Image in the Swatch Type dropdown

   If you’ve chosen color, you’ll be able to click on the color icon and select the color you want to use in the color picker. Alternatively, you can type in the HEX value for the color.

   

   If you’ve chosen image, you’ll be able to upload an image.

   

6. Select Add New Color

Add color and image swatches to variable products

Color and photo swatches can only be used for variable products.

1. Create a variable product. Make sure that you select a global attribute or create a custom one in the “Attributes” tab. Also set up the “Variations” tab.

2. Publish your product.

3. Go to the CleverSwatches tab.

4. Select a Display Type for each of the attributes used for the variations, leave it if you want it use default option of attribute.

   • Default (Select): The options will be offered in a dropdown
   • Image: You will be able to add image swatches
   • Color. You will be able to add colors swatches
   • Text. The available options will be displayed as Text buttons

   

5. Display Size: Select the size of the swatches. This will determine how large the swatches will be on the single product page.

6. Display Shape: Shape type display of attribute.

7. Configure the attribute terms. This is similar to how global attribute terms are configured (see above).

   • Select the term.
   • If you’ve chosen color, select a color.
   • If you’ve chosen image, upload an image.

   

Shop/Category Page swatches

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.

Note: To make this feature work you must select Color or Image Swatches as display type.

Integrate CleverSwatches with your custom theme

Important! We support all major themes but if your installed theme is not following the WooCommerce thumbnail dom structure, the feature might not work according to your theme behaviour of showing gallery images. In this case, we do provide API to integrate. CLICK HERE

Extended License

If you are looking for including this plugin in your theme package, then you should purchase the Extended License. Just purchase a extended license for each single theme. No need to contact us.

Change Logs

------------ Version 1.0.0 - Sep 05, 2017  ------------

• Initial Release!

Download CleverSwatches – WooCommerce Color or Image Variation Swatches (Products)