Turn product variation selection dropdown into color, and button swatches. Botiga Pro extends the attribute type with three new options:
Color, Button and Image that allows to create variable products.
How to setup the product swatch:
1. The ‘Product Swatch’ feature is bundled as a module, so to start using it you have to firstly enable the module from Appearance > Theme Dashboard
2. Create the attributes that will be used for product variations. For it, go to Admin Dashboard > Products > Attributes:
Below is the result when we create, for example, “Color”, “Image” and “Size” attributes:
3. Configure the terms for each attribute. For it click in the “Configure terms” link:
4. Create the terms for each attribute:
5. Edit or create a WooCommerce product and define the product type to Variable Product:
6. In the Attributes tab, select the attribute and click to Add. Then, check the option “Used for variations” and include the terms at “Value(s)”. Click in the button Save Attribute. Do these steps for all attributes you do want in your product.
7. In the Variations tab, click to “Add variation” through the “Go” button. Once the variation is added, select the attributes in the dropdowns and fill the options like image, SKU, price, etc… (you should click in the variation item to expand and see all the options)
8. Publish/save the product changes. This is the final result:
Once you have the Product Swatches enabled, new options will appear under Appearance > Customize > Product Swatches:
- Enable On Shop Catalog: Control wheter the product swatches should be displayed in the shop catalog/archive pages as well.
- Enable Tooltip: A tooltip with the swatch attribute name will be displayed when the user mouse over the swatch. It works in both single product and shop catalog swatches.
- Variation Name On Product Title: Controls wheter the variation name should be displayed next to the product title when a variation is selected.
Advanced swatches style customization options
Do you want different swatches styling for your store? Botiga Pro comes with advanced options to style the product swatches. For it go to Appearance > Customize > Product Swatches (Style) and select one of the swatches type you wish to style (or all of them):
When you click to style one of the swatches type, you’ll be presented with the options below. In this documentation we’ll outline the ‘Color’ swatch options, but the same applies to the other types of swatches.
There’s 3 main areas where product swatches are rendered: Single Product, Shop Catalog and Filter Widgets. You can style each of these areas through the options above. By default the Shop Catalog and Filter Widgets areas will inherit the Single Product options but as you can see above, you might change it at any time.