Customizing Font, Background, and Border Color for Each Attribute
To infuse your WooCommerce store with a personalized touch, consider customizing font styles, background colors, and border colors for each attribute using the versatile “Product Label and Variation Swatches for WooCommerce” plugin. Here’s a comprehensive guide on how to tailor these elements to suit your brand’s aesthetic:
Styling the Product Attributes Globally:
- Begin by navigating to WooCommerce > Settings > Color Label Variations for WooCommerce after installing and activating the plugin.
- Under General Settings, you’ll find a plethora of options to fine-tune the appearance of your variation labels.
Adjusting the Basic Variation Label:
- Border Width (px): Define the thickness of the border encasing your variation labels by inputting the desired pixel value.
- Border Style: Handpick a style for the border from the dropdown menu, with choices ranging from Dotted to Outset.
- Short Name: Opt to display abbreviated versions of attribute names by toggling this option.
- Name Length (Chars): Specify the maximum character count for each attribute name to maintain a tidy presentation.
Customizing Label Attributes:
- Font Color: Handpick the hue for the text of your label attributes.
- Background Color: Set the backdrop color behind the label text for a harmonious blend.
- Border Color: Define the color of the border surrounding the label to accentuate its presence.
- Box Radius (%): Adjust the curvature of the label box corners as a percentage for a polished appearance.
Customizing Color Attributes:
- Font Color: Select the ideal text color for your color attributes to ensure clarity.
- Background Color: Set the background hue for the color attribute boxes for a visually appealing display.
- Border Color: Define the border color surrounding the color attribute boxes to delineate them effectively.
- Box Radius (%): Fine-tune the roundness of the corners of the color attribute boxes for a balanced look.
Configuring Attributes:
- Select Font Color: Choose the font color for attribute selection options to maintain visibility.
- Select Background Color: Set the background hue for attribute selection boxes to complement your store’s theme.
- Select Border Color: Define the border color for attribute selection boxes for a polished finish.
Customizing Radio Type Attributes:
- Font Color: Select the text color for radio type attribute options for readability.
- Background Color: Set the background hue behind radio type attribute options for visual coherence.
- Border Color: Define the border color surrounding radio type attribute options to delineate them clearly.
- Box Radius (%): Fine-tune the curvature of the corners of radio type attribute option boxes for a cohesive appearance.
Customizing Image Attributes:
- Height (px): Specify the height of image attributes in pixels for consistency.
- Width (px): Define the width of image attributes in pixels for uniformity.
- Border Color: Set the color of the border surrounding image attributes for emphasis.
- Box Radius (%): Adjust the roundness of the corners of image attribute boxes as a percentage for a sleek presentation.
After tailoring your desired attributes to perfection, don’t forget to click the “Save changes” button to apply the modifications seamlessly to your WooCommerce settings. With these personalized touches, your WooCommerce store will exude professionalism and charm, captivating customers and enhancing their shopping experience.