woocommerce variation swatches

Variation Swatches for WooCommerce

Variation Swatches for WooCommerce lets you add swatches for variable product attributes in your WooCommerce store, with different styling options.

Variation Swatches for WooCommerce offers your shoppers with an out-and-out overview of all options and variations available for products with variable attributes (for eg: color, size, texture, etc.). The plugin comes with options to display swatches of different types, with custom styling, tooltips and tooltip descriptions. It also lets you set swatches to behave according to unavailability and limited stocks.

Swatch Up Your Products In Style

4 Swatch Types

Choose from our swatch types Color, Image, Label/Button & Radio to showcase your product variations

Informative Tooltips

Stuff in more information inside Tooltip using Description, Images, Term Name options

Style Customization

Customize your swatches style to unmask the possibility of customer attention

Stock left Label

Prompt customer to grab your products with Min. Stock left label

Out-of-Stock Label

Avoid hiding a variation, display out of stock label to let user know the product variations.

Swatches on Shop Page

Quicker choice made by customer, by displaying variation swatches on Shop page.

Know More About WooCommerce Product Variation Swatches

Clear-Cut Display of Product Variables

WooCommerce Product Variation Swatches lets you display your variable attributes in four different styles as swatches. With the plugin integrated into the product attributes settings, easily display all added attributes as swatches, with a swatch style suiting each product characteristic. Product Attribute Variation Swatches are available in the following display styles: (i) Color, (ii) Image, (iii) Label, and (iv) Radio.

Extra Detail with Tooltips/Hover Image/Hover Descriptions

With the WooCommerce Product Variation Swatches, display the hover pop-ups with images, term name or descriptions, and get to show some extra detail to your product variations.
Suppose you need to display a informative text on a specific attribute value, you can display it as a tooltip description instead of the hover image or the hover tooltip.

Show Variations Instantly with Swatches on Shop Page

Some shoppers may be lazy enough to visit the product page before they know of any available variations. In such cases, it is wise to display these variations on the shop page, so that the shoppers can be early aware of the available choices. With the WooCommerce Product Variation Swatches, get to display the swatches on the shop page, and provide early detail to the shoppers.

Set Swatches Behavior Based on Availability of Products

If you have a product variation which is moving to limited stock or becomes unavailable for sale, you can easily convey them to the swatches created using the WooCommerce Product Variation Swatches plugin. With multiple options to set the behavior of swatches according to the availability of the products, you can display limited stock/out of stock indications to the shoppers for the ease of shopping.

Configure Swatch Display Style With Ease

WooCommerce Swatches allows the store owner to define swatches style specific to each product attribute. The style may need to be different according to the nature of the attribute and their specific characteristics.

Contact Lucas Stark for Variation Swatches and Photos support

Lucas Stark is ready to help you get the answers you need.

Thanks for contacting Lucas Stark

Lucas Stark will reply to your questions about Get extension name shortly.

While you wait, check out these handy resources:

Feedback for Lucas Stark

We appreciate your feedback about your support experience with Lucas Stark, developers of Variation Swatches and Photos. This helps us maintain high standards on the WooMarketplace, and helps Lucas Stark improve.

Glad to hear it went well with Lucas Stark. Tell us more.

Sorry to hear that. Can you tell us more?

Did Lucas Stark get back to you?

How long did it take for you to hear back from Lucas Stark

A few hours A day A few days

Was your issue resolved?

Sorry to hear that. Would you like our team to take a look at your issue?

Do you have any additional feeback for us or Lucas Stark?

Has anything changed since you first reached out? Is there anything new that you’d like us to know?

Great! Any additional feedback?

Mobile Apps launch

NEW: Put your store in your pocket – manage orders, track sales, and get real-time order alerts with the new WooCommerce mobile app (iOS & Android).

Our websites and dashboards use cookies.
By continuing, you agree to their use. Learn more, including how to control cookies.


The most customizable eCommerce platform for building your online business. Get started today for free.

Variation Swatches and Photos

  • Extension Type: Product Page Features, WooCommerce Extensions, Enhancements
  • Last Updated: 2019-01-02
  • Developer: Lucas Stark
  • Version history: View changelog

Variation Swatches and Photos

Replace dropdown fields on your variable products with WooCommerce Color and Image Swatches

Using color and image swatches provides a much nicer way to display variations of a product, available styles, available sizes, or pretty much anything else you can display using an image or color.

Shoppers appreciate visual representations of product attributes when using your store, and it can help present a polished and clean look. WooCommerce Color and Image swatches is the answer if you are looking to edge out the competition.

The admin interface allows you define colors and images at attribute level or product level:

Custom swatches for a product

To see live examples and plugin in action, go to demos.


Variation Swatches for WooCommerce plugin provides a much nicer way to display variations of variable products. This plugin will help you select style for each attribute as color, image or label. With this plugin, you can present product colors, sizes, styles and many things in a better way which is not supported by WooCommerce.
This plugin only adds more options to show product variations with swatches. It doesn’t touch the default drop-down style of WooCommerce.

With a friendly and easy-to-use interface, you can add default color, image or label to each attribute in the attributes management page. It can also helps you pick the right style for quick-add attribute right inside the editing product page.

Features provided with this plugin:

  • Completely integrate with WooCommerce plugin
  • Work on variable product only
  • Create attribute color swatches
  • Create attribute image swatches
  • Create attribute label/text swatches
  • Manage attribute globally
  • Create new attribute swatch in product editing page
  • New options in WooCommerce Settings that help control swatches easier without touching code


  • Variations on frontend
  • Add new attribute
  • Edit Attribute
  • Attribute color
  • Attribute label
  • Attribute image
  • Add new attribute color when edit a product


Automatic installation

Automatic installation is the easiest option as WordPress handles the file transfers itself and you don’t need to leave your web browser.

  1. Log in to your WordPress dashboard, navigate to the Plugins menu and click Add New.
  2. In the search field type “Variation Swatches for WooCommerce” and click Search Plugins.
  3. Once you’ve found it, you can install it by simply clicking Install Now button.

Manual Installation

  1. Download the Variation Swatches for WooCommerce plugin to your desktop.
  2. Extract the plugin folder to your desktop.
  3. Read through the “readme” file thoroughly to ensure you follow the installation instructions.
  4. With your FTP program, upload the Plugin folder to the wp-content/plugins folder in your WordPress directory online.
  5. Go to Plugins screen and find the “Variation Swatches for WooCommerce” in the list.
  6. Click Activate to activate it.

Config attributes

Even this plugin has been installed and activated on your site, variable products will still show dropdowns if you’ve not configured product attributes.

  1. Log in to your WordPress dashboard, navigate to the Products menu and click Attributes.
  2. Click to attribute name to edit an exists attribute or in the Add New Attribute form you will see the default Type selector.
  3. Click to that Type selector to change attribute’s type. Besides default options Select and Text, there are more 3 options Color, Image, Label to choose.
  4. Select the suitable type for your attribute and click Save Change/Add attribute
  5. Go back to manage attributes screen. Click the cog icon on the right side of attribute to start editing terms.
  6. Start adding new terms or editing exists terms. There is will be a new option at the end of form that let you choose the color, upload image or type the label for those terms.

Yes, it will work with any theme, but may require some styling to make it match nicely.

Leave a Reply

Your email address will not be published. Required fields are marked *