Simplify product selection and elevate your online store’s visual appeal with the Variation Swatches module, part of the Blocksy Pro’s Shop Extra extension.
Embrace Visual Clarity
- Enhance User Experience: Replace traditional dropdown menus with captivating visual swatches, like colors, buttons, or even images, for each product variation. This intuitive representation empowers customers to effortlessly navigate available choices, streamlining the selection process.
- Boost Engagement: Visually appealing swatches add a touch of dynamism to your product pages, enticing customers to explore different variations and discover the perfect option for their needs.
Effortless Setup
- Seamless Integration: Leverages existing product attributes within WooCommerce, ensuring smooth implementation and compatibility.
- Intuitive Configuration: Once the “Shop Extra” extension is activated, configuring the “Variation Swatches” module is a breeze, allowing you to tailor its appearance and functionality to perfectly match your website’s aesthetic and branding.
Additional Configuration
Personalize the visual appearance of your product variations by configuring the “Swatch Type” field within individual WooCommerce product attributes. Access this field while editing a product attribute, and unlock a range of options to suit your needs:
- Button Swatches: Showcase variations as sleek and user-friendly buttons, enhancing the interactivity of your product pages.
- Color Swatches: Assign distinct colors to each variation, providing customers with a clear visual cue for selection. This is particularly beneficial for products with color variations.
- Image Swatches: Leverage small images to represent each variation, adding a unique visual element and enhancing the overall aesthetic of your product pages.
- Mixed Swatches: Create a mix of unique colours and representative images for each variation.
- Select Dropdown: Utilise the standard dropdown menu for a familiar user experience.
Colour Variation Swatches
If you’ve opted for the “Colour” swatch type, individual attribute terms can be customized with specific colors. Simply navigate to the “Configure terms” section and utilize the intuitive color picker to assign a visual representation to each term. This empowers you to create a visually consistent and informative swatch display for a seamless user experience.
Additionally, an option for a dual colour swatch is available, which comes in handy whenever there are products that are multi-coloured.
Image Variation Swatches
When utilizing the “Image” swatch type, individual attribute terms can be enhanced with corresponding images. Access the “Configure terms” section and conveniently upload the desired image for each term. This process empowers you to create visually compelling and informative swatches that effectively represent your product variations.
Mixed Variation Swatches
While colour swatches are a staple for showcasing product variations, there are situations where they might not be enough. Enter mixed variation swatches: a powerful tool that allows you to combine the clarity of colour swatches with the richness of product images. This flexibility is particularly valuable for products with complex configurations or those that benefit from visual representation alongside colour options.
Tooltip Options
On the front-end of your website, variation swatches often display a small tooltip when hovered over. This tooltip plays a vital role in clarifying what each variation represents, especially if you’ve chosen to personalise the way you showcase them.
The tooltip offers you several customisation options:
- Complete Removal: If you feel the variations are self-explanatory or space is limited, you can choose to disable tooltips entirely.
- Term-Based Tooltips: Utilise the pre-defined
{term_name}code to display the actual name of the variation within the tooltip. This provides a clear and concise explanation. - Custom Text Tooltips: For a more tailored approach, you can craft custom tooltip text for each variation. This allows you to provide additional details or specific descriptions.
- Image Tooltips: Take visual representation a step further by using image tooltips. This can be particularly useful for variations that are best explained through an image, such as a unique pattern or material texture.
Swatches Look and Feel Options
The “Variation Swatches” module empowers you to meticulously refine the appearance of your swatches, ensuring they seamlessly integrate into your website’s aesthetic and enhance the user experience. This granular control extends to both product archives and individual product pages, allowing for consistent or customized presentations across your store.
A Range of Customization Options
- Color, Image, and Button Swatches: Personalise the visual representation of each swatch type, including color selection, image assignment, and button design.
- Shape and Size Control: Define the ideal shape (round or square) and size (in pixels) for your swatches, ensuring optimal visual impact and user interaction within your product listings.
To access these comprehensive customisation options, navigate to the Customiser -> WooCommerce General -> Variation Swatches.
Bonus: Get unique shareable URLs with variations pre-selected
At the bottom of the variation swatches customiser panel, there’s an option that automatically creates a unique, shareable URL of the single product page, with variations pre-selected. You just need to turn it on and the software takes care of the rest.
Once a variation has been selected on the front end, the URL automatically changes to match that selected variations, making sharing links on social media sites or messaging apps very easily.
An example URL might look like this – http://blocksy.local/product/quis-eleifend/?attribute_pa_skin-condition=damaged
Bonus: Independently Configured Swatches per Product
For added flexibility, Blocksy allows you to override the pre-set variation swatches defined in your attributes section. This helps you to create a more customised experience for individual products, catering to scenarios where a unique approach might be necessary.
Imagine you have a pre-defined set of color swatches for all your clothing products. However, for a limited edition collection, you might want to utilise image swatches to showcase exclusive patterns or textures. Overriding swatch types allows you to achieve this level of customization.
Accessing this feature is simple. Navigate to the product edit screen and locate the “Product Data” section. You’ll find a new tab labeled “Swatches” on the left-hand side. This tab grants you control over reconfiguring the swatch types assigned to the attributed terms for that specific product. The functionality empowers you to tailor the visual representation of your variations to perfectly match the unique characteristics of each product in your store.
Final Results
Experience the transformative impact of “Variation Swatches” firsthand! Explore this sample showcasing various product variations equipped with different swatch types. Notice how each product leverages a unique approach.