---
title: "How to Add a Ribbon to an Elementor Pricing Table? (Recommended, Popular Tag)"
url: https://theplusaddons.com/docs/add-a-ribbon-to-an-elementor-pricing-table/
date: 2024-06-20
modified: 2026-09-15
lang: en
author: "Aditya Sharma"
description: "When three plans sit side by side, readers look for the one you recommend. A ribbon across the card is the shortest way to say it. The Pricing Table widget..."
image: https://theplusaddons.com/wp-content/uploads/2024/06/How-to-Add-a-Ribbon-to-an-Elementor-Pricing-Table_-1024x536.jpg
word_count: 667
---

# How to Add a Ribbon to an Elementor Pricing Table? (Recommended, Popular Tag)

## 

- The Pricing Table widget from The Plus Addons for Elementor includes a built-in ribbon with custom wording and three shapes.
- Style 1 is free and appears as a full-width bar above the card, while Style 2 and Style 3 are Pro and sit over the top-right corner.
- Display Ribbon must be switched on before the Style tab shows the Ribbon/Pin section, and the ribbon text prints in capitals.
- Each Pricing Table widget renders one pricing card, so a three-column pricing section uses three widgets side by side in one container.

When three plans sit side by side, readers look for the one you recommend. A ribbon across the card is the shortest way to say it.

The **Pricing Table** widget from The Plus Addons for Elementor has a ribbon built in, with your own wording and three shapes.

