The Variations section in the style settings of the Product Table widget lets you control how product variations are displayed and styled – giving you full control over the shopping experience when using variable products.
⚙️ Settings Overview
| Setting | Description |
|---|---|
| Use Buttons | Replaces default variation dropdowns with styled buttons. Applies to all variable products listed in the table. |
| Button Typography | Customize font family, size, weight, and line height for variation buttons. |
| Button Colors | Set text, background, and border colors for normal, hover, and active states. |
| Button Border Radius | Make buttons fully rounded or square based on your design needs. |
| Button Padding | Adjust inner spacing inside each button. |
| Button Gap | Controls the spacing between individual variation buttons. |
If Use Buttons is turned off, standard dropdowns will be used. Additional styling options are available:
| Setting | Description |
|---|---|
| Dropdown Text Color | Customize text color for variation dropdowns. |
| Dropdown Background | Set the background color of the dropdown field. |
| Dropdown Spacing | Control the spacing between multiple dropdown fields when a product has more than one attribute. |
🛒 How It Works
Works seamlessly with both individual and bulk add to cart modes.
For variable products, the Variations column will display available attributes.
Users select attribute values directly in the table — using buttons or dropdowns.
Once all required attributes are selected, the correct variation is fetched via AJAX.
The product’s price, availability, and the add to cart form will be updated dynamically.
Example – buttons as variations
