Custom Pricing Tables Using Images and Font Awesome 5
I recently had to make some custom pricing tables for a project and thought something similar might be useful for others, so I’ve created a pricing tables section for you to download and customize to match your site. I’ve added images and Font Awesome 5 icons but small square images can be used instead of Font Awesome, ideal size would be between 32px and 50px wide.
Some basic CSS knowledge is required, be sure to read through code comments.
Install Font Awesome 5
- First go here and copy everything in the code box. As of this post date it’s at version 5.0.12 but it may be a later version for you.
- then go to Divi theme options > integration and paste the code into the <head> area.
Import the layout into your Divi library
- Download the zip file using the Download button above.
- Unzip the file you downloaded and import the included .json file into your Divi library. After that it will be available for you to add as a section to any page/post using the Divi builder.
- If you’re new to Divi here are instructions on how to import a layout into your library.
- If you have other pricing tables and add this to that page you will have issues with images showing up (because each pricing table is automatically assigned a numerical value so my numbers won’t match yours).
Add the CSS and tweak
- Below is all the CSS you need to get it looking like the demo. You’ll need to replace the URL paths to your images for each table.
- The CSS can go in your Divi theme options > custom CSS box (recommended), child stylesheet, or page CSS panel.
{;} css code
/*******************************************/
/********** CUSTOM PRICING TABLES **********/
/*******************************************/
.custom-pricing-tables .et_pb_pricing_heading {
border-top-left-radius: 8px;
border-top-right-radius: 8px;
padding: 20px 10px;
}
.custom-pricing-tables .et_pb_pricing_table_wrap {
display: flex;
justify-content: space-between;
}
.custom-pricing-tables .et_pb_pricing_table {
padding-bottom: 50px;
border: none;
border-radius: 8px;
-webkit-box-shadow: 0 0 20px rgba(0,0,0,0.1);
-moz-box-shadow: 0 0 20px rgba(0,0,0,0.1);
box-shadow: 0 0 20px rgba(0,0,0,0.1);
}
.custom-pricing-tables .et_pb_featured_table {
margin-top: 30px; /* remove this line if you want the featured slightly higher than the others like default */
-webkit-box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
-moz-box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
}
.custom-pricing-tables .et_pb_pricing li span {
display: inline-flex;
}
.custom-pricing-tables .et_pb_pricing li {
font-size: 18px;
padding: 30px 3em 20px;
border-bottom: 1px dashed rgba(0,0,0,0.1);
}
.custom-pricing-tables .et_pb_pricing li:last-child {
padding-bottom: 20px;
border-bottom: none;
}
.custom-pricing-tables .et_pb_pricing_content {
margin-top: 190px;
padding: 30px 0;
}
.custom-pricing-tables .et_pb_pricing_content_top {
padding-bottom: 20px;
}
.custom-pricing-tables .et_pb_pricing_content_top:after {
content: "";
position: absolute;
left: 0;
bottom: -220px;
width: 100%;
height: 220px;
}
/*** INDIVIDUAL PHOTOS IN PRICING TABLES - position and size are repeated on purpose ***/
.custom-pricing-tables .et_pb_pricing_table.et_pb_pricing_table_0 .et_pb_pricing_content_top:after {
background: url("https://placehold.it/600x400"); /* replace URL path to your image for each */
background-position: center;
background-size: cover;
}
.custom-pricing-tables .et_pb_pricing_table.et_pb_pricing_table_1 .et_pb_pricing_content_top:after {
background: url("https://placehold.it/600x400");
background-position: center;
background-size: cover;
}
.custom-pricing-tables .et_pb_pricing_table.et_pb_pricing_table_2 .et_pb_pricing_content_top:after {
background: url("https://placehold.it/600x400");
background-position: center;
background-size: cover;
}
.custom-pricing-tables .et_pb_pricing_table.et_pb_pricing_table_3 .et_pb_pricing_content_top:after {
background: url("https://placehold.it/600x400");
background-position: center;
background-size: cover;
}
/*** FONT AWESOME ICONS ***/
.custom-pricing-tables .fa,
.custom-pricing-tables .fab,
.custom-pricing-tables .fal,
.custom-pricing-tables .far,
.custom-pricing-tables .fas {
color: #559CAD;
font-size: 22px;
width: 32px;
height: 32px;
text-align: center;
margin-top: 4px;
margin-right: 6px;
}
.custom-pricing-tables .et_pb_pricing li.et_pb_not_available,
.custom-pricing-tables .et_pb_pricing li.et_pb_not_available .fa,
.custom-pricing-tables .et_pb_pricing li.et_pb_not_available .fab,
.custom-pricing-tables .et_pb_pricing li.et_pb_not_available .fal,
.custom-pricing-tables .et_pb_pricing li.et_pb_not_available .far,
.custom-pricing-tables .et_pb_pricing li.et_pb_not_available .fas {
color: rgba(0,0,0,0.2);
}
/*** IMAGES INSTEAD OF FONT AWESOME ICONS ***/
.custom-pricing-tables .et_pb_pricing li.et_pb_not_available img {
opacity: 0.2;
}
/*** MEDIA QUERIES ***/
@media only screen and (min-width: 601px) and (max-width: 1920px) {
.custom-pricing-tables .et_pb_pricing li {
padding: 30px 1.5em 20px;
}
}
@media only screen and (max-width: 1330px) {
.custom-pricing-tables .et_pb_row {
max-width: 90% !important;
width: 90% !important;
}
}
@media only screen and (min-width: 1201px) {
.custom-pricing-tables .et_pb_pricing_table,
.custom-pricing-tables .et_pb_column .et_pb_pricing_table {
max-width: 24%; /* adjust this if you have less tables */
}
}
@media only screen and (min-width: 601px) and (max-width: 1200px) {
.custom-pricing-tables .et_pb_pricing_table,
.custom-pricing-tables .et_pb_column .et_pb_pricing_table,
.et_pb_column .et_pb_pricing_table {
max-width: 49% !important;
min-width: 49% !important;
width: 49% !important; /* adjust these if you have less tables */
}
}
Notes:
- Some basic CSS knowledge is required, be sure to read through code comments.
- If you have other pricing tables and add this to that page you will have issues with images showing up (because each pricing table is automatically assigned a numerical value so my numbers won’t match yours).
- I’ve assigned the section a class so the CSS will only affect this pricing table.
- I’m using a combination of module settings and custom CSS, I suggest looking through the module settings before attempting to edit.
- The prices and services are totally made up, please don’t take my fake tables as a guide for pricing!
- Images in the demo are not included.
- The background seamless pattern is included and I got it here.
- Screenfly is just an online emulator to give an idea of what a site/page looks like on multiple browser sizes. You’re still responsible for your own real world testing.
Really awesome. Nice tutorial about pricing table customization. Thanks for sharing this article.
Thank you!
Great layout. Thank you. I just can’t seem to be able to load images. I’ve followed all the instructions carefully, but no luck
Hi Mike! If you’re adding this to a page that already has pricing tables on it that will cause issues with images not showing up (because each pricing table has a number assigned to it). If you have a link I can take a look and tell you why it might be happening 🙂
Hey there, great job with these pricing lists, I’ve been looking for a pricing lists with a picture and you were the only one that made it, so ones again – big thanks! I used it in one of my sites, but it looks like there is some code (mine) overriding yours. Check this screenshot: https://imgur.com/clj34vV . Strange right? 🙂 When there is a few lines of text the lineup just doesn’t work… Is there any way to force it to line up even with many lines of text? It happens on my site, your DEMO is fine 🙂
Hi! To be honest blocks of text isn’t really what I intended for this, just titles, but it makes sense to want to use more text in some cases. It looks like they’ll align fine once each list item has equal amounts of text in each. Hope that helps, I appreciate you checking it out! 🙂
https://imgur.com/a/cyaZYWm
Hi Leslie! Beautiful work! We took the 4th column out and thought we got it right, but now the feature lists shoot horizontal vs. vertical (screen) http://snpy.in/aC7YDh.
Thanks for any help “unfixing” it! (=
Hi Andrew! It looks like a display: flex might’ve been removed somewhere, if you can post a link or email me at agirlandhermac@gmail.com I can help you out, I’ve used this with 3 columns before 🙂
Finally, a pricing table that doesn’t look cheap or outdated. Question for you: how do I add another section for 5 pricing choices instead of 4? I am not that up on CSS so in plain English would be great. Is it a matter of adding another line choice like the others underneath? I did that and it put under the table. I need it all on the same line so there are 5 prices on 1 line. Any help greatly appreciated! Again, thanks for doing this!
Hi Sunnnee, glad you like it! Honestly I never tried 5, it would require changing up the CSS though. Shoot me an email at agirlandhermac at gmail and I can try to help you out 🙂
This is really awesome thank you for sharing. I’ve searched through the CSS and I can’t see where it’s pulling in the text font from. I would like to match the font in the pricing table to same font on my website. Where in the CSS can I change the font?
Hi James! It’s pulling from the typography settings in the customizer, and there should be additional font settings in the module that you can still use even with my CSS added. Is there a specific area where you can’t find how to change the font?
Thanks for checking out my site by the way!