One of the things I love most about owning my own business is the community of fellow designers that are out there, whom I only know via the Internet, who are willing to share their expertise and lend a hand. As an added bonus I luckily also have a designer friend, Charissa, who lives close by and we have collaborated on a few different projects, most recently the Isola Bella Shop ecommerce website. When we’re not spending time increasing Starbucks’ bottom line, we’re helping each other out with everything from bits of code, design advice, to lifting each other up when we need it most.
Charissa recently asked me about my pricing tables I have implemented on my WordPress, Blogspot and maintenance package pages. After I sent her the code I was using she generously shared on her blog a DIY for all you other WordPress (Genesis) theme user people out there.
And, what’s even better is I talked her into doing a guest post on my blog to share the knowledge…
ADDING A STYLED PRICING TABLE TO A WORDPRESS SITE WITHOUT A PLUGIN
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.
As long as you are comfortable with HTML and CSS, this should be a snap.
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 theme) 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!