Documentation

Configure Global Attribute Swatches

If your attribute will use the same swatch style over all, or the majority of, your products, then you will want to set the swatch style globally. Luckily, it is very easy to do!

  1. Navigate to Products > Attributes. If you already have an attribute to use, click Edit on the relevant attribute and skip to step 4.
  2. Enter your attribute name into the Name field.
  3. Choose Select as your Type. This will tell WooCommerce that this attribute is for variable product options.
  4. Now you can select your Swatch Type. If you select what I call a “visual swatch”, i.e. an image or a colour swatch, then you will see two additional fields:
    • Swatch Shape
      Choose whether you want these swatches to be displayed round or square.
    • Enable Tooltips?
      Select yes if you’d like the attribute label to be displayed on hover.
  5. Some other additional options are now available:
    • Show Swatch in Catalog?
      Select yes if you’d like available swatches to be displayed in the catalog listing for each product. They will also click through to the product page to be auto-selected. There is a filter you can use to adjust the position of the swatches: iconic_was_loop_position. By default it is set to woocommerce_before_shop_loop_item_title.
  6. Click Add Attribute or Update.

If you chose a visual swatch type for your attribute (colour or image), then you can now choose the colour or image for your attribute terms.

  1. From the attribute list, click on the attribute name, or the Configure Terms icon. If you already have attribute terms, skip to step 3.
  2. Enter your attribute term name into the Name field.
  3. Now you can either select your Colour Swatch using the colour picker, or add/upload an Image Swatchusing the “+” icon.
  4. Click Add New [attribute] or Update.

Are you using WooCommerce Attribute Swatches yet?

Start your 14-day free trial right now and get instant access to the features described in this article.

or learn more

Was this helpful?

Please let us know if this article was useful. It is the best way to ensure our documentation is as helpful as possible.

WooCommerce Attribute Swatches

WooCommerce Attribute Swatches

Not got the plugin yet? Get instant access right now, free for 14 days.

or learn more

Still need help?

If you haven't found what you're looking for in our documentation, please contact support.

Get Support