--- title: "How to Add a Flip Box Style Pricing List in WordPress?" url: https://nexterwp.com/docs/add-a-flip-box-style-pricing-list-in-wordpress/ date: 2024-12-11 modified: 2026-09-27 lang: en author: "Aditya Sharma" description: "Long descriptions crowd a price list. The name and the price are what people scan for; the detail only matters once something has caught their eye. Style 2 of the..." image: https://nexterwp.com/wp-content/uploads/2024/12/How-to-Add-a-Flip-Box-Style-Pricing-List-in-WordPress_-1024x519.jpg word_count: 763 --- # How to Add a Flip Box Style Pricing List in WordPress? ## Key Takeaways - Pricing List Style 2 places the tag, title and price on the front, and moves the description to the back, revealed by hovering. - Hover Effect sets the flip axis: horizontal turns the card about its vertical axis, and vertical turns it about its horizontal axis. - Nexter Blocks Free and Nexter Blocks Pro both support the Pricing List block, and the block is enabled under Nexter > Blocks in the WordPress dashboard. - Style 2 does not render an image, so style 3 is the only style that shows pictures; one Pricing List block equals one item, with no repeater inside it. Long descriptions crowd a price list. The name and the price are what people scan for; the detail only matters once something has caught their eye. Style 2 of the Pricing List splits exactly along that line — name and price on the front of a card, description on the back, revealed by hovering. *For every External Form Styler setting in one place, see the [main Pricing List guide](https://nexterwp.com/docs/add-a-pricing-list-in-wordpress/).* [LIVE BLOCK LINK](https://nexterwp.com/nexter-blocks/blocks/wordpress-pricing-list/) ## Before You Start - **Edition:** Free — works in Nexter Blocks (free) and with Nexter Blocks Pro.- **Block to enable:** Pricing List, switched on under **Nexter > Blocks** in your WordPress dashboard.- A **Pricing List** block already on the page — see the [main Pricing List guide](https://nexterwp.com/docs/add-a-pricing-list-in-wordpress/). ## Steps - Select the **Pricing List** block and set **Style** to **Style 2**. - Fill in the **tag**, **title** and **price** — these appear on the front. - Put the detail in the **description** — this goes on the back. - Choose the **Hover Effect**: horizontal turns the card sideways, vertical turns it over. - Publish and hover the card on the real page — it does not flip in the editor. ![The pricing card showing its front, name and price](https://nexterwp.com/wp-content/uploads/2026/09/pl-fe-flip-front.webp) ![The pricing card mid-flip, showing the description on its back](https://nexterwp.com/wp-content/uploads/2026/09/pl-fe-flip-back.webp) > ***In the flip style the description moves to the back.** Measured: the front carried the tag, title and price, and the description was on the reverse. It is not hidden — it is on the face the visitor sees after hovering.* ## How It Behaves The Pricing List block is one row of a menu or price list — a tag, a title, a description, a price, and in one of the three styles an image. - **Measured on a published page:** hovering the card rotated the front face a half turn and brought the back face square to the reader — about the vertical axis with Hover Effect set to horizontal, and about the horizontal axis when set to vertical.- **In the flip style the description moves to the back.** Measured: the front carried the tag, title and price, and the description was on the reverse. It is not hidden — it is on the face the visitor sees after hovering.- **The hover effect sets the axis.** Measured: horizontal gives the card a half turn about its vertical axis, vertical turns it about the horizontal one. The wrapper carries `flip-horizontal` or `flip-vertical` to match.- **No image in this style.** Measured, an image set on a style 2 block is not rendered — style 3 is the one with pictures.- **One block is one item.** There is no repeater inside it, so a menu of ten dishes is ten Pricing List blocks stacked up, not one block with a list in it. Build the first one, style it, then duplicate it. ## Limitations - **Hover is not available on touch screens.** A phone visitor has no way to turn the card, so anything essential must be on the front — do not hide the price or an allergy warning on the back.- **The Box Align setting currently has no effect.** Measured on published pages across every style and every value: the alignment class is never added to the markup, so the block's own alignment rules never apply. Use the block's ordinary alignment and spacing controls instead. This is reported to the development team.- **The flip does not run in the block editor** — publish the page to test it.- **Both faces share one height**, so a long description on the back can leave the front looking empty. Keep the two sides roughly balanced. ## Troubleshooting ### The card does not flip Check you are on the published page rather than the editor, and that **Style** is set to 2. Measured: the flip runs on the front end only. ### My description has disappeared It is on the back of the card, which is the point of this style. Hover to see it. ### Nothing happens on my phone There is no hover on a touch screen. Put anything the visitor must see on the front, or use style 1 or 3 where everything is visible at once. ### My image is not showing **Only style 3 shows an image.** Measured: the same block given the same picture rendered no image at all in styles 1 and 2, and the image in style 3. If you want photographs beside your items, style 3 is the only choice — choosing an image in the other two styles does nothing and gives no warning. ### The card is much taller than its content The front and back share a height, so the longer of the two sets it. Shorten the description or accept the space. ## Related Docs - [Add a pricing list in WordPress](https://nexterwp.com/docs/add-a-pricing-list-in-wordpress/)- [Create a food menu in WordPress](https://nexterwp.com/docs/create-a-food-menu-in-wordpress/)- [Advanced tab settings](https://nexterwp.com/docs/use-advanced-tab-in-nexter-blocks/) ## Frequently Asked Questions **Q: What do I need before adding a flip box style pricing list in WordPress?** A: Nexter Blocks free or Nexter Blocks Pro can handle Style 2, but the block itself has to be enabled under Nexter > Blocks in your WordPress dashboard. You also need a Pricing List block already on the page, because this style changes an existing item rather than creating a new list from scratch. That matters if you are building a menu or price list with multiple items, since each item is still one separate block. **Q: Why does the description move to the back in Style 2?** A: Style 2 is built to split the card into two faces: tag, title, and price stay on the front, while the description moves to the back and appears on hover. That keeps the front scannable for quick browsing and hides the extra detail until someone is interested. On a published page, hovering rotates the card and reveals that back face instead of removing the description. **Q: How do horizontal and vertical hover effects differ on a flip box pricing list?** A: The hover effect changes the axis of the flip. Horizontal turns the card about its vertical axis, while vertical turns it about its horizontal axis. In practice, both reveal the back face, but they feel different visually. The wrapper class also changes to match, using flip-horizontal or flip-vertical. **Q: Why isn't my pricing list card flipping in the editor?** A: The flip runs on the front end only, so the block editor will not show it. Publish the page and test it on the real page instead. Style also has to be set to 2, because that is the flip layout. This catches a lot of people who think something is broken when they are only previewing inside the editor. **Q: Can I use a flip box style pricing list on a phone?** A: Hover does not exist on touch screens, so a phone visitor cannot turn the card at all. Anything essential has to stay on the front face, especially price or warnings like allergy notes. If you need everything visible at once, style 1 or 3 is safer than hiding details on the back. **Q: Why is my image not showing in a flip box pricing list?** A: Style 2 does not render images. The page says style 3 is the one with pictures, and testing showed that an image set on styles 1 and 2 did not appear at all. If photos need to sit beside your items, use style 3 instead of expecting an image field to display in this flip layout.