WoodMart Variable Products and Swatches Practical Guide

exist WooCommerce In stores, variable products are an unavoidable structure whenever color, size, or specification variations come into play. The WoodMart theme builds upon WooCommerce's default variable product functionality to provide further enhancements. Swatches(Color blocks, images, text) system, making the product selection process more intuitive.

This article will be organized around Complete Configuration Process for WoodMart Variable Products and Swatches Expand on this, focusing on explaining "why it's set up this way" and "how each step impacts the front-end experience."

I. Why Use Swatches in WoodMart

WooCommerce's default dropdown selection method presents significant issues with multi-variation products:

• Users need to repeatedly click the dropdown menu.
• The color or style differences cannot be seen directly.
• The product selection process is lengthy.

WoodMart The Swatches system transforms variable selection into visual operations, allowing attributes such as color and size to be directly displayed as swatches, images, or text. This reduces comprehension effort and aligns more closely with e-commerce user habits.

II. Creating Product Attributes for Swatches

2.1 Create Color and Size Properties

The backend path is as follows:

Products
Attributes

Common variable products include at least:

• Color
• Size

When creating attributes, the Slug can generally remain at its default setting; focus primarily on the Swatches-related options.

2.2 Key Options Related to Swatches in the Attributes Settings

Swatch Area

Used to define the Swatch style and size for this property in the frontend, forming the basis for Swatches to take effect.

Change Product Image on Attribute Click

Once enabled, clicking a Swatch will switch the main product image—a core feature of the variable product experience.

Display Attribute Labels on Products

Used to display attribute labels in product images or information areas, suitable for products requiring clear specification differentiation.

III. Create Swatch Options for Attributes (Terms)

3.1 Creating Swatches for Color Properties

Click Configure terms in the Color property:

• Create an option for each color
• Swatch Type Selection Color
• Set the corresponding color value

Color attributes typically use Color Swatch or Image Swatch for quick identification.

3.2 Creating Swatches for Size Attributes

In the Size property:

• Create options for each size
• Swatch Type Selection Text

Dimension-related attributes are better suited for text format, as they are clear and do not take up excessive space.

4. Create and Configure WoodMart Variable Products

4.1 Set the product type to Variable Product

After creating a new product, in the Product Data section:

• Set the product type to Variable product

This is a prerequisite for enabling Swatches.

4.2 Applying Attributes to Variants

Go to the Attributes tab:

• Add Color and Size attributes
• Check Used for variations

Only when this option is selected will the system use the attributes to generate variants.

4.3 Automatically Generate and Manage Variants

In the Variations tab:

• Use Generate variations to automatically generate combinations
• Set prices and other information in bulk using Bulk actions

After completing the product release, you will see variable selections in the form of swatches on the front end.

V. Theme-Level Settings and Rendering Controls for Swatches

5.1 Swatches Settings Access

Backend Path:

Theme Settings
Shop
Variable Products

This controls the overall behavior of Swatches, not individual products.

5.2 Controlling Swatches Displayed on Product List Pages

Grid Swatch Attribute to Display Used to specify:

• Which attribute to display on the product list page
• A common practice is to display only Color.

This approach helps avoid making the list page information overly complex.

5.3 Limit the number of swatches to keep the page clean

Limit Swatches Options For use when there are numerous variants:

• Collapse Swatches
• Reduce page space usage

This is especially important for products with multiple colors and specifications.

VI. Considerations When Using Variant Images as Swatches

6.1 Prerequisites for Using Variant Images

After enabling "Use images from product variations":

• Swatches will use variant images.
• Images uploaded via the attribute options will no longer be used.

The following conditions must be met simultaneously:

• Each variant has an image set.
• Swatch type is Text
• The Color Swatch field is disabled.

Variants without images will be displayed as text.

6.2 Practical Settings for Synchronizing Swatches with Images

Scroll to Top on Variation Select

When selecting a variant with images, the page automatically scrolls to the main image area, allowing users to easily view the variations.

Additional Variations Images

Allow multiple additional images to be uploaded for each variant, ideal for products where highlighting subtle differences is important.

Display Variation Image Based on Filter Selection

When variants are selected via filtering or Swatch, product images switch synchronously to maintain visual consistency.

VII. Common Approaches to Using Swatches

• Color attributes should prioritize Color or Image Swatch.
• Use Text Swatch for clearer size attributes
• The list page displays only one core attribute.
• Reasonably limit the number of swatches for multi-specification products
• Ensure variant images align with Swatch logic

These details directly impact user choice efficiency.

summarize

WoodMart Swatches are not merely stylistic embellishments, but rather revolve aroundVariable ProductA comprehensive interactive system has been established. From attribute creation and variant generation to Swatches display methods, every step impacts the front-end user experience.

For WooCommerce stores featuring products with multiple colors and sizes, the proper use of WoodMart's Variable Products and Swatches is essential for enhancing product readability and streamlining customer selection.

Contact Us
Can't read the tutorial? Contact us for a free answer! Free help for personal, small business sites!	Customer Service
① Tel: 020-2206-9892
② QQ咨询：1025174874
(iii) E-mail: info@361sale.com
④ Working hours: Monday to Friday, 9:30-18:30, holidays off