Variable products and swatches

WooCommerce variable products

WooCommerce has an option to create product attributes and use them for product variations. That means that you can create complex products with additional options and sizes or any other kind of attribute. Detailed instruction about products and taxonomies management can be found in WooCommerce documentation here https://docs.woocommerce.com/document/managing-product-taxonomies/

And here you can read a tutorial about variable products based on custom attributes  https://docs.woocommerce.com/document/variable-product/

Custom swatches

By default, WooCommerce displays all options for variable products as dropdowns. Our theme extends this functionality and allows you to show your variations as swatches. It is a built-in functionality and you don’t have to purchase any plugins for that. Swatches are small buttons that can be displayed as colors, images, or inline text.

Inline text swatches

To enable text swatches you need to edit the attribute via Dashboard -> Products -> Attributes -> choose attribute -> edit and check the “Enable swatch” option.

And now all the options based on this attribute will be displayed as texts.

Color swatches

The second option is for product options that are better to display as color buttons rather than simple text. To do this, you need to enable swatches first (as described in the previous paragraph). Then go to Dashboard -> Products -> Attributes -> choose attribute -> Configure terms -> edit term, set color option and update.

Images swatches

You can also preview your product attribute option as an image. In this case, you need to not set the color but upload an image instead. The path is the same Dashboard -> Products -> Attributes -> choose attribute -> Configure terms -> edit term. In this case, the color for the “Red” term for example will be the same for all products.

Images swatches from featured images

You can set different images for swatches on each product. To do this, you need to first select an attribute for which images from variations will be set. You can do this in Dashboard -> Theme Settings -> Shop -> Swatches -> “Use images from product variations”. The variable product should have a featured image for each variation. In this case color, for example, “Red” would have the image taken from the product variation which is set for red variation.