---
title: How to Use Product Label in WP Cafe
description: "## **Overview** Product Label lets you flag WooCommerce products with branded badges like *Vegan*, *Spicy*, *Gluten-Free*, or *Chef's Pick*. Each label has its own background color, foreground color, and icon (Dashicon or custom SVG), and renders as a styled pill…"
url: "https://themewinter.com/docs/plugins/wp-cafe/how-to-use-product-labels-in-wpcafe/"
updated: "2026-05-10"
category: WPCafe / Food Ordering
---

# How to Use Product Label in WP Cafe

## **Overview**

Product Label lets you flag WooCommerce products with branded badges like *Vegan*, *Spicy*, *Gluten-Free*, or *Chef's Pick*. Each label has its own background color, foreground color, and icon (Dashicon or custom SVG), and renders as a styled pill on every WP Cafe product card. Use it when plain product tags aren't expressive enough for your menu.

![product label shortcode preview](https://themewinter.com/docs/plugins/wp-content/uploads/sites/3/2026/05/SCR-20260510-ljbc.png)

## **Requirements**

| **Prerequisite:**Make sure WP Cafe Pro and WooCommerce are installed and active. |
| --- |

## **Step 1: Open the Product Label Management Screen**

1. From the WordPress dashboard, click **Food Order** in the sidebar → **Food Menu**.
2. Click the **Manage Product Labels** button on the **Product Labels** card.

This opens the term editor for the Product Label taxonomy.

![WPCafe menu for adding product label](https://themewinter.com/docs/plugins/wp-content/uploads/sites/3/2026/05/SCR-20260510-ljwq.png)

## **Step 2: Create a Label**

In the **Add New Label** form on the left side of the screen:

1. Enter a **Name** (e.g. `Vegan`).
2. Optionally set a **Slug** and **Description**.
3. Choose a **Display mode**: `Name` (text only), `Icon` (small circular badge), `Icon + Name`, or `Name + Icon`.
4. Pick a **Background color** and **Foreground (text) color** using the color pickers.
5. Choose an **Icon source**: **Dashicons** (search the grid and click any icon) or **Custom SVG** (click **Upload SVG** and pick a file from your media library).
6. Watch the **Live Preview** update as you change fields.
7. Click **Add New Label**.

![Create a Label in wp cafe](https://themewinter.com/docs/plugins/wp-content/uploads/sites/3/2026/05/SCR-20260510-lmif.png)

## **Step 3: Assign Labels to a Product**

1. Edit any WooCommerce product (**Products → All Products → Edit**).
2. Find the **Product Labels** metabox in the right sidebar (tag-style, same UX as product tags).
3. Type a label name and pick from the suggestions, or click **Choose from the most used Product Labels**.
4. Click **Update** to save the product.

![Assign Labels to a Product](https://themewinter.com/docs/plugins/wp-content/uploads/sites/3/2026/05/SCR-20260510-lmsg.png)

## **Step 4: Display Labels on the Frontend**

Labels are opt-in. Add `show_item_label="yes"` to any WP Cafe shortcode that renders product cards. Every WP Cafe shortcode supports it if already using the shortcodes

## **Step 5: Generate the Shortcode from the Admin**

1. Click **Settings** in the sidebar → **Shortcode** → **Online Food Order** tab.
2. Click the **Generate Shortcode** button to open the shortcode generation modal.
3. Set the **Show Item Label** dropdown to **Yes** → click **Generate**.
4. Paste the generated shortcode into any page and preview.

![genrate shortcode for showing product label](https://themewinter.com/docs/plugins/wp-content/uploads/sites/3/2026/05/SCR-20260510-locf.png)

## **Step 6: Display in Elementor Widgets**

Every WP Cafe widget that renders product cards has a **Show Product Labels** switcher in its settings panel:

- Menus List
- Food Menu Tab
- Food Location
- Location Menu
- Food Menu Slider (pro)
- Menu Tab With Slider (pro)
- Food Menu Load More (pro)

Toggle it to **Yes** and labels appear immediately in the Elementor preview.

![Elementor widget settings panel with the Show Product Labels switcher set to Yes](https://themewinter.com/docs/plugins/wp-content/uploads/sites/3/2026/05/SCR-20260510-louk.png)

## **Frequently Asked Questions (FAQ)**

| **Q1: I added show_item_label="yes" but no badges appear. What's wrong?** The product probably has no Product Labels assigned. Open the product edit screen and add at least one label in the **Product Labels** metabox. Labels are also hidden if `show_item_label` is missing or set to `"no"` — the default is `"no"` so existing shortcodes don't change behavior on upgrade. |
| --- |

| **Q2: Can I use the same label as a product tag and a product label?** Yes — they are independent taxonomies. Tags render through `show_item_status` and labels through `show_item_label`. Both can be enabled together; they render side-by-side in the same row using the same pill style, with labels carrying their custom colors and icons. |
| --- |

| **Q3: My SVG icon isn't showing up — only a colored circle. Why?** SVGs must be uploaded to the WordPress media library and selected via the **Custom SVG** picker. If the icon URL fails to resolve (file deleted, missing attachment), the label silently falls back to the **Name** display mode so the card never breaks. Check the term in the editor and re-pick the SVG file. |
| --- |