The Pricing Table Module that comes with Divi is simply awesome. It does the work we would normally download a plug-in for. But WordPress developers know that less plug-ins make for a better performing and secure website. And there are so many ways to customize the pricing table using some custom CSS, that you really don’t need to consider the plug-in anymore.

So here are a few tweaks I came up with so that we would not need to install another plug-in for this.

The first thing I did was create the Section that I want to use this module in. If you are new to sections, you can check out this great tutorial by Elegant Themes right here.

Since I am going to use three tables, I am going to need some horizontal space so I am going to use One Column.

001 - section

 

Now I am ready to insert my pricing table module.

 

002 - insert module

 

Now its time to create my tables. In my case I would like to use price ranges instead of a single price so I leave the “currency” and “per” fields blank . So my tables will look something like this.

 

003 - table data     003 - table data 2

 

And voila, you table will look something like this. But your colors may be a little different based on the color settings of your website.

 

004 - default table

Now lets just say you want to change it up a little. Change some colors, rounded corners, icons instead of bullets, font sizes (especially those ginormous price ranges).

Well that’s where the power of Divi’s custom classes and the magic of CSS comes in.

So the first thing I usually do is isolate this particular section so that my customization does not mess up any other areas of my site that might share some of the same code such as buttons, corners and bullets. To do this I open up the module and add a unique custom class.

In this case I added the following CSS class

.web-price-table

005 - custom class

 

Great. Now lets start adding some  STYLE!  Simply add the following code to your Custom CSS  box in your Divi ePanel or better yet, your child theme stylesheet.

Lets start by by changing up the heading text.

 

