To configure the global settings, Navigate to Swatches Options > Global Settings.
1. Shop Page Settings
To customize the shop page settings,
- Go to Swatches Options > Global Settings > Shop Page Settings.
- Enable/disable the options as per your needs and provide the required values in the corresponding fields.
Enable Swatches on Shop/Archive Page | Enable the option to show the swatches on your shop page. |
Enable Add to cart on Shop/Archive Page | Enable the option insert add to cart button on shop page. |
Enable variation Price on Shop/Archive Page | Enable the option to show the price variation on shop page. |
Enable Reset Link on Shop/Archive Page | Enable the option to add a reset button for each products on the shop page. Therefore, you can reset the variations from the shop page itself. |
Enable tooltip on Shop/Archive Page | Enable the option to add tooltip on the shop page. |
Show stocks left label on Shop/Archive Page | Enable the option to display the stocks left on the shop page. |
Show variable product images on Shop/Archive Page | Enable the option to display variable product images on your shop page. |
Swatches Align | Choose an appropriate alignment(Left/Center/Right) for the swatches from the corresponding dropdown. |
Number of Attribute Display | Set the number of attributes to be displayed. If the value is 0, it means there is no limit. |
Radio Button Alignment on Archive Page | Choose any suitable alignment(Horizontal/Vertical) to display the radio swatch on Shop/Archive page. |
2. Featured Attributes Settings
To configure the features attributes,
- Navigate to Swatches Options > Global Settings > Featured Attribute Settings.
- Enable/disable the options as per your needs.
Show Only Featured Attributes on Shop Page | Enable the option to display only the featured attributes on your shop page. |
Use Featured Attribute for Variation Image Change in Product Page | Enable the option to use featured attribute for variation image change in product page. |
Use Featured Attribute For Variation Image Change in Shop Page | Enable the option to use featured attribute for variation image change in shop page. |
3. Styling Clear Button
To style the clear button,
- Navigate to Swatches Options > Global Settings > Clear Button Styling.
- Provide the required values in the corresponding fields.
Clear Button Text | Enter a suitable text for the clear button. |
Text Color | Choose a suitable color for the clear button from the corresponding color picker. |
Text Background Color | Choose a background color for the text from the corresponding color picker. |
Border Radius | Set a suitable border radius for the reset button. |
Border Color | Choose a border color for the clear button from the corresponding color picker. |
4. Manage Unavailable/Out Of Stock Variations
To manage the unavailable/out-of-stock variations,
- Navigate to Swatches Options > Global Settings > Unavailable/Stock Behavioral Styling.
- Provide the required values in the corresponding fields.
Behavior for Unavailable variation | Choose how to display the unavailable variation from the given options; Blur with Cross, Blur, Hide. |
Behavior for Out of stock variation | Choose how to display the out of stock variation from the options; Default, Blur, Blur with Cross, Blur with Cancel, Hide. |
Enables Out of Stock button clickable | Enable to allow users to click out-of-stock variaton. |
Cross Symbol Color | Choose a color for the cross symbol from the corresponding dropdown. |
Show Stocks Left Label | Enable the option to show stocks left. |
Minimum Value Stocks Left Alert | Set a minimum value for the stock. Therefore, when the stock is less than the given value, a alert will be shown. |
Show Back-Order Stocks Label | Enable to allow backorder option for variations, and indicate using the label “Back Order” on the product page. |
5. Attribute Title Settings
To configure attribute title settings,
- Navigate to Swatches Options > Global Settings > Attribute Title Settings.
- Provide the required values in the corresponding fields.
Attribute Name Font Size | Enter the required font size for the attribute name. |
Attribute Title Position | Choose a position for the attribute title from the dropdown. |
Note: If you set the attribute title on the left of the field, then two additional fields (col-1, col-2 width) need to be filled.
6. Other Settings
You can enable/disable the related settings of the plugin from the Other Settings option of Global Settings.
- Navigate to Swatches Options > Global Settings > Other Settings.
- Enable or disable the settings based on your needs.
Auto Convert Dropdown Into to Label/Button Swatches | Enable the option to convert product variation dropdown into label or button swatches.
Note: If the label is not provided, the term name will be treated as label. |
Auto Convert Dropdown Into Image Swatches | Enable the option to convert product variation select dropdown into image swatches. |
Enable Swatches on Additional Info | Once enabled, the swatches will be displayed in the additional information of both the simple and variable products. |
Ajax Variation Threshold
|
By default the threshold value is 30, which can be changed as per your requirement.
Note: If the number of product variation is less than 30, the product availability check is through JavaScript. If greater than 30 Ajax method is used. |
Clear on Reselect | Enable the option to clear the chosen variation on reselect. |
Disable Swatches plugin stylesheet | Once this feature is enabled, the swatches plugin stylesheet gets disabled. So, you can style them personally with custom themes. |
Generate Variation Link | Enable to generate and copy the selected variation’s link, to share or save for future purchase. |
Filter widgets Convert to Swatches | Once enabled, you can display attributes as swatches on filter widgets. |
Show Selected Variation Name Beside Attribute Label | Enable the option to display the chosen variation name besides the attribute label. |
Enable Swatches on Cart and Checkout | Enable the option to display the selected variation swatch on both Cart and Checkout page. |
Enable Lazy Load | Enable the lazy load option to speed up the page loading. It can improve the performance of your store by displaying the images on a page only when they are visible to the user. |