Pricing Table in WordPress Using Kadence Blocks

In this Kadence Blocks tutorial we will learn how to create a pricing table in WordPress using Kadence Blocks.

The methodology shown in this article can be applied to any WordPress theme. This pricing table will involve 2 pricing charts with a toggle that shows monthly and yearly billing.

I am going to create this pricing table on the free version of Kadence WordPress theme, and use the free Kadence Blocks plugin.

To create a pricing table in WordPress using Kadence Blocks

  1. Start with 3 Kadence Advanced Text Blocks for title, subtitle, and description
  2. Add a Kadence Tabs block and customize the tab title
  3. Insert a Kadence Row Layout of 2 columns (2 sections) to Tab 1
  4. Customize padding, margin, border
  5. Add Kadence Advanced Text blocks for product title and price
  6. Insert Kadence Icon List block and write product features
  7. Add the Kadence Button block for CTA
  8. Copy styles and blocks from section 1 to section 2
  9. Customize colors in Section block 2
  10. Add more product features to Kadence Icon List block in section 2
  11. Copy Kadence Row Layout block from Tab 1 and paste it to Tab 2
  12. Update content under Tab 2

In the article, we are further going to break down a few steps and see a step-by-step approach of creating a monthly/yearly pricing table using Kadence Blocks.

For more information about the number of blocks, features, and the Kadence design library, check out my Kadence Blocks review post.

WordPress Pricing Table Design Used For Inspiration

We are going to use the following design for creating our pricing table.

This image is taken from the free version of Kadence Blocks design library.

kadence blocks design library sample image for inspiration

Our pricing table will be similar, yet slightly different from the image shown above.

In our pricing table below, we will add a Kadence blocks tab block to display ‘Monthly’ and ‘Yearly’ tabs that differentiates the pricing plan.

Plus, add box shadow to both the sections of Kadence row layout block.

How To Create Pricing Table in WordPress Using Kadence Blocks?

Time needed: 20 minutes

