10 Unique Price Table Examples for WordPress, and How We Designed Them

Today we are sharing our most valuable best practices for designing beautiful & highly converting price table designs with Elementor. 

Here in Elementor, our goal is not just to give you the tool, but help you use it. Today I want to focus on a newly added Pro widget, the Price Table, and show you a few examples of best practices for creating beautiful and effective pricing tables.

Our previous tutorial about designing hero scenes has gotten great feedback, and my hope is that this article will also help you design better pricing tables.

Before we get started, I invite you to check out the full video tutorial by Elementor FED Josh Marom. In the video, Josh explains just how to use every aspect of this new widget.

If you want to learn how we go about creating unique pricing tables, here are 10 examples of price tables designed in Elementor, including pro tips on how we designed them.

Price Table 02

1. The Rounded Corners Pricing Table

We start off with a simple price table, that uses the border radius and box shadows options to create a clean and modern design.

A good rule of thumb is to make sure you never overdo it with regards to features. For this price tables, three main features are enough to help the visitors quickly differentiate between the plans and choose the one that suits them more.

  • Create rounded corners

Price Table > Advanced > Background & Border > Border Radius > 10

Price Table 01

2. The Classic Pricing Table

This classic design shows all the elements to create a nice design. It includes an interesting use of background colors for the title and price sections. In addition, features are highlighted by check and times icons to highlight which features appear on each plan. We also give a more generous top and bottom padding to the pricing section, giving it more focus than the features that are more close together.

  • Set interesting background colors

Price Table > Style > Header > Background Color

PT > Style > Pricing > Background Color

Price Table 10

3. The Minimal Pricing Table

This design is effective because it sends a clear, hassle free message to the potential client. What you see is what you get.

This straightforward approach cuts down on any visitor hesitation and makes it easy to decide to go onboard. Whereas it is usually advised to downplay the free plan in favor of the paid one, this is the exception to that rule.

  • Thick top border color

 Price Table > Border > Top > 5px

Price Table 08

4. The Bordered Price Table

This PT uses one main color: red. By setting a different and thicker top border, we get a nicer effect for the whole table. The third plan is elongated and includes a green ‘hot’ ribbon. This sets it apart and focuses the attention on it. Because of the heavy use of the red color, the green ribbon really makes the third plan pop-out nicely.

To get the border effect, All boxes get a top solid red color of 8, and the left and right borders are different for each box. This prevents the borders between the price tables to be double in size.

  • Pricing plans that are attached to one another

Price Table #1: Advanced > Background & Border > Width > 8, 1, 1, 1
PT #2: Advanced > Background & Border > Width > 8, 0, 1, 0
PT #3: Advanced > Background & Border > Width > 8, 1, 1, 1
PT #4: Advanced > Background & Border > Width > 8, 1, 1, 0

  • Third box is heigher than the rest

Section > Layout > Content Position > Bottom

Price Table #3: Style > Header > Padding top & bottom > 20px

Price Table 06

5. The Icon Pricing Table

What is nice about Elementor widgets is that they work great combined. In this example, we combine the icon widget on top of the price table, so the Drupal, WordPress and Joomla icons appear on top. 

You can emphasize the most preferred plan in any number of creative ways. In this example, a simple solid black border on the column level and negative button background color are all it takes to do the trick.

  • Combine the Icon and Price Table widgets

Price Table > Advanced > Element Style > Margin top > ‘-20’ (To get rid of the default widget padding)

  • Add a black frame around the middle pricing table

Price Table #2 >Column > Background & Border > Width > 3

Price Table

6. The Cards Pricing Table

This unique card effect creates a really unique effect for the price table, making it much more visual and playful than before.

  • Set background image & opacity

Price Table > Advanced > Background & Border > Image

PT > Style > Header, Pricing, Features, Footer > Background Color > Grey, Opacity 50%

Price Table 04

7. The Single Focus Pricing Table

This pricing table features three ‘plain’ white plans, that are all overshadowed by the main crimson colored plan that is also bigger, features negative colors and is framed. The result is an interesting layout which should also convert nicely since the eye is automatically drawn to the Business plan. 

Here, we used a box shadow with no blur on the column to create the external red frame effect around the price table. We also had to add some custom CSS to bring the box shadow frame in front of the other price tables.

  • Set white and red frame effect

Column > Style > Background & Border > Color > #ffffff

Column > Style > Box Shadow > Yes, Blur > 0

Column > Advanced > Custom CSS: selector {z-index:2;}

  • Get the third price table to stick out on both sides

Section > Layout > Content Position > Middle

Price Table #3: Style > Header > Padding top > 10px

PT #3: Style > Footer > Padding bottom > 10px

Price Table 07

8. The Pop-Out Pricing Table