.web-price-table .et_pb_pricing_heading h2 {color: #fff; font-size: 22px; font-weight: 900;}

 

This little bit cleans up the text just below the heading text. Its going to modify the color, size, padding and weight of the text

 

.web-price-table .et_pb_best_value {color: #fff; font-size: 14px; display: block; padding: 5px 10px; font-weight: 500;}

 

Now lets change up that background color for those header boxes. The first element targets the regular columns and the second element targets the Featured Table. You can use whatever color you want by changing the #xxxxxx

 

.web-price-table .et_pb_pricing_heading {background-color: #1e73be;}
.web-price-table .et_pb_featured_table .et_pb_pricing_heading {background-color: #178624;}

 

Now its time to fix that ginourmous and crowded price range text.

 

.web-price-table .et_pb_sum {font-size: 30px;line-height: 0px;font-weight: 700;color: #4F545A !important;}
.web-price-table .et_pb_sum p {padding:10px 0px;}
.web-price-table .et_pb_pricing_content_top { border-bottom: 1px solid #ccc; padding: 8px;}

 

Almost there. I wanted my Most Popular Featured table to stand out a little so I gave it a little shadow to help it stand out above the others a little more.

 

.web-price-table .et_pb_featured_table {-webkit-box-shadow: 0px 0px 15px 5px rgba(157, 157, 160, 0.6); -moz-box-shadow: 0px 0px 15px 5px rgba(157, 157, 160, 0.6); box-shadow: 0px 0px 15px 5px rgba(157, 157, 160, 0.6);}

 

I also needed to tweak the spacing of each feature. Initially it was too much spacing the table was way too long. So this simple fix cut my column length down substantially

 

.web-price-table .et_pb_pricing li {line-height: 16px;padding: 0 0 15px 14px;position: relative;}

 

And now for the button

 

.web-price-table .et_pb_pricing_table_button {color: #fff !important; background: #1e73be;}

 

Now you are probably thinking thats a lot of work copying and pasting all those lines. Okay, I hear ya. If you just want to copy and past all the CSS above, here it is.

 

	.web-price-table .et_pb_pricing_heading h2 {color: #fff; font-size: 22px; font-weight: 900;}
	.web-price-table .et_pb_best_value {color: #fff; font-size: 14px; display: block; padding: 5px 10px; font-weight: 500;}
	.web-price-table .et_pb_pricing_heading {background-color: #1e73be;}
	.web-price-table .et_pb_featured_table .et_pb_pricing_heading {background-color: #178624;}
	.web-price-table .et_pb_sum {font-size: 30px;line-height: 0px;font-weight: 700;color: #4F545A !important;}
	.web-price-table .et_pb_sum p {padding:10px 0px;}
	.web-price-table .et_pb_pricing_content_top { border-bottom: 1px solid #ccc; padding: 8px;}		
	.web-price-table .et_pb_featured_table {-webkit-box-shadow: 0px 0px 15px 5px rgba(157, 157, 160, 0.6); -moz-box-shadow: 0px 0px 15px 5px rgba(157, 157, 160, 0.6); box-shadow: 0px 0px 15px 5px 		
		rgba(157, 157, 160, 0.6);}
	.web-price-table .et_pb_pricing li {line-height: 16px;padding: 0 0 15px 14px;position: relative;}
	.web-price-table .et_pb_pricing_table_button {color: #fff !important; background: #1e73be;}

 

Well those are the basics. I broke it down because I wanted you to understand each element and how to specifically target each one. That way you can feel more confident making additional changes

Now lets have some fun. The bullets are boring. I wanted to add some green check marks and some red x’s. To do that I had to upload the little icons I would use.

The I added this code. You can replace the url below with the url path of your images.

 

/*Change Bullets*/

	.web-price-table .et_pb_pricing li:before {
		background-attachment: scroll;
		background-clip: border-box;
		background-color: rgba(0, 0, 0, 0);
		background-image: url("http://quiroz.co/wp-content/uploads/2014/09/green-plus.png");
		background-origin: padding-box;
		background-position: 0 0;
		background-repeat: no-repeat;
		background-size: 50% 50% !important;
		border: medium none transparent !important;
		color: transparent;
		height: 16px;
		margin-left: -1px;
		margin-top: -5px;
		width: 16px;}

	.web-price-table li.et_pb_not_available:before {
		background-attachment: scroll;
		background-clip: border-box;
		background-color: rgba(0, 0, 0, 0);
		background-image: url("http://quiroz.co/wp-content/uploads/2014/09/red-x.png");
		background-origin: padding-box;
		background-position: 0 0;
		background-repeat: no-repeat;
		background-size: 50% 50% !important;
		border: medium none transparent !important;
		color: transparent;
		height: 16px;
		margin-left: -1px;
		margin-top: -5px;
		width: 16px;}

 

Are we having fun yet? Lets also round the corners off a bit.

 

	/*Rounded Corners*/

	.web-price-table .et_pb_pricing_table:nth-child(odd){
	    -webkit-border-top-left-radius:6px;
	    -webkit-border-bottom-left-radius:6px;
	    -moz-border-radius-topleft:6px;
	    -moz-border-radius-bottomleft:6px;
	    border-top-left-radius:6px;
	    border-bottom-left-radius:6px;}

	.web-price-table .et_pb_pricing_table:nth-child(odd) .et_pb_pricing_heading{
	    -webkit-border-top-left-radius:4px;
	    -moz-border-radius-topleft:4px;
	    border-top-left-radius:4px;}

	.web-price-table .et_pb_pricing_table:nth-child(even){
	    -webkit-border-top-right-radius:6px;
	    -webkit-border-bottom-right-radius:6px;
	    -moz-border-radius-topright:6px;
	    -moz-border-radius-bottomright:6px;
	    border-top-right-radius:6px;
	    border-bottom-right-radius:6px;}

	.web-price-table .et_pb_pricing_table:nth-child(even) .et_pb_pricing_heading{
	    -webkit-border-top-right-radius:4px;
	    -moz-border-radius-topright:4px;
	    border-top-right-radius:4px;}

	.web-price-table .et_pb_pricing_table{
	    -webkit-border-radius:6px;
	    -moz-border-radius:6px;
	    border-radius:6px;}

	.web-price-table .et_pb_pricing_heading, .web-price-table .et_pb_tab_active:first-child{
	    -webkit-border-top-left-radius:4px;
	    -webkit-border-top-right-radius:4px;
	    -moz-border-radius-topleft:4px;
	    -moz-border-radius-topright:4px;
	    border-top-left-radius:4px;
	    border-top-right-radius:4px;}

	.web-price-table .et_pb_featured_table{
	    -webkit-border-radius:6px;
	    -moz-border-radius:6px;
	    border-radius:6px;}

	.web-price-table .et_pb_featured_table .et_pb_pricing_heading, .web-price-table .et_pb_tabs_controls, .web-price-table .et_pb_column_1_3 .et_pb_tab_active:first-child, .web-price-table .et_pb_column_1_4 .et_pb_tab_active:first-child {
	    -webkit-border-top-left-radius:4px;
	    -webkit-border-top-right-radius:4px;
	    -moz-border-radius-topleft:4px;
	    -moz-border-radius-topright:4px;
	    border-top-left-radius:4px;
	    border-top-right-radius:4px;}

	.web-price-table .et_pb_pricing_table:first-child {
	    -webkit-border-top-left-radius:6px;
	    -webkit-border-bottom-left-radius:6px;
	    -moz-border-radius-topleft:6px;
	    -moz-border-radius-bottomleft:6px;
	    border-top-left-radius:6px;
	    border-bottom-left-radius:6px;}

	.web-price-table .et_pb_pricing_table:first-child .et_pb_pricing_heading, .web-price-table .et_pb_tab_active:first-child{
	    -webkit-border-top-left-radius:4px;
	    -moz-border-radius-topleft:4px;
	    border-top-left-radius:4px;}

	.web-price-table .et_pb_pricing_table:last-child {
	    -webkit-border-top-right-radius:6px;
	    -webkit-border-bottom-right-radius:6px;
	    -moz-border-radius-topright:6px;
	    -moz-border-radius-bottomright:6px;
	    border-top-right-radius:6px;
	    border-bottom-right-radius:6px;}

 

The end result? Tell me this is not the prettiest little pricing table you ever seen 🙂

006 - before  006 - after

 Okay, maybe not the prettiest but at least I had fun doing it 😉

You will need to replace the “.web-price-table” with the CSS Class you named that section.


Well that’s all for now. I hope you find this article useful.


STAY RELEVANT | BE INFORMED | SIGN UP NOW

IT DOES NOT TAKE LONG TO GET LEFT BEHIND!

You have Successfully Subscribed!

Pin It on Pinterest