Kadence blocks comes with a very useful block called Tabs Block.
With the help of this block we are going to create a toggle like effect that displays separate billing information for monthly and yearly plans.

  1. Start with Kadence Advanced Text Block

    Start the procedure of creating the pricing table by first inserting a Kadence Advanced Text block.
    We will write the text as ‘Pricing Plans’
    Change it to H1 tag, align the text to center, and change the font size to 54 pixels.

    main title of pricing table created using kadence advanced text block

  2. Add another Advanced Text Block for subtitle

    After adding the title, add another Kadence Advanced block to create a subtitle or sub heading that comes right after the title.

    We will add ‘Powerful Upgrade Options’ text to this block.

    Following changes are made to this text block;

    Tag of H2
    Align to center
    Font size – 22 pixels
    Letter spacing – 5 pixels
    Text transform – Uppercase
    Font weight – Extra Bold 800
    Text Color – 2D985E
    Top Padding – 5 pixels

    creating h2 for pricing table with kadence advanced text block

  3. Insert the 3rd Advanced Text block

    We are going to add one more Kadence Advanced Text block to mention pricing description.
    The text written is ‘Billing: Save 18% on yearly plans.’

    This has to be a paragraph block with more emphasis on ‘Save 18%’. Therefore, we need to bold the text, increase its font size, give a highlighting background color, and change the highlighted text color.

    Settings done on this block;

    Advanced text block – Changed to paragraph tag
    Text alignment – center
    Font size – 22 pixels

    Highlight Settings;
    Background color – 2D985E
    Border width – 1 pixel
    Text font size – 24 pixels
    Text color – FFFFFF
    Padding – top: 1 px, right: 2 px, bottom: 4 px, left: 2px

    advanced text block for description of pricing table in wordpress using kadence blocks

  4. Add a Kadence Blocks Tabs Block

    After the three Advanced text block, it is time to create the actual pricing table.

    Since, we want to make a pricing table that displays monthly and yearly pricing plan, add a Kadence Blocks Tabs block.

    choose initial style of kadence tabs block
    I have chosen the 3rd style in this activity.
    Following that, remove the third tab. Since, we are only going to add data to monthly and yearly tabs.

  5. Customize the Tabs Title Color

    Start with changing the labels of the tabs to ‘Monthly’ and ‘Yearly’.

    Change Tab title color, background color, and border color for normal, hover, and active conditions.

    tab title color customization in kadence blocks

    Colors used for Tab in normal condition;
    Title color – 2D985E
    Background color – FFFFFF
    Border color – 2D985E

    Colors used for Tab in hover condition;
    Title color – FFFFFF
    Background color – 2D985E
    Border color – FFFFFF

    Colors used for Tab in active condition
    Title color – FFFFFF
    Background color – 2D985E
    Border color – 2D985E

  6. Further Customizing Tabs Title


    Under Tab title width/spacing/border settings change to %Width tab and customize the following;

    Columns – 4
    Gutter width – 10 pixels
    Top padding – 8 pixels
    Right padding – 20 pixels
    Bottom padding – 8 pixels
    Left padding – 20 pixels
    Top margin – 20 pixels
    Border width – Overall 2 pixels
    Border radius – Overall 5 pixels

    Increase the Tabs title font size to 18 pixels and under Tabs structure settings, set max width to 800 pixels.

    customizing tabs title and kadence structure settings

  7. Insert Kadence Row Layout Block to Tab 1

    It is time to add a Kadence Row Layout block to the first tab (Monthly Tab).

    It will be a two-column Row Layout block holding features and pricing information of two products.

    Do the following changes;

    Column gutter width – 40 pixels
    Top padding – 25 pixels
    Right padding – 20 pixels
    Bottom padding – 25 pixels
    Left padding – 20 pixels

    kadence row layout block of 2 sections for 2 products

  8. Add Padding, Margin, and Border

    Since, we have selected a 2 column Row Layout block, Kadence blocks gives 2 sections in the block.
    You need to add appropriate padding, margin, and border to the first section, before adding text to it.

    Optionally, you can also apply box shadow effect to your section, making it pop out.

    The settings done at my end are as follows;

    Top padding – 30 pixels
    Right padding – 30 pixels
    Bottom padding – 30 pixels
    Left padding – 30 pixels
    Top margin – 40 pixels
    Border color – E6FDF4
    Border width and radius – 4 pixels overall and 10 pixels overall respectively
    Box shadow – Color: 000000 with alpha: 0.2; X: 0, Y:14, Blur: 25, Spread: -10

    styling kadence row layout block section

  9. Insert Kadence Advanced Text Block for product title

    After styling the section, add an Advanced Text block for title of product 1.

    Add text, change the tag to paragraph, and align to center.

    I have used;

    Text color – 718096
    Font size – 24

    Apply colors according to your brand. In this article, we are just trying to create the pricing table according to sample design.


    kadence advanced text block for title of product 1

  10. Add another Advanced Text Block for price value

    You can either duplicate the previous Advanced text block or add a new one.

    In this Kadence Advanced Text block, we will add product’s price.

    Just make sure to keep the tag as paragraph, align to center, change the text color, font size, and give additional font weight.

    Our customization;

    Text color – 2D3748
    Font size – 40
    Font weight – Bold 700
    Top Margin – -20 pixels

    kadence blocks advanced text block for product 1 price

  11. Insert Kadence Icon List Block

    Next, you’ve got to insert a Kadence Icon List block for writing product features.

    Add your product features, search check from the default set of Kadence icons, and change icon color.

    Leave everything else to default, change Kadence icon color to 2D985E

    adding product 1 features via kadence icon list block

  12. Add the Kadence Advanced Button Block

    After completing the product features, it is now time to add a call to action.

    For this, we are going to insert a button with the text ‘Buy Now’

    Align the Kadence Advanced Button block to the center, increase the text font size, button size, and overall button width.

    Plus, also change the button’s color according to the color palette you’ve been using, for normal and hover conditions.

    Optionally, you can also change the button text transform to uppercase.

    1st Section Button 1 settings done at my end are as follows;

    Font size – 18 pixels
    Button size – Medium
    Button width – Full

    Normal Color Settings
    Text color – 2D985E
    Border color – 2D985E

    Hover Color Settings
    Text color – FFFFFF
    Background color – 2D985E
    Border color – 2D985E

    Text transform – Uppercase

    kadence advanced button block for pricing table in wordpress
    This completes customizing Section 1 of the Row Layout block.

    Now, we will work on Section 2.

  13. Copy and Paste Styles from Section 1 to Section 2

    Before adding text to this section, first lets copy and paste styles from section 1 to section 2.

    To do that, click on the 1st section of the Row Layout block and then click on Copy/Paste Styles option and copy styles

    Now, the styles are copied. After that, from the list view, click on the 2nd section and paste styles.

    This will paste all the styles like padding, margin, border, border radius, background colors, etc. Apart from the top margin, we will leave all the other padding and margin styles and only customize border color and background color.

    kadence blocks section copy/paste styles option

  14. Customize Section Background, Border, and Box Shadow Color

    Since, we have copied styles from the 1st Section, you need to change the background color, remove border color, and add a different box shadow color that contrasts well with the 2nd Section’s background color.

    Plus, you need to also change the top margin of the section from 40 pixels to 0.

    The settings are as follows;

    Section background color – 2D985E
    Border color – none
    Box shadow color

    Leave the box shadow values as it is.

    customizing kadence row layout block 2nd section

  15. Add Content to 2nd Section

    For doing this, simply copy all the blocks from Kadence Row Layout’s 1st Section, insert a Gutenberg paragraph block to the 2nd section, and paste all the blocks.

    copy multiple kadence blocks from kadence section block to complete the pricing table in wordpress

  16. Customize Colors in 2nd Section

    Directly copying the blocks will paste similar colors. Whereas, our 2nd Section is in contrast from the first one.

    The advantage of copying blocks is that your design gets free from human error and you also save a lot of time. Customizing fonts or colors do not take a lot of time.

    Section 2 content customization settings;

    Product title text color – FFFFFF
    Price text color – FFFFFF
    Icon list text color – FFFFFF
    Icon color – FFFFFF

    2nd Section Button 1 Settings
    Font size – 18 pixels
    Button size – Medium
    Button width – Full

    Normal Color Settings
    Text color – FFFFFF
    Border color – FFFFFF

    Hover Color Settings
    Text color – 2D985E
    Background color – FFFFFF
    Border color – FFFFFF

    customizing colors for all the kadence blocks in the 2nd section

  17. Add more product features

    Since, this section is for the flagship product, add more product features in the 2nd Section of the Kadence Row Layout block.

    Click on the icon list and then click the plus icon to add more features.


    add more lists to the kadence icon list block

    By now, you’ve completed the monthly Tab block pricing table.

    It is time to add content to the yearly Tab block.

  18. Add content to Kadence Blocks Tab 2

    We have already labelled Tab 2 as ‘Yearly’ and completed its basic design.

    Now, you just need to copy all the blocks. But, it has to be done carefully.

    From the list view, locate and click the Kadence Row Layout block under Tab 1.
    Then click on the three dots and select Copy Block.
    Now, go to the Kadence Tab 2 block, and add a paragraph block.
    Paste the copied Row Layout block to that paragraph block.
    You will see an identical pricing table design.

  19. Update Content under Tab 2

    You will need to update the price value and some content under product features.

    Apart from that, your pricing table in WordPress using Kadence blocks is completely ready.

    Have a look at the image below.

    kadence blocks tab 2 ready with pricing table details

