Tailor the design and appearance of Swatchly to match your preferences and enhance the visual appeal of your product variations. Customize the design settings of Swatchly to tailor the appearance of swatches and tooltips based on your preferences. Here's a detailed breakdown of how you can achieve this:
For Swatches #
- Customize Swatches
- Define the appearance of swatches in different states:
- Normal: Customize swatch text color, font size, line height, background color, and border for the normal state.
- Hover: Adjust swatch text color, background color, and border for the hover state.
- Selected: Modify swatch text color, background color, and border for the selected state.
- Disable: Set swatch text color, background color, and border for the disabled state.
- Define the appearance of swatches in different states:
- Customize Swatches (Product List)
- Customize swatch appearance specifically for the product list:
- Normal: Tailor swatch text color, font size, line height, background color, and border for the normal state.
- Hover: Modify swatch text color, background color, and border for the hover state.
- Selected: Adjust swatch text color, background color, and border for the selected state.
- Disable: Set swatch text color, background color, and border for the disabled state.
- Customize swatch appearance specifically for the product list:
For Tooltip#
- Tooltip Customize
- Customize the appearance of tooltips:
- Configure tooltip width, maximum width, background color, border, and spacing.
- Define text color, font size, line height, and padding for tooltip text.
- Adjust the arrow color, size, and spacing for the tooltip arrow.
- Set the border for the tooltip image.
- Customize the appearance of tooltips:
- Tooltip Customize (Product List)
- Tailor tooltip appearance specifically for the product list:
- Customize tooltip width, maximum width, background color, border, and spacing.
- Adjust text color, font size, line height, and padding for tooltip text.
- Modify the arrow color, size, and spacing for the tooltip arrow.
- Set the border for the tooltip image.
- Tailor tooltip appearance specifically for the product list:
With these customization options, you can create a visually appealing and cohesive design for swatches and tooltips, enhancing the overall user experience on your WooCommerce store.