DynamicPress replaces standard WooCommerce dropdown variation selectors with visual colour and image swatches, both on product loop cards and on single product pages.

How Swatches Work #

Swatches are configured per WooCommerce product attribute. When the swatches JS is active, it reads the attribute values configured in WooCommerce → Products → Attributes and renders them as clickable swatch tiles instead of dropdown selects.

Loop Swatches Bricks Element #

A dedicated loop-swatches Bricks element is registered and available in the Bricks element panel. Drop it inside a product query loop container to display swatches for each product directly in the loop without opening the product page.

• Go to Bricks Builder and open a product query loop template.
• Search for ‘Loop Swatches‘ in the Bricks element search.
• Drag it into the product card where you want the swatches to appear.

Swatch Configuration #

1. Go to WooCommerce → Products → Attributes.
2. Edit or create an attribute (e.g., Color, Size).
3. For each attribute term, enter a colour hex value or upload an image – depending on the swatch type.
4. The swatches JS reads these values and renders the correct swatch type automatically.