Even without reading the features one can come to the conclusion that this is a hotel resort price table. The smart use of a script font, icons, gold and dark-blue colors, drop shadows and background image, all help to give it the luxurious design we automatically assign to premium hotels.

To put more emphasis on the middle plan, we’ve made it wider, We also created a pop-out effect by playing with the border radius and box shadows.

  • Get the round edges

Price Table #1: Advanced > Background & Border > Border Radius > 10, 0, 0, 10

PT #2: Advanced > Background & Border > Border Radius > 10, 10, 10, 10

PT #3: Advanced > Background & Border > Border Radius > 0, 10, 10, 0

  • Make the middle price table wider

Price Table #1, #3: Column Width > 31%

PT #2: Column Width > 37.6%

  • Pop out the middle column in front of the others

Middle Column > Advanced > Custom CSS: selector {z-index:2;}

Middle Section > Layout > Content Position > Middle

Price Table #3: Style > Header > Padding top > 10px

PT #3: Style > Footer > Padding bottom > 10px

Price Table 05

9. The ‘Add to Cart’ Pricing Table

This is another example of matching another widget to the price table, this time an image widget. By using the Woo-Add to Cart widget, you can create landing pages that compare various products, and allows the visitor to add them to the WooCommerce cart with a click. You can also replicate this example to create not only pricing plans but top 5 product comparison pages that look amazing. 

  • Attach image

Image > Advanced > Element Style > Margin > -20

  • Add the Add to Cart button

Drag & drop ‘Woo Add to cart’ widget

Pair each button to the right product

 

Price Table 03

10.  The Extraordinary Price Table

Honestly, price tables can be so boring. They are still tables, what could be more boring than tables? I’ve seen many price tables that looked like they were pasted from Excel. Yikes!

In the example above we manage to bring our pricing table to life by using vivid colors, a white frame, semi-transparent backgrounds and box shadows. This way we manage to create a unique and much more interesting design.

  • Create a semi-transparent price table

Price Table > Advanced > Background & Border > Color > Opacity 50%

Conclusion

I hope you’ve enjoyed this short tutorial. Feel free to share your own best practices when designing price tables in the comments section below.

If you’d like to enjoy this widget, plus many more useful widgets and features, check out Elementor Pro. We’ve added some new Pro templates that include price table designs, to help you get started.

 

Liked This Article?

We have a lot more where that came from! Join 679,920 subscribers who stay ahead of the pack.
By entering your email, you agree to our Terms of Service and Privacy Policy.

About the Author

Ben Pines
Ben Pines
Ben Pines is Elementor's CMO. He has been in the online marketing industry for over 10 years, specializing in content marketing. WordPress has been Ben's platform of choice since the time it was used solely for blogging.

Share on

Share on facebook
Share on google
Share on twitter
Share on linkedin

Comments

25 Responses

  1. Thanks Ben! I love reading about all the insights and decision making that go into these template designs. My favorite take-away:

    “A good rule of thumb is to make sure you never overdo it with regards to features.”

  2. Hi, I am an Elementor user, and I have a problem, when I enter the page editor and try to access my media library I can not appear blank without being able to access my images, I disabled other plugins however the problem is not solved,

  3. Hi Ben,

    I’m having trouble duplicating ‘8. The Pop-Out Price Table’. In the image the center table is taller than the other two tables on both top and bottom, and it overlaps the other two tables

    The best I can get is for the center table to overlap the first table, but not the last table. Also, I can’t seem to get the content of the center table to be vertically even with the content of the other two tables

    – set the column gap on the entire section to ‘none’
    – set top and bottom margins of the center table’s column to -60
    – set the padding bottom of the center table element to 60
    – set a box shadow on the center table (this gets it to overlap the left table, not the right table)
    – set a z-index value of ‘2’ on the center table – z-index of ‘-1’ on the right table (seems to have no effect … I also tried setting ‘position: relative on both tables ‘selector’ element)

    Again – all of this makes the box shadow of the center table overlap the left, but not the right. And all of the center table’s content is higher vertically than the content of the left and right tables.

    How did you get that effect? Thanks

      1. Has any update been made on this? I am doing some research on price table plugins that have the monthly / yearly option. I would pay for this option

  4. Hi, any chance for a tooltip on the items? it’s quite basic functionality, however (unless I could not find it) it’s lacking here.
    Thanks!

  5. Hi all,

    I am creating a pricing table where one table has far less features than the other 2. Unfortunately the uneven height makes the table look quite unwieldy.

    How can I make the height of each table even out?

    Many thanks

  6. Hi, thank you very much for the useful article. It likes a shortcut to the important information to use “elementor plugin”. So I’m ready to start using it.

Leave a Reply

Your email address will not be published. Required fields are marked *

Want to learn how to build better websites?

Join 679,920 Elementors, and get a weekly roundup of our best skill-enhancing content.

By entering your email, you agree to our Terms of Service and Privacy Policy.