{"id":104629,"date":"2018-05-21T03:37:48","date_gmt":"2018-05-21T10:37:48","guid":{"rendered":"http:\/\/wpbeaveraddons.com\/?p=104629"},"modified":"2018-05-21T13:48:09","modified_gmt":"2018-05-21T20:48:09","slug":"dual-pricing-table-beaver-builder","status":"publish","type":"post","link":"https:\/\/wpbeaveraddons.com\/dual-pricing-table-beaver-builder\/","title":{"rendered":"How to Create Dual Pricing Table with Beaver Builder?"},"content":{"rendered":"

Sometimes showing just a single pricing table is not enough. There may be scenarios where the business plans require showing monthly\/annual\/lifetime pricing plans for your product versions. What do you do in that case?<\/p>\n

Display two pricing tables on the same page? Or create two different sales pages?<\/p>\n

I too was stuck in this dilemma quite some time back, but after all brainstorming, I could conclude only one thing – Display both tables on the same page but not at the same time<\/strong>.<\/p>\n

It sure does sounds like a riddle but its much more straightforward than that, and just so you know, we will do it without touching a single line of code and in no time \ud83d\ude09<\/p>\n

Let’s begin,\u00a0shall we?<\/p>\n

How to Create Dual Pricing Table with Beaver Builder?<\/h2>\n

Before we begin, make sure that you have the Beaver Builder as well as the PowerPack Pro\u00a0add-on\u00a0installed and activated.<\/p>\n

Step 1: Adding New Page<\/strong><\/p>\n

If you have an already existing pricing page, you can directly load it in the page editor, and if on the other hand, you do not have a sales page, you can create a new page too.<\/p>\n

\"\"<\/p>\n

Step 2: Adding Pricing Table Module<\/strong><\/p>\n

Now, in the editor, click on the “+” icon on the top right corner and select the group as PowerPack modules. Now look for the pricing tables module<\/a> and add it on the page by simple drag and drop.<\/p>\n

\"\"<\/p>\n

Step 3: Enabling Dual Pricing (Important)<\/strong><\/p>\n

Once you add the module, a settings window will show up. Now we will begin the editing part of the tutorial. Since we need to add dual pricing tables, click on the enable dual pricing toggle option. Dual Pricing settings will show up. Change the button text, spacing, color, background, border and other settings using the general tab.<\/p>\n

\"\"\"\"<\/p>\n

Step 4: Adding Pricing Tables<\/strong><\/p>\n

It is now time to edit individual pricing tables and its details. Click on the packages tab and click on the Edit<\/strong>\u00a0Package<\/strong> button.<\/p>\n

\"\"<\/p>\n

Step 5: Editing Package or Pricing Table<\/strong><\/p>\n

Give your package a proper title and add both the prices in the respective fields. You can add durations as well for the individual prices such as per month, per annum, per 5 websites, etc.<\/p>\n

\"\"<\/p>\n

Step 6: Adding Items<\/strong><\/p>\n

Now move on to the items tab<\/strong> and start adding one feature per field and click on the Add<\/strong> button.<\/p>\n

\"\"<\/p>\n

Step 7: Customizing Button<\/strong><\/p>\n

It’s time to edit the button from the Button tab<\/strong>. Change the text and enter the link for the button on the given fields. You can also set the link target window (same\/new), change the button structure, style, and colors from this tab.<\/p>\n

\"\"\"\"<\/p>\n

Step 8: Saving Package<\/strong><\/p>\n

If you want to change the margin as well as the background color of the package, move on to the style tab<\/strong>, and you can do all those changes here. When you have made all the desired changes, click Save<\/strong>.<\/p>\n

\"\"<\/p>\n

Step 9: Adding Other Packages<\/strong><\/p>\n

Go ahead and make the changes for the other packages as well. You can easily add more packages by clicking on the Add Package<\/strong> button. Alternatively, you can click on the duplicate button to copy the same pricing card and that way you’ll only have to change the details and not the styling.<\/p>\n

\"\"<\/p>\n

Step 10:\u00a0Designing Pricing Table<\/strong><\/p>\n

Now comes the styling part. Move on to the Style tab<\/strong> to make the styling changes. You can do multiple changes to the overall package column, featured title, package title, price, and the individual items.<\/p>\n

\"\"<\/p>\n

Step 11: Customizing Typography<\/strong><\/p>\n

On the other hand, if you want to make text changes to the pricing cards, you can do it from the\u00a0Typography tab<\/strong>. Change the font, font size, line height, text transform, letter spacing, etc. from this tab individually for\u00a0the featured title, package title, price, items and the button’s text.<\/p>\n

\"\"<\/p>\n

Step 12:<\/strong>\u00a0Finalizing Pricing Table<\/strong><\/p>\n

Once you have made all the desired changes, click on the Save button<\/strong>. Go ahead and press “P” to enable preview mode on the edit and try toggling the pricing tables.<\/p>\n

Step 13: Publishing<\/strong><\/p>\n

To make your pricing table live, click on Done<\/strong> on the top right corner. Then click on Publish<\/strong> button to make the changes live.<\/p>\n

\"\"<\/p>\n

Here is the final result-<\/p>\n

\"\"<\/p>\n

Tell us what you think of the variable pricing tables<\/a> feature in PowerPack. There are many other modules and templates<\/a> which come with the PowerPack – The Best Beaver Builder Addon<\/a> you might want to check out. Get PowerPack<\/a> now!<\/p>\n

If you liked this pricing strategy, do share it!<\/p>\n","protected":false},"excerpt":{"rendered":"

Sometimes showing just a single pricing table is not enough. There may be scenarios where the business plans require showing monthly\/annual\/lifetime pricing plans for your product versions. What do you do in that case? Display two pricing tables on the same page? Or create two different sales pages? I too was stuck in this dilemma…<\/p>\n","protected":false},"author":1811,"featured_media":107149,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"inline_featured_image":false,"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"categories":[27,12],"tags":[],"acf":[],"_links":{"self":[{"href":"https:\/\/wpbeaveraddons.com\/wp-json\/wp\/v2\/posts\/104629"}],"collection":[{"href":"https:\/\/wpbeaveraddons.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wpbeaveraddons.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wpbeaveraddons.com\/wp-json\/wp\/v2\/users\/1811"}],"replies":[{"embeddable":true,"href":"https:\/\/wpbeaveraddons.com\/wp-json\/wp\/v2\/comments?post=104629"}],"version-history":[{"count":0,"href":"https:\/\/wpbeaveraddons.com\/wp-json\/wp\/v2\/posts\/104629\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wpbeaveraddons.com\/wp-json\/wp\/v2\/media\/107149"}],"wp:attachment":[{"href":"https:\/\/wpbeaveraddons.com\/wp-json\/wp\/v2\/media?parent=104629"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wpbeaveraddons.com\/wp-json\/wp\/v2\/categories?post=104629"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wpbeaveraddons.com\/wp-json\/wp\/v2\/tags?post=104629"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}