So, I created some Wordpress maintenance and support packages and I decided it would be perfect to show them in a pricing table. There are many plugins available for adding pricing tables to a WordPress site. They are definitely convenient, but since they are already styled (some overly so), you may have to settle for something that does not coordinate with your brand. This can cause a potential client to focus more on the disconnect in style than they do the services you offer. After seeing my design friend, Carrie’s, delicately styled table, I had to ask her how she did it. Thankfully, she shared it with me and I’m sharing with you. You can check out Carrie’s site at CarrieLoves.com.
As long as you are comfortable with HTML and CSS, this should be a snap.
This page has the pricing table I am going to show you how to recreate. You can adjust the styling to coordinate with your color scheme and site stylesheet.
BEFORE you begin…
Make sure you are working on your own child theme OR a plugin which allows you to add custom CSS to your site. This keeps the CSS you are adding external to the active theme (or child the
me) and will not get overwritten when that theme is updated. In my case, I am using a Genesis child theme and definitely don’t want to modify that CSS file.
For this tutorial I am using my go-to custom CSS editor, Simple Custom CSS. For info on adding plugins, click here. If you have activated JetPack via WordPress.com, there is a CSS editor included.
Add the following code to your Custom CSS window.
And, the following HTML into the “Text” editor of your post creation window.
You should now see a simple, yet elegant, styled pricing table that you can customize any way you like using your own colors, alignment, border styles and fonts.
Hope this has been of some use to you!