Overview
The Advanced Woo Labels plugin allows you to fully customize product label styles to fit your needs. With the PRO version, you gain even more options, including customizing label borders, shadows, and additional label shapes.
However, one limitation is that these styles are applied universally across all pages where labels appear, meaning labels look the same everywhere.
In most cases, this consistency works fine, but sometimes you may need different label styles for different pages.
Example:
- Use default label styles on the Shop page.
- Apply extended styles (e.g., larger fonts, different background colors) on Product Details pages.
Default shop page labels:
Default label styles for shop page
Extended product details page labels:
Extended label styles for product details page
This can be achieved by using custom CSS styles. Below, we’ll show how to create unique styles for two types of pages:
1. Archive pages (e.g., Shop, Categories, Tags).
2. Single Product pages.
Styles for Product Details Page
To set unique styles for product details pages, we will use the Custom CSS option available on the label's edit page.
Example:
Set a red background color and a font size of 16px for labels on product details pages.
Steps:
1. Open the Edit Label page for the label you want to modify.
2. Scroll down to the Custom CSS option.
3. Add the following CSS code:
.single-product .awl-label-text {
background: #ff0000 !important;
font-size: 16px !important;
}
Custom CSS styles for label
4. Save the changes and check your label on the product details page to confirm the new styles are applied.
Extended label styles for product details page
Styles for Archive Pages
Similar to the previous example, we’ll use the Custom CSS option to define unique styles for labels displayed on archive pages. These include the shop page, category pages, tag pages, attribute pages, and other product listing pages.
Example:
Set a green background color and italic text with a font size of 16px for labels on archive pages.
Steps:
1. Open the Edit Label page for the label you want to modify.
2. Scroll down to the Custom CSS option.
3. Add the following CSS code:
.archive .awl-label-text {
background: #0c9100 !important;
font-size: 16px !important;
font-style: italic !important;
}
Custom CSS styles for label
4. Save the changes and check your label on archive pages to ensure the new styles are applied.
New styles for archive pages