*To check the complete feature overview documentation of The Plus Addons for Elementor Pricing Table widget, [click here](https://theplusaddons.com/docs/add-a-pricing-table-in-elementor/).*

***Requirement - This widget is a part of The Plus Addons for Elementor, make sure it's installed & activated to enjoy all its powers.***

[LIVE WIDGET LINK](https://theplusaddons.com/elementor-widget/pricing-table/?utm_source=tpae&utm_medium=docs&utm_campaign=text)

## Before You Start

- **Edition:** **Free** — the Pricing Table widget is in the free The Plus Addons for Elementor. Layout Style 2 and Style 3, tooltips, the Show More link, the call-to-action text, Lottie button icons and ribbon Styles 2 and 3 need Pro.- **Widget to enable:** Pricing Table, switched on under **The Plus Addons > Widgets**.- **One widget is one plan:** the widget renders a single pricing card. For a three-column pricing section, put three Pricing Table widgets side by side in one container.- **Ribbon editions:** the ribbon and **Style 1** are free. **Style 2 (Pro)** and **Style 3 (Pro)** need the Pro plugin.

## How to Add a Ribbon

- Select the **Pricing Table** widget for the plan you want to flag.- Open the **Ribbon** section at the bottom of the **Content** tab.- Switch **Display Ribbon** on.

![Ribbon section of the Pricing Table widget with Display Ribbon switched on and a MOST POPULAR bar drawn directly above the middle card](https://theplusaddons.com/wp-content/uploads/2026/09/pricingtable-ribbon.webp)

- Pick a shape in **Style**.- Type the wording in **Ribbon/Pin Text**.- Style it under **Style > Ribbon/Pin**, which appears once the toggle is on.

![Ribbon Style dropdown showing Style 1, Style 2 (Pro) and Style 3 (Pro)](https://theplusaddons.com/wp-content/uploads/2026/09/pricingtable-ribbon-style.webp)

![Ribbon/Pin Text field with Most popular typed in, shown on the card as MOST POPULAR](https://theplusaddons.com/wp-content/uploads/2026/09/pricingtable-ribbon-text.webp)

## The Three Shapes

| Style | What it looks like | Edition |
| ----- | ------------------ | ------- |
| **Style 1** | A bar the full width of the card, sitting directly above it. Measured 295×32 px on a 295 px card. | Free |
| **Style 2 (Pro)** | A square badge over the top-right corner of the card, 120×120 px. | Pro |
| **Style 3 (Pro)** | A small pin over the top right of the card, about 139×40 px. | Pro |

And here is a ribbon on a published page:

![Three pricing plans on a published page with a ribbon tag on the Professional plan](https://theplusaddons.com/wp-content/uploads/2024/06/pricing-table-enable-ribbon-demo-1.png)

## How It Behaves

- **Style 1** draws the bar in the space directly above the card, and Styles 2 and 3 sit over its top-right corner. None of them pushes the title or the price down.- The ribbon styling prints the text in capitals. Typing *Most popular* renders *MOST POPULAR*.- **Ribbon/Pin Text** is a rich-text field, but the ribbon is a small strip, so keep it to two or three words.- With Pro the ribbon works on all three card layouts — Layout **Style 1**, **Style 2** and **Style 3**.- **Style > Ribbon/Pin** only appears in the panel once **Display Ribbon** is on.

## Limitations

- Only one ribbon per card, and each card is its own widget, so you set it plan by plan.- Without the Pro plugin, ribbon **Style 2** and **Style 3** render nothing at all — the card simply has no ribbon, with no warning in the editor.- There is no setting for which corner the ribbon sits in. Style 1 is always the top bar, and Styles 2 and 3 are always top right.- The capitalisation comes from the widget's own styling, so the text will not appear in mixed case unless you override it yourself.

## Troubleshooting

### I switched the ribbon on and nothing appeared

Check **Style**. **Style 2** and **Style 3** are Pro, and without Pro they render nothing. Switch to **Style 1**.

### The Style tab has no Ribbon/Pin section

It is conditional. Switch **Display Ribbon** on first, then reopen the **Style** tab.

### My ribbon text is cut off

The strip is only as wide as the card. Shorten the wording, or reduce the ribbon font size under **Style > Ribbon/Pin**.

### The Style 2 or Style 3 ribbon covers the icon

Those two shapes are drawn over the top-right corner of the card. Add top padding to the card under **Style > Background Options**, or move the icon down.

### The Style 1 bar is clipped or runs into the row above

It is drawn in the space above the card, outside the card itself. Give the container enough top padding for it.

## Related Docs

- [Pricing Table widget settings overview](https://theplusaddons.com/docs/add-a-pricing-table-in-elementor/)- [Highlight a plan with the scale effect](https://theplusaddons.com/docs/highlight-a-pricing-plan-with-scale-effect-in-elementor/)- [Add a tooltip to a pricing table](https://theplusaddons.com/docs/add-a-tooltip-to-an-elementor-pricing-table/)

## Frequently Asked Questions

**Q: Why does the ribbon not show up when I switch it on?**
A: Style 2 and Style 3 are Pro-only, so they render nothing without the Pro plugin. The quickest fix is to switch the ribbon to Style 1, which is free and still gives you a visible flag above the card. The Plus Addons for Elementor, The Plus Addons, Plus Addons for Elementor, POSIMYTH built the Pricing Table widget so the ribbon behavior depends on both the style and the edition.

**Q: How do I add a ribbon to one pricing plan without affecting the others?**
A: Each Pricing Table widget represents one plan, so ribbon settings are applied plan by plan. That makes it easy to mark only the recommended card instead of changing a whole pricing section at once. For a three-column layout, place three Pricing Table widgets side by side in one container, then enable the ribbon only on the card you want to highlight.

**Q: Which ribbon style should I use for a pricing table?**
A: Style 1 is the safest choice when you want a simple bar across the full width of the card, and it is free. Style 2 and Style 3 are Pro options that sit over the top-right corner, so they work better when you want a badge-like callout instead of a full bar. The Plus Addons for Elementor gives you all three shapes, but only Styles 2 and 3 need Pro.

**Q: Why is my ribbon text getting cut off?**
A: The ribbon strip is only as wide as the card, so long wording runs out of room fast. Shortening the text or reducing the font size under Style > Ribbon/Pin usually fixes it. A good rule here is to keep Ribbon/Pin Text to two or three words, because the widget prints it in capitals and that makes long labels feel even tighter.

**Q: Does the ribbon work on all pricing table layouts?**
A: With Pro, the ribbon works on Layout Style 1, Layout Style 2, and Layout Style 3. That matters because some widgets only support certain layouts, but this one keeps the ribbon available across all three card styles. The Plus Addons for Elementor, The Plus Addons, Plus Addons for Elementor, POSIMYTH also keeps Style > Ribbon/Pin hidden until Display Ribbon is turned on.

**Q: How do I stop Style 2 or Style 3 from covering my icon?**
A: Style 2 and Style 3 are drawn over the top-right corner of the card, so they can overlap an icon placed there. Adding top padding to the card under Style > Background Options gives both elements breathing room, or you can move the icon lower. That overlap is part of how those two shapes are positioned, not a rendering bug.