GET FREE VERSION GET THE PRO VERSION

Custom labels for mobile devices

Learn how to show/hide specific labels for mobile devices and customize their styles.

In this article

Overview

Wondering how to hide a certain label for desktop users and show it only on mobile?

Mobile-only label

Mobile-only label

Or do you want to customize mobile label styles? For example, make it bigger.

Different label styles for different user devices

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.

How to show a label only for mobile devices

For example, we have the following label:

Mobile offer - 10% OFF 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

Label display condition

3. Now just save and check your label—it should be visible only on mobile devices.

How to set mobile-only label styles

For example, we have the following label:

Special Offer 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

Custom css for mobile only styles

This style will set label for size equal to 18px on mobile devices.