Learn how to show/hide specific labels for mobile devices and customize their styles.
Wondering how to hide a certain label for desktop users and show it only on mobile?
Mobile-only label
Or do you want to customize mobile label styles? For example, make it bigger.
Different label styles for different user devices
All of this is possible with Advanced Woo Label settings, and below we will cover how to do that.
For example, we have the following label:
Mobile offer - 10% OFF label
This label promotes a special discount that applies only to mobile users. So we need to show it on mobile devices and hide it on any others.
Here is how we can do this:
1. Create your label to promote that mobile offer. If you already have it, just open its edit page.
2. Now set the following display condition:
User device -> Equal to -> Mobile
Label display condition
3. Now just save and check your label—it should be visible only on mobile devices.
For example, we have the following label:
Special Offer label
That label must be visible on both mobile and desktop devices. But for mobile devices, we want to make the label font size bigger.
This can be done in two ways:
1. Create two separate labels: one only for mobile and another only for desktop. Both labels will have the same text but different font styles.
Use the Display Conditions option to show the labels on different devices.
2. Use one label and just set additional styles for mobile-only devices. This option is better if you have just minor styling changes.
To set the mobile-only style, open the label edit page and paste the following inside the Custom CSS option box:
@media all and (max-width: 700px) { .awl-product-label { font-size: 18px !important; } }
Custom css for mobile only styles
This style will set label for size equal to 18px
on mobile devices.