If you’ve ever shopped online and picked a T-shirt by clicking on a color circle or choosing your size from neat little boxes, you’ve already experienced product swatches in action.
By default, WooCommerce displays product variations (like size or color) in dropdown menus, which aren’t always the most user-friendly. That’s where the Product Variations Swatches element from Max Addons for Bricks Builder comes in.
This element enables you to transform plain dropdowns into visually appealing, clickable swatches in the form of colors, labels, or images. For example:
- A clothing store can show sizes as labels (S, M, L, XL).
- A furniture shop can display materials as images (leather, fabric, wood).
- A cosmetics store can use color swatches for lipstick shades.
And unlike most plugins that limit swatches to the Single Product Page, Max Addons gives you complete freedom. You can add swatches to:
- Single product pages
- Shop/archive pages
- Any custom page built with Bricks Builder
This flexibility enables you to design product experiences that align with your store’s unique style and identity.
Getting Started#
Before adding swatches, make sure your WooCommerce products already have variations set up (like size, color, or material).
If you haven’t done this yet, follow our step-by-step guide how to create WooCommerce product variations.
Next, make sure you've installed and activated:
- Bricks Builder
- Max Addons for Bricks Builder
How to Add the Product Swatches Element#
- Open the page you want to edit (or create a new one) using the Bricks Builder editor.
- In the element search bar, type “Product Swatches”.
- Add the element to your page.
- Verify that the element displays the “MAX” badge in the corner. This confirms it’s coming from Max Addons.
Content Tab#
Content Tab is where you control how your swatches behave. Let’s go through the settings in detail:
ATTRIBUTE#
1. Attribute Source#
- Auto: Automatically pulls variation attributes (like size, color) from your WooCommerce products.
- Manual: Lets you define attributes yourself.
- If you select Manual, click + ADD ATTRIBUTE to manually choose which attributes (e.g., “Color” or “Size”) should appear.
Use Auto if you want the element to detect product variations directly. Use Manual if you want more control or are building a custom layout.
2. Swatch Type#
This setting decides how variations are displayed:
- Auto: Uses the attribute type you set in WooCommerce.
- Color: Displays variations as color swatches (great for clothing, cosmetics, or accessories).
- Label: Displays variations as text labels (e.g., Small, Medium, Large).
- Image: Displays variations as images (perfect for patterns, materials, or products that look different visually).
Example: For a T-shirt product, you might use Color swatches for shirt colors and Label swatches for sizes.
3. Image Source (only for Auto/Image)#
If you choose Auto or Image as your swatch type, you’ll also need to set an image source:
- Variation: Pulls images directly from the product variation itself.
- Attribute Term: Uses the image set at the attribute level (e.g., all “Blue” items share the same swatch image).
4. Update Image#
When enabled, this option automatically updates the main product image when a swatch is selected. You can choose what image to update:
- Image: The specific swatch image.
- Product Image: The main product image.
- Manual Selector: Target a custom image element on the page.
TOOLTIP#
- Typography: Font style, size, weight, etc.
- Background Color: Tooltip background.
- Border: Add/remove border styles.
- Padding: Adjust spacing inside the tooltip.
Example: Hovering over a blue swatch could show “Ocean Blue” for clarity.
STYLE#
Style section allows you to control the appearance of your swatches on the page.
Layout Options#
- Wrap: Controls how swatches are displayed if they don’t fit in one line. Options include,
- Default
- No Wrap
- Wrap
- Wrap Reverse
- Direction: Arrange swatches horizontally or vertically.
- Align Main Axis: Align swatches left, center, or right.
- Align Cross Axis: Align swatches top, middle, or bottom.
- Column Gap / Row Gap: Set spacing between swatches.
Styling by Swatch Type#
- Color Swatches
- Adjust size (width/height).
- Style border and active border (when a swatch is selected).
- Label Swatches
- Control padding around labels.
- Set typography (font size, weight, style).
- Customize active typography (when selected).
- Set background color and active background color.
- Add borders for normal and active states.
- Image Swatches
- Set width and height for a clean design.
- Add borders and active borders for selection styling.
Wrapping Up!#
So, this was a detailed overview of WooCommerce Product Swatches for Bricks Builder. Hope the doc helps you understand the features and functionalities of the element better!