Featured Products
- Home
- WordPress Plugins
- CleverSwatches - WooCommerce Color or Image Variation Swatches
CleverSwatches - WooCommerce Color or Image Variation Swatches
By : CleverSoft Published on Friday, September 08, 2017,16:26:27 in WordPress Plugins
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
Key Features
General Configuration
Set up default swatch type for global attributes
- Go to: Products > Attributes.
- 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
- At new page appear, find option CleverSwatches Type and select default type you want use.
Set up colors and photos for global attributes
- Go to: Products > Attributes
- Create a new attribute, or skip this step if you already have one
- Click Configure terms
- Add New Color or whatever your attribute is called (or choose to edit an existing term)
- 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.
- Select Add New Color
Add color and image swatches to variable products
Color and photo swatches can only be used for variable products.- 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.
- Publish your product.
- Go to the CleverSwatches tab.
- 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
- Display Size: Select the size of the swatches. This will determine how large the swatches will be on the single product page.
- Display Shape: Shape type display of attribute.
- 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 HEREExtended 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.1 - Sep 11, 2017 ------------ - Fix issue with any value in variation - Add custom Jquery Selector class option for single page - Minor improvements ------------ Version 1.0.0 - Sep 05, 2017 ------------ ⢠Initial Release!