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.
Update: A 980 media query was added in case you see your 4th column dropping too much on tablet/mobile.
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 (max-width: 980px) {
.et_pb_column .et_pb_pricing_table:nth-child(n+3) {
margin-top: 20px;
}
}
@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.
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!
Hi Leslie!
First of all, thank you so much for your pricing table! I love the design and the image feature. I’ve tried it on my website (it’s currently behind a “Coming soon”) and the table is displayed in full width, but when I try to reduce its width to an 80% the images are cropped and everything gets reduced vertically. Perhaps I’m not explaining myself very well so here are two screenshots:
Full Width: https://imgur.com/a/Q63z4Sl
100px padding: https://imgur.com/a/T0S878B (I’ve tried reducing the width in Divi through different setting but the result is always the same)
Is there any way to reduce the table proportionally to avoid this? I’ve been touching some CSS but I’m getting nothing.
Could you help me, please?
Hi Diego! I’m setting the width of that whole row for certain screen sizes in the code so if you change something in the module it may not look how you want. Did you try changing the 90% to 80% in the CSS that I give?
When you reduce the row width it will make the content skinnier because you’re telling it to use less space so four columns at 80% may look a bit squished. If you don’t plan to use font awesome you can take the code bits out for those, I can’t tell from the screenshots if you already did that but that would help free up some space.
As far as the images since the height is set to 220px high in the code you can reduce the height of those to 200px and play with that number, that should make them “fit” better.
It’s harder for me to troubleshoot without seeing the page but you can email me if you don’t want to post the link here.
agirlandhermac @ gmail