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.

Still need help? Contact Us Contact Us