Variable products and swatches

A variable product is a product that has one or more options in attributes, for example, color, size, and material. Find an official WooCommerce instruction about how to create a variable product with attributes here 

By default, variable product attributes are presented as a dropdown in WooCommerce. WoodMart theme suggests the option to present the attributes as swatches. Swatches are available in text, color, or image format. Swatches can be configured for global attributes only.

Swatches in the text format

Swatches are enabled in Dashboard -> Products -> Attributes -> chose the attribute -> Configure Items -> Edit -> Enable swatch

All the attributes would be presented as text instead of a drop-down.

Swatches as a color or image format same for all the products

In order to show the attribute item as a color swatches (vide color attribute on the image above), it is necessary to set the color in “Color preview for this value” and colors will have the view as shown on the image above.

Swatches also can be presented by images uploaded to the attribute item. In this case, the image should be uploaded, color should be removed and the option “Use images from product variations ” should be disabled.

Swatches as an image from product variations

A variable product has a main image and gallery. The swatches can show the main images taken from the product variations.

In order to show featured images taken from product variations in swatches, it is necessary to enable the option provided in the Theme Settings > Shop > Attribute swatches > Grid swatch attribute to display – choose pa_color (the color attribute, for example) and “Use images from product variations” should be enabled. 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.

Please note: it is necessary to upload an image into “Image preview for this value” in the attribute item, otherwise swatches are presented as colors.