How To Setup Variation Swatches?
Variation swatches replace variable-product dropdowns with color, image, or label choices.
Enable swatches
- Go to Divi Engine → Divi BodyCommerce → Variation swatches and enable the feature.
- Go to Products → Attributes and create or edit a global attribute.
- Choose its swatch type: color, image, or label.
- Select Configure terms and set each term's color, image, or short label.
- Create a variable product, add the attribute for variations, and generate or add its variations.
When adding an attribute term from a product's Attributes tab, BodyCommerce can collect the term name and its color or image together. Color values can be typed or pasted as hex/RGBA, and images use the WordPress Media Library.
If Products → Attributes is missing the Type options (Color, Image, and Label), variation swatches are turned off. From BodyCommerce 10.1.0 that screen explains why and links to Divi Engine → Divi BodyCommerce → Variation swatches. Enable Enable Variation Swatches, then return to Attributes.
Availability and appearance
The settings page controls tooltip and active-name behavior, labels, dimensions, radius, colors, borders, and how unavailable choices appear. Out-of-stock swatches can be hidden or struck through. Products with many variations load the chosen combination when selected instead of preparing every combination up front.
Product template
Use Add to Cart or Summary in Divi 5. Swatches use the WooCommerce variations rendered by those modules.
Also configure quantity plus/minus design under Form fields and Buy Now under Ajax add to cart. Test keyboard selection, unavailable combinations, variation image changes, stock limits, and reset behavior.