Creating a size attribute swatch and filter

Welcome to XforWooCommerce article guide.

In this article, we will show you how to create a Size Swatch and Filter for your WooCommerce Shop from the beginning.

First, you need to add some product attributes.

  • Navigate Products > Attributes to create a few attributes for our products
  • We’ll create a Size attribute, to differ our products by size
  • Add some Size attribute terms, like 7, 9, 10, etc…

Once we’ve added attributes and terms, let’s create some products!

  • Create a new product and set its type to Variable Product
  • Add Size attribute to your product and select terms
  • Let’s create some variations! Use Create variations from all attributes option to quickly all possible variations to your product
  • There are two ways of defining out of stock products. Managed stock and unmanaged stock
  • Choose what suits your Shop better. If you’re having product stock quantities then use Manage Stock

Now let’s create an attribute swatch.

  • Navigate to WooCommerce>XforWooCommerce>Product Options
  • Choose Attribute Swatch then click the Add Item + button.

Choose Attribute Swatch and click the Add Item + button to style an attribute

  • Select Attribute Size that we just made.
  • Click the Paint/Cog Icon on the right site od the tab and Terms Manager will appear.

Choose Type Plain Text or whatever best suit your site and set the terms! Click X to go back.

  • Click X to close the Terms Manager. Then click Save!

Let’s finish this article by creating a Size filter.

  • Navigate to WooCommerce>XforWooCommerce>Product Filter>Filter Presets
  • Under Filters select taxonomy and click Add Item + button.
  • Under Select Taxonomy choose the new attribute that we created, the Size attribute.

After this is done, you will have a lot of options to set the filter to your liking. Such as setting the adoptive behavior, enabling multi-select, showing terms count, and much more, we leave that for you to play around with. When you chose your option hit the Save button you’re done!.

Enjoying the results.

The Product Filter and Improved Product Options work in unison with each other. So if you filter for shoe size 8, you will click on our shoe size filter 8 term. As soon as you filter, you will get the desired results, but the Product Options plugin will recognize what you did and respond accordingly and it will select the 8 size variation the products have in the attribute swatch.

If you now click the product and go to the product page, you will also see that the 8 term is active and selected and can be added to the cart with just a single click!

See it in action here →

Read more XforWooCommerce articles to learn more. Thank you!

Leave a Reply

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