Variable products and swatches

A variable product is a product which has more than one option in attributes, for example, color, size, material. Instruction on how to create an attribute is here as soon as the necessary attributes are available, a variable product can be created, instrucctions on how to create a variable product is here

By default, variable product attributes are presented as a dropdown in WooCommerce. WoodMart theme suggests the option to present the attributes as swathes. 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 format:

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 as an image from product variations

There is an option to display the swatches as images uploaded to “Image preview for this value” of the attribute item. The color from “Color preview for this value” should be cleared. In this case, the color, for example =Red= would have one and the same image for all the products.

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 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 image into “Image preview for this value” in the attribute item, otheriwise swatches are presented as colors.

Shopping cart

Variable products and swatches

Document navigation

Variable products and swatches