List View of the Kadence Blocks Pricing Table

For your reference I am adding the list view showing all the blocks used one after another.

list view of kadence pricing table
Kadence Blocks Pricing Table in WordPress

The best part about Kadence WP is that they offer enough blocks with their Kadence block free version, that you can easily create a pricing table in any WordPress theme.

Plus, the Kadence Tabs block really does the job of a toggle switch over pricing tables.

Let me show you the front end look of our completed pricing table.

Kadence Blocks Pricing Table with Monthly/Yearly Toggle

In some cases both the tables have equal amount of features and you’d want the sections to be of equal height.

In that case, click on the Row Layout block, go to Kadence Structure settings, and enable Inner Column Height to 100%

If you haven’t checked out Kadence Blocks yet, have a look at all the blocks and features available.


Conclusion

I hope now you can easily create a Kadence blocks pricing table in any WordPress theme.

The process is a little long but once created, you can convert it into reusable blocks and use the pricing table later as well.

In the end, if you have any questions, feel free to ask them in the comments section below.

Share and Enjoy !

Shares
Ankur Purecha
Ankur Purecha

I am in love with WordPress, building websites, doing SEO, and all that kind of stuff. I generally write about WordPress, Blogging, and SEO on BloggingIdol.

Articles: 104

Leave a Reply

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

Shares