• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar
  • Skip to footer

The Cre8tive Diva - WordPress Developer

Digital Nomad | Helping WordPress & Genesis Framework Website Owners All Over the World

  • Home
  • About
    • Accessibility Statement
    • Terms of Service & Privacy
  • Services
    • Blogger to WordPress Migration
    • Buddypress Installation
  • My Work
  • Blog
    • Tutorials
    • Five on Friday
    • Genesis Framework
    • Tipsy Tuesday
    • WordPress
  • Contact
Home » Add a Simple Pricing Table to Your Theme Without a Plugin

Add a Simple Pricing Table to Your Theme Without a Plugin

pricing-table-img1
On several occasions I have been contracted to add a really simple, no bells & whistles type pricing table for website owners who sell products and services. This is a really easy way to do it.

This tutorial will have you modifying your themes style sheet. If you are unfamiliar with modifying your style sheet or you do not want fuss with adding the pricing table CSS directly into your current theme, you can install and activate the Simple Custom CSS plugin first. However, you do not need a plugin to use these instructions.

Note: This pricing table code has been developed for themes with a min-width: 1080px wide. If your theme’s width is less than 1080px wide, you may need to reduce the percentage on Line 25 to accommodate your theme.

Add the Pricing Table CSS

The next thing you want to do is add the pricing table CSS by selecting the “View Raw” link at the bottom right of the code. You will want to highlight all of the code, then copy/paste the code into the Simple Custom CSS box. Save it.

Add the Content

Now we need to add the content that you will modify with your prices, list content, etc. If you have an existing page, you will only need to add this to that page. If not, you can create a new page. In either case, you will need to click the “Text” tab on the Edit screen before pasting your code. Again, select the “View Raw” in the bottom right corner of the code below. Highlight, then copy/paste the content into your page.

Edit the Content

You can clearly see the items you will need to modify in the content. Switching from Text to Visual will also show you the information that you can replace with your own content. But using Text may be a better way to make sure you code stays in tact.

To link the “Sign Me Up” button to a purchase page, eCommerce shopping cart, or other payment source – replace the pound (#) sign only on lines 10, 21 and 32 in the “href” with the appropriate URL.

That’s it! You are all done.

  • Like my Signature? Get the Signature Widget for Genesis right here!

  • FacebookTweetPinPrintShare1

    Filed Under: Tipsy Tuesday, Tutorials Tagged With: css, pricing tables, simple custom css

    Reader Interactions

    Comments

    1. Brenda Malone says

      May 21, 2016 at 10:04 am

      Very nice, quick and simple solution . . . without a plugin. Thank you!

    2. jared says

      July 16, 2016 at 12:23 am

      I’d like to congratulate you on being completely awesome. this saved me a ton of time! I hate bloating my websites with another plugin and another and another.

      • Anita C says

        July 16, 2016 at 7:33 am

        You’re welcome Jared. I am glad this was helpful for you.

    3. Karla Archer says

      August 10, 2016 at 2:00 pm

      Thank you! This worked perfectly. Always happy to avoid unnecessary plugin usage.

      • Anita C says

        August 10, 2016 at 2:02 pm

        You’re welcome Karla. This works great if you don’t need a huge one. Just something simple.

    Primary Sidebar

    It's just me and my dog Bella. I am a freelance web developer at Cre8tiveDiva.com. I build websites using WordPress and the Genesis Framework, WooCommerce and provide troubleshooting and support. I also build with Shopify. I love chocolate, lots of coffee!

    Sign Me Up!

    Receive my blog posts, tips and updates delivered to your inbox!

    Yes, Sign Me Up

    *By signing up you will receive new blogs, updates on products, services and important alerts.

    Categories

    • Design
    • eCommerce
    • Five on Friday
    • Fonts
    • Free Themes
    • Freebie Friday
    • Genesis Framework
    • Genesis Plugins
    • Genesis Themes
    • Genesis Untapped
    • Instagram
    • MailChimp
    • News
    • Plugins
    • Press This News
    • Social Media
    • Tipsy Tuesday
    • Troubleshooting
    • Tutorials
    • Uncategorized
    • Web Development
    • WooCommerce
    • WordPress
    • WordPress Plugins

    Footer

    Digital Nomad! I can be anywhere I wanna be now.

    Latest Blog Posts

    • Temporary Fix When Using Genesis Blocks Posts and Page Grid with Genesis Simple Share
    • How to Add Reading Time to a WordPress Genesis Child Theme Without a Plugin
    • How to Add “Shop” to WooCommerce Breadcrumbs when Using Yoast

    Looking for Something?

    Copyright © 2012–2023 · Designed with by Me! · Hosted on SiteGround