Sep 182014
 

Add Pricing Table To Suffusion Advanced, shows you how simple it is to customize the css code and change the background colors, text and much more.

Last Updated: August 8, 2018

Latest News: I have added an affiliated link below.

Add Pricing Table To Suffusion Tutorials:

Add Pricing Table To Suffusion Advanced

Step 1 ) To add the new custom code to Suffusion, go to Appearance -> Suffusion Options -> Back-end -> Custom Includes and add some custom styles. See images below.

Step 1-a ) Go to Appearance -> Suffusion Options as illustrated in the following image.

pricing-table-suffusiton-options

Step 1-b ) Click on Back-end as illustrated in the following image.

pricing-table-suffusion-backend

Step 1-c ) Click on Custom Includes as illustrated in the following image.

pricing-table-custom-includes

Step 2 ) Edit the following CSS code and add what ever color you prefer. I have added two different blue’s a dark and a much lighter blue. Just to show you how simple it is to make some changes. See images below.

  • #ptp-2656 div.ptp-plan = remember to change the number. Your table ID number will be different to this one.
  • #ptp-2656 div.ptp-price = remember to change the number. Your table ID number will be different to this one.

The two css class above represent different sections of the table. The following css class div.ptp-plan controls the title field and the following css class div.ptp-price controls the price field.

Here are two websites that will help you pick a color or a gradient color.

pricing-table-custom-style

Step 2-a ) Make sure you save your changes. See image below.

pricing-table-save-changes

New Table Design

Step 3 ) The following image displays the new colors added above.

pricing-table-modified-display

The above is just an example of what you can do with this great plugin. However if you want more flexibility and the ability to customize your tables even further I suggest you purchase the pro version. Click on the following URL Fatcatapps(This is an affiliated link. I get a small commission if you sign up or make a purchase.)

I hope you have enjoyed this simple tutorial. I will be updating this plugin from time to time so keep coming back for the latest. If you have any questions please let me know.

Enjoy

Manuel Ballesta Ruiz is a web developer, Blogger and WordPress Enthusiast.

 Leave a Reply

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

(required)

(required)

The following GDPR rules must be read and accepted:
This form collects your name, email and content so that we can keep track of the comments placed on the website. For more info check our privacy policy where you will get more info on where, how and why we store your data.