Home
Docs
How to Use Orderable Product Labels

How to Use Orderable Product Labels

Try Orderable

Dive into Orderable’s demo and experience the future of hassle-free online ordering.

Try Orderable

Join our Community

Join our community to connect with fellow users and share tips.

Orderable Product Labels allow you to add customizable labels to your products. You can use these to indicate your product’s dietary properties, if your product is new, popular, or running out, or anything else you’d like to draw your customer’s attention to.

woocommerce product labels

Step 1: Create your product labels

The first thing we’ll need to do is create the product labels. With Orderable, you can create an unlimited number, so take your time with this step.

To create your product labels, take the following steps:

  1. From your WordPress dashboard, go to Orderable > Product Labels.
create product labels orderable
  1. Give your product label a Name and Slug. The slug is simply a lowercase version of the name. If you don’t know what to put here, leave it blank. When you add the product label, it will automatically create a Slug for you.
product label name and slug
  1. Next, give your product label a Description. When a customer hovers over the label, this description will appear, giving them some more information.
product label description
  1. Next, decide what you want your product labels to look like. In the Display option dropdown, there are a few options. Decide if you want your label to be name only, icon only, or if you want words alongside your icon, in which order you’d like them to display.
product label display option
  1. Once decided, you can pick the colors for your label. Use the color picker to select your Foreground color and Background color. Or, if you have a specific color you want to use, input a hex code in the field that appears once you click Select Color.
product label background color
  1. If you want to use an icon in your product label, click the Select icon… button underneath Icon. Here you have some options. A selection of Icons that come with Orderable, icons from FontAwesome, Dashicons, or WooCommerce icons.
product label icon picker
  1. Once you’re happy, click Add New Product Label and repeat until you’ve created all the product labels you need.

Note: As you build your icon, you’ll see the changes in real time in the Preview section.

finished product label

Step 2: Add your product labels to products

Now we’ve created our product labels. We’ll next need to add them to our products.

To do this, take the following steps:

  1. From your WordPress dashboard, go to Products > All Products and click to edit the product you want to add product labels to. Either that or click Add New to create a new product.
  2. Once done, scroll down the page until you reach the Product Labels section on the right-hand sidebar.
product labels section edit product
  1. This is where you’ll add your product labels – just like product tags. Start typing your product labels into the Product Labels field and click Add when ready.
add product label to product
  1. Once you’ve assigned all your tags, scroll to the top of the page and click the blue Update or Publish button.

Step 3: Display product labels

We’ve created our product labels and added them to products. Now let’s get them displayed in your store.

  1. From your WordPress dashboard, go to Orderable > Product Layouts and click to edit your product layout of choice.
edit product layout
  1. Scroll down to the Labels section, and you’ll see two dropdowns. The first lets you pick where you want the label to show (over the image, before the title, before the description, and before the price).
product layout product label position
  1. Once you’ve selected which you prefer, the second dropdown will change depending on what you’ve selected. This will then allow you to determine where you’d like it to sit in that position.
product layout product label position 2
  1. Once happy, make sure to Update your product layout and view your product labels on the front end of your store.

Note: You’ll be able to see what the labels look like before you publish if you scroll down to the Layout Preview on this screen.

layout preview product labels

Lastly, we can decide how we want product labels to appear in the side drawer. To do this, take the following steps:

  1. From your WordPress dashboard, go to Orderable > Settings and click the Side Drawer tab/link at the top of the page.
  2. Scroll down until you get to the Product Labels section. Click the dropdown to decide where you want your labels to display (before the product title, before the product options, or after the product options).
product label side drawer position
  1. Once done, click the blue Save Changes button at the bottom of this page.

Get Your Restaurant Online With Orderable

The WooCommerce plugin designed to help restaurants take orders online – with no added fees!

View Pricing
Get started with Orderable