Review: WooCommerce Color or Image Variation Swatches
Introduction
WooSwatches is a powerful plugin that helps you convert your existing WooCommerce variable product dropdown select into nicely looking color and image swatches. With this plugin, you can set color and image values globally and automatically sync them with your variable products. Additionally, you can override color images on a per-product basis, giving you the flexibility to customize your product displays.
Features
The plugin comes with a range of impressive features, including:
- Color and image label variation swatches and dropdown select
- Global color and image values for attributes
- Inbuilt color and image product filter
- Works on mobile devices
- Different sizes of swatches from small to large
- Square and 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 and image swatches compatible with shortcodes
- Show more link if swatches number are greater than defined
- Slider for shop swatches if swatches number is higher than set value
- Fully compatible with Elementor Pro/Jetwoobuilder Crocoblock
- Compatible with Flatsome Quickview Modal Popup
User Experience
The plugin is easy to use, with an intuitive admin UI that allows you to set color and image options in no time. You can also set image or color settings for each attribute value on the attribute edit page. Once set, these values will be used automatically for front-end swatches wherever preset attributes are used for variables.
Cross-Out-of-Stock Options
The plugin also offers cross-out-of-stock options on shop pages, which works with any number of attributes. You can also enable crossing out of out-of-stock options on single product pages.
Flatsome Quickview
The plugin is fully compatible with Flatsome inbuilt quick view feature, and all the features of single product swatches will work fine in quick view modal popup.
Changelog
For detailed changelog, visit the plugin’s official page.
Conclusion
Overall, WooCommerce Color or Image Variation Swatches is a powerful and feature-rich plugin that can help you elevate your WooCommerce store’s product displays. With its ease of use, flexibility, and compatibility with various themes and plugins, it’s a great investment for any WooCommerce store owner.
Rating: 4.04/5
Recommendation:
If you’re looking to improve your WooCommerce store’s product displays and offer a more engaging shopping experience for your customers, WooCommerce Color or Image Variation Swatches is definitely worth considering. With its impressive range of features and ease of use, it’s a great addition to any WooCommerce store.
User Reviews
Be the first to review “WooCommerce Color or Image Variation Swatches”
Introduction to WooCommerce Color or Image Variation Swatches
WooCommerce is a popular e-commerce plugin for WordPress that allows you to create an online store and sell products. One of the key features of WooCommerce is its ability to offer variations of products, such as different colors, sizes, or materials. However, the default WooCommerce variation swatches can be quite basic and may not provide the best user experience.
That's where the WooCommerce Color or Image Variation Swatches plugin comes in. This plugin allows you to replace the default variation swatches with color or image swatches, making it easier for customers to visualize and choose the right product variation. In this tutorial, we'll show you how to use the WooCommerce Color or Image Variation Swatches plugin to enhance your online store.
Step 1: Installing the Plugin
To start using the WooCommerce Color or Image Variation Swatches plugin, you'll need to install it on your WordPress website. Here's how:
- Log in to your WordPress dashboard and navigate to the Plugins page.
- Click on the "Add New" button and search for "WooCommerce Color or Image Variation Swatches".
- Click on the "Install Now" button to install the plugin.
- Once the plugin is installed, click on the "Activate" button to activate it.
Step 2: Configuring the Plugin
After installing and activating the plugin, you'll need to configure it to work with your WooCommerce store. Here's how:
- Navigate to the WooCommerce > Settings page and click on the "Products" tab.
- Scroll down to the "Variations" section and click on the "Color or Image Swatches" tab.
- Select the type of swatch you want to use (color or image) and choose the swatch style (e.g. square, circle, etc.).
- Set the swatch size and spacing as desired.
- Click on the "Save Changes" button to save your settings.
Step 3: Creating Swatches
Now that the plugin is configured, you'll need to create swatches for your product variations. Here's how:
- Navigate to the Products page and click on the product for which you want to create swatches.
- Click on the "Variations" tab and then click on the "Add Variation" button.
- Enter the variation details, including the name, price, and stock status.
- Click on the "Add Swatch" button to create a new swatch.
- Choose the swatch type (color or image) and upload the swatch image or enter the color code.
- Set the swatch label and description as desired.
- Click on the "Save Changes" button to save the swatch.
Step 4: Displaying Swatches
Now that you've created swatches, you'll need to display them on your product page. Here's how:
- Navigate to the Products page and click on the product for which you want to display swatches.
- Click on the "Edit" button to edit the product page.
- Scroll down to the "Product Description" section and click on the "Add Swatch" button.
- Choose the swatch type (color or image) and select the swatch you created earlier.
- Set the swatch position and size as desired.
- Click on the "Save Changes" button to save the swatch.
Step 5: Testing the Swatches
Finally, you'll need to test the swatches to make sure they're working correctly. Here's how:
- Navigate to the product page and click on the swatch to view the variation details.
- Verify that the swatch is displaying correctly and that the variation details are accurate.
- Test the swatch by clicking on it and verifying that the product variation is updated correctly.
That's it! With these steps, you should now have WooCommerce Color or Image Variation Swatches up and running on your online store.
General Settings
You can configure the WooCommerce Color or Image Variation Swatches in the WordPress administration dashboard, under the Plugins tab.
- Product Type: Select the type of products you want to display the swatches for (simple, variable, or variable with variations).
Design Settings
Here you can customize the visual appearance of the swatches.
- Swatch Width: Set the width of each swatch (in pixels).
- Swatch Height: Set the height of each swatch (in pixels).
- Swatch Space: Set the space between each swatch (in pixels).
Image Variation Swatches Settings
For image-based swatches.
- Image Size: Set the size of the image files used for swatches (in pixels).
- Image Format: Set the format of the image files used for swatches (e.g. PNG, JPEG).
- Load Images: Check this box to load images for the swatches instead of just displaying the images directly on the product page.
Color Variation Swatches Settings
For color-based swatches.
- Default Swatch Size: Set the default size of each color swatch (in pixels).
- Hover Swatch Size: Set the size of each color swatch when hovering (in pixels).
Typography Settings
For text-based swatches.
- Font Family: Select the font family to use for the swatches.
- Font Size: Set the font size to use for the swatches.
- Text Color: Set the color of the text used for the swatches.
Animation Settings
For swatches animations.
- Animate On: Select what action to animate the swatches (e.g., hover, click).
- Duration: Set the duration of the animation (in milliseconds).
- Delay: Set the delay before starting the animation (in milliseconds).
Output Settings
For the position and appearance of the swatches on the product page.
- Position: Select the position of the swatches on the product page (e.g., above attributes, below product description).
- Wrapper: Add a wrapper to the swatches (e.g., div, li).
Here are the features of the WooCommerce Color or Image Variation Swatches plugin:
- Convert normal variable attribute dropdown select to nicely looking color or image select: Convert your existing WooCommerce variable product dropdown select into color or image swatches.
- Global color or image values for attributes: Set color or image values globally for attributes.
- Inbuilt color/image product filter: Filter products by color or image.
- Works on mobile devices: The plugin is compatible with mobile devices.
- Different sizes of swatch from small to large: Choose from different sizes of swatches.
- Square as well as round swatch support: Support for both square and round swatches.
- Option to display option name below swatch: Display the option name below the swatch.
- Show selected option name on single product page: Show the selected option name on the single product page.
- Shows color or image swatches on shop/category/tag archive pages: Display swatches on shop, category, and tag archive pages.
- Inbuilt direct variation link feature: Directly link to the variation product page.
- Change product image on swatch hover on category/archive pages: Change the product image on hover on category/archive pages.
- Color/image swatches compatible with shortcode: Compatible with shortcodes.
- Show more link if swatches number are greater than defined: Show a "Show more" link if the number of swatches is greater than defined.
- Slider for shop swatches if swatches number is higher than set value: Display a slider for shop swatches if the number of swatches is higher than set.
- Fully Compatible with Elementor Pro/Jetwoobuilder Crocoblock: Compatible with Elementor Pro, Jetwoobuilder, and Crocoblock.
- Compatible with Flatsome Quickview Modal Popup: Compatible with Flatsome's inbuilt quick view feature.
- Use variation images as swatch images: Use variation images as swatch images and save time assigning swatch images.
- Show swatches in slider: Enable swatch slider for shop swatches if the number of swatches is greater than specified.
- Optionally display hover image on swatch hover on single product page instead of text tooltip: Display hover image on swatch hover on single product page instead of text tooltip.
- Optionally display attribute description instead of attribute name for selected text: Display attribute description instead of attribute name for selected text.
- You can opt to display swatches of any one product attribute below product title: Display swatches of any one product attribute below product title on shop/category/tag archive pages.
- Plugin comes with easy to use admin UI: The plugin comes with an easy-to-use admin UI.
- Swatch price text: 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: Set image or color settings for each attribute value on attribute edit page.
- Variation Swatches for WooCommerce Cross out of stock Options: Enable crossing out of out-of-stock options on shop pages.
- Variation Swatches for WooCommerce Flatsome Quickview: Compatible with Flatsome's inbuilt quick view feature.
These are the features of the WooCommerce Color or Image Variation Swatches plugin.
Related Products
$49.00
There are no reviews yet.