---
title: "How to Add a Flip Box Style Pricing List in Elementor?"
url: https://theplusaddons.com/docs/add-a-flip-box-style-pricing-list-in-elementor/
date: 2024-06-21
modified: 2026-09-27
lang: en
author: "Aditya Sharma"
description: "Want a pricing list item that flips over on hover to reveal more detail? The Simple style does exactly that. This doc covers the Simple (flip) style specifically - see..."
image: https://theplusaddons.com/wp-content/uploads/2024/06/How-to-Add-Animated-Headings-In-Elementor-5-2-1024x536.jpg
word_count: 262
---

# How to Add a Flip Box Style Pricing List in Elementor?

## 

- Pricing List is a Pro widget in The Plus Addons for Elementor Pro, and it requires Elementor (free) installed and active.
- Simple style shows Title, tag(s), and Price on the front side, while the Description field appears on the back side when hovered.
- Hovering the pricing box triggers a real CSS 3D flip transform, and the description is only visible while hovering or on tap on touch devices.

Want a pricing list item that flips over on hover to reveal more detail? The Simple style does exactly that.

This doc covers the Simple (flip) style specifically - see the Settings Overview for every other option.

For the full settings tour of the **Pricing List** widget, see [How to Add a Pricing List in Elementor?](https://theplusaddons.com/docs/add-a-pricing-list-in-elementor/).

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

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

## Before You Start

- **Prerequisite:** [Elementor](https://wordpress.org/plugins/elementor/) (free) installed and active.- **Edition:** Pricing List is a **Pro** widget - it requires the paid version of The Plus Addons for Elementor. It does not exist in the free plugin.- **Widget to enable:** go to **The Plus Addons > Widgets**, search for **Pricing List** and turn its toggle on.

## Steps

- Add the **Pricing List** widget to the page.- From the **Style** control, select **Simple**.- Fill in the **Title**, tag(s) and **Price** as usual - these show on the front side.- Fill in the **Description** field - this shows on the back side, revealed on hover.

![Style control set to Simple](https://theplusaddons.com/wp-content/uploads/2026/09/pricing-list-simple-style.webp)

## How It Behaves

Confirmed on the front end: hovering the pricing box genuinely triggers a real CSS 3D flip transform, caught here mid-rotation. The front side (tag, title, price) rotates away to reveal the back side (the description text).

## Limitations

- Pricing List is Pro-only.- The description is only visible while hovering (or on tap on touch devices) - it is not shown alongside the front content.

## Related Docs

- [How to Add a Pricing List in Elementor?](https://theplusaddons.com/docs/add-a-pricing-list-in-elementor/)- [How to Create a Food Menu in Elementor?](https://theplusaddons.com/docs/create-a-food-menu-in-elementor/)

## Frequently Asked Questions

**Q: What do I need before adding a flip box style pricing list in Elementor?**
A: Elementor free needs to be installed and active, and the Pricing List widget is a Pro widget in The Plus Addons for Elementor. That matters because the flip effect is part of the paid version, not the free plugin. In The Plus Addons for Elementor, The Plus Addons, Plus Addons for Elementor, POSIMYTH provides this widget inside Elementor, so the setup only works once the Pro addon is installed and activated.

**Q: Why isn’t the Pricing List widget showing up in Elementor?**
A: The usual blocker is that Pricing List is a Pro widget and it has to be enabled first. In The Plus Addons for Elementor, The Plus Addons, Plus Addons for Elementor, POSIMYTH you need to go to Widgets, search for Pricing List, and turn its toggle on. If it still feels missing, the key check is whether the paid version is installed and activated, because this widget does not exist in the free plugin.

**Q: How do I make a pricing list item flip on hover?**
A: The Simple style is what creates the flip behavior. Set the Pricing List widget to Simple, then put Title, tag(s), and Price on the front side and use Description for the back side. The hover action triggers a real CSS 3D flip transform, so the front content rotates away instead of just hiding. That makes it useful when you want compact pricing cards that reveal extra detail only on interaction.

**Q: What content should go on the front and back of a flip box pricing list?**
A: Front-side content should be the Title, tag(s), and Price. The Description belongs on the back side and appears when the box flips. That split matters because the front stays clean and scannable while the back carries supporting detail. In The Plus Addons for Elementor, The Plus Addons, Plus Addons for Elementor, POSIMYTH this layout is built into the Simple style rather than requiring separate widgets.

**Q: Does a flip box pricing list work on touch devices?**
A: The description is revealed on hover or on tap on touch devices, so it still has an interaction path without a mouse. That’s important because the back side is not shown alongside the front content. If you’re designing for mobile-first traffic, keep that hidden-back-side behavior in mind so users know they need to tap to see the description.

**Q: What’s different between this flip style and a regular pricing list?**
A: This tutorial covers only the Simple flip style, where hovering triggers a CSS 3D rotation and reveals hidden description text on the back. A regular pricing list keeps its content visible without that interaction layer. For full settings beyond this style, use [How to Add a Pricing List in Elementor?](https://theplusaddons.com/docs/add-a-pricing-list-in-elementor/). If you’re building something like a menu layout instead of pricing cards, [How to Create a Food Menu in Elementor?](https://theplusaddons.com/docs/create-a-food-menu-in-elementor/) is the closer reference.