How to Add a 3 Column Price Section in WordPress

3 column price section-01

Perhaps you run a business and have a website up and running but showcasing your pricing isn’t always the easiest thing to do.  I wanted to show you an example of just how you can add a slick looking, multiple column price section to your website using WordPress, a StudioPress theme called “Altitude Pro” and some basic coding to get the job done.

Once you’ve downloaded Altitude Pro from StudioPress (aff link) and installed it on your WordPress site you are going to navigate to the “Widgets” section under “Appearance“.  You will notice that the main area of the website is divided into 7 sections giving you lots of options of how to customize your site using the Altitude Pro StudioPress theme.  We are just going to focus on one of them for the purpose of setting this up. You are going to use 4 text boxes, 1 for the text at the top and 3 for the 3 price options to show on your website.

For the first text widget you are going to use a combination of H2 and H4 header tags to style the top content before your pricing.  You will end up using the H4 header code for the title of this section and the H2 header for the content in this section.

3 column price section-03

For text widget 2 to 4 use a similar structure to what you see below and fill in the widget title.  This will end up giving you a bold and slightly larger price text, a bulleted list discussing various features of your products or services.

3 Column Price Section-02

A couple of things to make sure of are that you are:

  1. Check the “Automatically add paragraphs” checkbox to ensure the formatting is correct.
  2. Make sure you dot n’s the widget title in the first text widget but use it in the following ones where you discuss pricing.
  3. Follow a similar structure to what you see above when coding the widgets so that you get a similar look and style to you pricing section.

Once you are done simply save and review the changes on your WordPress site.  You can really play around with the styling and the coding to make sure that your pricing section looks amazing without too much work involved.

Leave a Reply

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

This blog is kept spam free by WP-SpamFree.