WooCommerce Variation Swatches Images

LIVE PREVIEW

Transform Your WooCommerce with Stunning Variation Swatches Images

Why stick with boring dropdown menus? Turn your dull variable attributes into vibrant color or image selectors that not only look captivating but also enhance the shopping experience. You can flaunt images or colors in any size you desire!

Main Features You’ll Love

• All-in-one support for color, image, and text variation swatches, radio buttons, and classic dropdowns.
• Elevate your WooCommerce game with improved variable product attributes and chic swatch designs.
• Global control over color or image values for your product attributes.
• 100% mobile-friendly – your customers can browse on the go!
• Flexible swatch sizes – from petite to grand, we’ve got you covered.
• Option to show the name under each swatch for clarity.

Check Out Our Live Previews

Don’t just take our word for it; see the magic for yourself before making your purchase!

Frontend Preview – Witness product variations in action with images galore.
Backend Preview – A glimpse into the plugin backend.

For any lingering questions, don’t hesitate to reach out!

Using This Plugin is a Breeze!

Ready to jazz up your product variations? All you need to do is attach those vibrant photos and colors to the right product attributes. Remember, WooCommerce offers two types of attributes:

• Custom attributes for that one-of-a-kind product
• Global attributes that apply to all your store offerings

You can easily set up photos and colors for both types!

How to Attach Photos and Colors for Global Attributes

1. Head to: Products > Attributes.

2. Add a new attribute, or jump right in if you already have one.

3. Hit the “Configure terms” button.

4. Create a New Term (e.g., Add New Color) or modify an existing term.

5. Select the Swatch Type from the dropdown (choose between “Color” or “Image”).

For colors, feel free to use a color picker or enter a HEX value manually.

To use an image, simply upload it without a hitch.

6. Don’t forget to click on Add New Term (Color).

Adding Custom Image and Color Swatches to Specific Products

Photo and color swatches are exclusively for variable products.

1. Create a new variable product. Select your global attribute or conjure up a new custom one in the “Attributes” tab. Ensure you configure the “Variations” tab as well.

2. Get it Published to make it visible.

3. Navigate over to the Swatches tab.

4. Select a “Type” for each variation attribute.

• None – Simple dropdown selection for options.
• Taxonomy Colors and Images – Pull options from the global attribute (for global attributes only).
• Custom Colors and Images – Perfect for unique options.
• Radio Buttons – Make it easy for customers to choose.

5. Need labels for your swatches? (for “Taxonomy Colors and Images” or “Custom Colors and Images” only). Labels will display the name of the selected term.

6. Choose the size of the swatches on your product page (for “Custom Colors and Images” only).

7. Set up attribute terms. If you’ve read about configuring global attribute terms above, this process will feel familiar.

• Select the term.
• Pick Attribute Color or Image.
• If it’s a color, simply choose one.
• If it’s an image, upload it in a snap.

8. Finally, press “Update” on the product edit page!

Changelog

ver. 1.0.10

*Added: WCVS_NO_TOOLTIP constant; when defined, swatches tooltip won’t display on mouse hovering.

ver. 1.0.9

*Introduced a tooltip to swatch images.
*Fixed: eliminated duplicate attribute values on render.
*Resolved minor bugs.

How to Install the WooCommerce Variation Swatches Images Plugin?

Method 1:

Method 2: