Shopping cart

close
Menu
close
Start typing to see products you are looking for.

Variable products and swatches

Home » Documentation » Variable products and swatches
Document navigation

Variable products and swatches

A variable product is a product that 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, instructions 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 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.

Prev Product page options
Next Header Builder
Scroll To Top