Would you like to turn the plain variation dropdown into color, button, or image swatches? Botiga Pro extends WooCommerce attributes with three new types, Color, Button, and Image, so shoppers can pick variations visually on your variable products.
In this guide, we’ll walk you through how to set up and style product swatches in Botiga.
Before you get started, make sure you’ve installed and activated the Botiga theme on your WordPress site. If you’re using features from Botiga Pro, ensure that both the Botiga theme and the Botiga Pro plugin are installed and active. The Product Swatch module is a Botiga Pro feature, so this requires Botiga Pro.
How to set up product swatches
1. The Product Swatch feature is a module, so first enable it from Appearance » Theme Dashboard.
2. Create the attributes you’ll use for product variations. Go to Products » Attributes.
Here’s the result after creating “Color”, “Image”, and “Size” attributes, for example.
3. Configure the terms for each attribute by clicking the Configure terms link.
4. Create the terms for each attribute.
5. Edit or create a WooCommerce product and set the product type to Variable Product.
6. In the Attributes tab, select the attribute and click Add. Check Used for variations, add the terms under Value(s), and click Save Attribute. Repeat for every attribute you want on the product.
7. In the Variations tab, click Go to add a variation. Once it’s added, select the attributes in the dropdowns and fill in the options like image, SKU, and price. Click the variation to expand it and see all the options.
8. Save or publish the product. Here’s the final result.
General options
Once Product Swatches is enabled, new options appear under Appearance » Customize » Product Swatches.
- Enable On Shop Catalog: Controls whether the swatches also appear on shop and archive pages.
- Enable Tooltip: Shows a tooltip with the swatch attribute name on hover. It works on both single product and shop catalog swatches.
- Variation Name On Product Title: Controls whether the variation name appears next to the product title when a variation is selected.
Advanced swatch styling options
Would you like different swatch styling for your store? Botiga Pro includes advanced styling options. Go to Appearance » Customize » Product Swatches (Style) and select the swatch type you want to style, or style all of them.
When you choose a swatch type to style, you’ll see the options below. This guide covers the Color swatch options, but the same applies to the other types.
Swatches are rendered in three areas: Single Product, Shop Catalog, and Filter Widgets. You can style each area separately. By default, the Shop Catalog and Filter Widgets areas inherit the Single Product options, but you can change them at any time.
Frequently asked questions
Below, we’ve answered some of the most common questions about product swatches in Botiga.
What swatch types can I use?
Botiga Pro adds Color, Button, and Image swatch types, which replace the standard variation dropdown on variable products.
Can swatches show on the shop page, not just the product page?
Yes. Turn on Enable On Shop Catalog in the general options to display swatches on your shop and archive pages too.
Do I have to style each area separately?
No. The Shop Catalog and Filter Widgets areas inherit the Single Product styling by default. Adjust them only if you want a different look in those areas.
That’s it! You’ve successfully set up and styled product swatches in Botiga.
Next, would you like to add a variations gallery to your products? Check out our guide on the product variations gallery to learn more.
