WooCommerce Attribute Swatch

WooCommerce Attribute Swatch

WooCommerce Attribute Swatch

WooCommerce Attribute Swatch

Add Attribute Option in WooCommerce

Go to “Products > Attributes” from the admin menu.

Enter your attribute information in the “Add New Attribute” section. For example, Name: Color

After click on “Add attribute” button, you will see the added attribute list in the right side, like the below image. Here two attributes have been added: color and Size.

Now you need to add terms for the attributes. For this instance, we are going to show you the color attribute’s terms.

To add the terms, click on the name of the attribute, here “color’. Or, click on “Configure terms” in the “Terms” column.

Now add the terms for the attributes. you can add as many terms as you need. For example, White, Red, Blue etc. (assuming that your attribute name is “Color”. If your attribute name is “Size”, then you can use Small, Medium, Large etc.

  1. Input the name for the terms. e.g. Red
  2. Click on “Enable Swatch” if you want to enable the swatch function.
  3. After that, you have two option for the swatch. If you want to show “Image” as your attribute then fill the field with the image link that you have uploaded. Or, if you want to show color as your attribute’s terms swatch, then fill the color.
  4. Now click on “Add new color” button to add this term in the terms list.
  5. You can add as many terms as you need.

Add Attribute Option in a Product

Go to “Products > Add New” from the admin menu.

Select “Variable Product” from the “Product Data” dropdown list.

Now click on “Attributes” menu from the same section.

  1. Select the attribute name from the very first drop-down option and click “Add”.
  2. Select the terms that are applicable to this products.
  3. Click on “Used for variations” option to set up the variation for this attributes.
  4. Click on “Save attributes” button.

Now, Click on “Variations” menu from the same section.

You will see a drop-down option “Add variation”. Just click on the “Go” button to add your first variation. After click on the “Go” button, you will see the options for this variations.

  1. Select Attribute’s terms from the drop-down.
  2. Upload image for this variation.
  3. Enter the price for this variation.
  4. Click on “Save changes” button.

Repeat the above step for every variation you want to add for this product.

Set Up Attribute Swatch Option for the Website

Go to “Moon Theme Options > WooCommerce > Shop Page” from the admin menu.

  1. Select the attribute name from the “Swatch Attribute to Display” drop-down option that you want to display as the swatch in the shop’s products.
  2. Enable tooltip for the single product page from the “Swatch Tooltip” option.
  3. Select the tooltip theme from the “Tooltip Theme” drop-down option.
  4. Select the swatch size (in Pixel) for the single page display.

Have any recommendation to improve the documentation?

Submit your Feedback

Submit your feedback