Embed a pricing table into a WordPress site without using a plugin

In this article we're going to look at how you can embed a pricing table into a WordPress site without using a plugin.

Generate your pricing table

To create a pricing table we're going to use the Coveloping Pricing Table Generator, which allows you to live edit how it looks and then generate all the HTML & CSS you need to copy into your WordPress site. If you don't have a membership subscription to Coveloping, you can use the code below that was generated using the tool and edit it manually to suit your needs.

Design your pricing table

Using the pricing table you can click on any of the text areas to live edit the content. Use the buttons and dropdowns to add or remove rows and columns as you need to. Using the bottom options, you can adjust the styling to suit the design of your web site. You can read more about using the tool in our introduction to the tool.

1-editor

Once you're finished, click on the 'Code' link at the top to generate the HTML and CSS, which you can copy into your WordPress site.

step-2-generate-code

HTML

The markup for the pricing table consists of some div containers, and an unordered list with list items for each of the options. This HTML was generated for the pricing table in the above example.

<div class="pricing-table-container">
    <div id="pricing-table" class="pricing-table">
        <ul>
            <li class="heading">Bronze</li>
            <li class="price">20</li>
            <li>Starter package</li>
            <li>15 Projects</li>
            <li class="action">Buy Now</li>
        </ul>

        <ul class="feature">
            <li class="heading">Silver</li>
            <li class="price">60</li>
            <li>Intermediate package</li>
            <li>20 Projects</li>
            <li class="action">Buy Now</li>
        </ul>

        <ul>
            <li class="heading">Gold</li>
            <li class="price">80</li>
            <li>Professional package</li>
            <li>30 Projects</li>
            <li class="action">Buy Now</li>
        </ul>
    </div>
</div>

CSS

.pricing-table{ 
    display: inline-block; 
} 
.pricing-table ul{ 
    border-width: 1px; 
    border-style: solid; 
    border-color: #CCCCCC; 
    border-radius: 3px; 
    margin: 3px; 
    width: 200px; 
    text-align: center; 
    list-style: none; 
    float: left; 
    padding: 0px; 
    background-color: #FFFFFF; 
} 
.pricing-table ul li{ 
    padding: 5px; 
    background-color: #EFEFEF; 
    border-width: 2px; 
    border-color: #B83737; 
    border-radius: 0px; 
    border-bottom-width: 2px; 
    font-size: 14px; 
} 
.pricing-table li:nth-child(odd){ 
    background-color: #F7F7F7; 
} 
.pricing-table ul .heading{ 
    color: #FFFFFF; 
    background-color: #DF5D5D; 
    font-size: 16px; 
} 
.pricing-table ul .price{ 
    font-size: 25px; 
} 
.pricing-table ul .action{ 
    font-size: 14px; 
    color: #2A6496; 
} 
.feature{ 
    transform: scale(1.1); 
    box-shadow: 3px 5px 7px rgba(0,0,0,.7); 
} 
.pricing-table .action a{ 
    border-color: #B83737; 
    border-width: 0px; 
    border-radius: 2px; 
    background-color: #eeeeee; 
    padding-top: 5px; 
    padding-bottom: 5px; 
    padding-left: 15px; 
    padding-right: 15px; 
    border-style: solid; 
    color: #000000; 
} 
.pricing-table-container{ 
    text-align: center; 
}

Set up your pricing page

Now we have the code that we need, we can add this into our WordPress site.

Login to the admin area of your web site and go to 'Pages' > 'Add New'. Enter the page title, in this example we'll use 'Pricing' with a permalink of 'www.site.com/pricing'.

Add the HTML

In the main content area for your new page click on the 'Text' tab in the top right, and paste in the code. Note this will not work on the 'Visual' tab. If you preview the page now, you should see a bullet list of options without the styling.

step3-add-html

Add the CSS Styling

Edit the CSS file

There's alternative ways of adding the CSS to your site. The best method if you have access to your site files via FTP or deployment is to add the CSS to the bottom of your style.css file found in the root directory, or one of your sub css files if you're compiling your css with a technology like LESS or SASS.

Edit the CSS via the admin panel

Alternatively, you can edit the CSS directly from your admin panel. To do this, in the admin area go to 'Appearance' > 'Editor'. Edit the file titled 'style.css' (this should be open by default, if not see 'Styles' on the right hand side).

6-add-css-admin

WordPress.com Accounts

If you only have a WordPress account site (i.e. you just signed up on WordPress.com and you don't host the WordPress files yourself), then you can go to:

'Themes' > 'Customizer' > 'Custom Design' > 'CSS' and add the CSS there.

Note you may need a paid account for this feature.

5-add-css

Check out your pricing table

With the HTML and CSS added to your site, you can now browse to your page (e.g. yoursite.com/pricing) and you should see the full pricing table.

7-final

Troubleshooting

Conflicting CSS

If the pricing table doesn't look exactly the same on your page as it did in the generator, this is most likely due to conflicting CSS that already existed in your style.css file. If you're using the Chrome web browser you can right click the part of the pricing table that looks different and select 'Inspect element', this will allow you to see what CSS is being applied to that element and review what amendments you need to make to your CSS file.

Support

If you have a membership account with Coveloping and require assistance with integrating a Pricing Table into your site, you can get in touch via the contact form. Please provide a link to the location of your page so we can review the code if necessary.

David Bainbridge

Coveloping co-founder and regular contributor to the Coveloping blog. David is a contract web developer based in Bristol, UK also posting code snippets and tutorials on the Code Synthesis blog.

Coveloping Membership

Access to a range of developer tools, get your first month free

Start Your Free Trial

Don't miss out!

Sign up to our newsletter for the latest news from Coveloping

Leave a Reply

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

Code Copied!