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. First enable the
Product Swatch through Admin Dashboard > Appearance > Customize > WooCommerce > Single Products > Product Swatch:
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:
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: