Customizing the Pricing Table

[dgarsa]

Hello,

I am currently creating a pricing table for my webpage and there’s a few things I have not been able to find how to modify. I will list my questions and hope for the best. Thanks in advance!

1 - I want to cutstomize each table invididually, I’m using the free, bronze, silver and gold memberships and I want the header background, pricing background and button color of each table to be colored accordingly (with the possibility to change the text color if needed, for example, to white instead of black).

2 - There is an Avatar icon right before each title and I wish to remove it so that there’s just text on the Title.

I hope this is not too confusing, I try to keep it simple and coherent but if I can do anything to clarify let me know. Thank you!

[Prasant]

Hello @dgarsa,

Thanks for asking.

1. First, I suggest you to add a unique class to each pricing table column. Here’s a screencast.

2. Then add following CSS under X/Pro > Theme Options > CSS:

/* to change header background color*/
.add-class h2 {
    background-color: #ddd;
}
/* pricing background color*/
.add-class .x-pricing-column-info {
    background-color: orange;
}

.add-class .x-ul-icons li {
    background-color: orange !important;
}

/* to change button background color */
.add-class .x-btn { 
    background-color: #800080;
    box-shadow: 0 0.25em 0 0 #800080, 0 4px 9px rgba(0,0,0,0.75);
}

/* to remove icons */
.x-pricing-column-info ul>li [class*="x-icon-"] {
    display: none;
}

Please change the class name and use the same login for other columns.

1- I have found the proper CSS code selector using the Chrome browser Developer Toolbar: https://www.youtube.com/watch?v=wcFnnxfA70g

2- For the CSS code itself, I suggest that you get started with this tutorial: https://www.youtube.com/watch?v=yfoY53QXEnI

Thanks.

[dgarsa]

Thank you so much! I was able to modify the code accordingly. The only problem I had was that the pricing background color changes the whole rectangle and I was only aiming to change the square where the price and subtitle is, not the features. If there’s a way to fix that, let me know, but if there isnt, no problem. I’m just glad you helped me! Thank you!

[Prasant]

Hello @dgarsa,

Thanks for updating the thread.

Okay, in that regards you can add following CSS under X/Pro > Theme Options > CSS:

.add-class h3, .basic-class .x-interval {
    background-color: #ffa500;
}

Please change color as per your requirement.

Thanks.

[dgarsa]

Thank you so much for your help, and sorry for replying so late. But I have now a final question, hopefully the last one. My pricing table has 4 elements and I used a code to show the four elements on the same row, however, when I visit my webpage from my phone, the pricing table looks weird. Hope you can help with this and thanks for all your help so far!
https://screencast-o-matic.com/watch/cF6DD2YUVk

[Prasant]

Hello @dgarsa,

Thanks for updating the thread.

Please try adding following CSS under X/Pro > Theme options > CSS. If problem is still there, please share exact website page URL for us to take a closer look.

@media only screen and (max-width: 600px) {
    .x-pricing-table[class*="-column"] .x-pricing-column {
    width: 100%;
}
}

Thanks.

[dgarsa]

Hi, I tried using the code but no dice, the webpage URL is RH Selecta.
I’m gonna share with you the code I used to fit 4 columns in the same row instead of the default three:

.x-pricing-table.four-columns .x-pricing-column {
    width: 25% !important;
}

In case it might be conflicting with the code you gave me, because of the !important tag i used. Thank you

[ruenel]

Hello @dgarsa,

Please be advised that the pricing table has been designed to have a two and up to five columns to display. It may not look good in your mobile phone because of your custom css. I can see that you added this custom css twice:

.x-pricing-table.four-columns .x-pricing-column{
   width:25% !important;
}

You added it in Appearance > Customizer > Additional CSS and you also added it in X > Theme Options > Custom CSS. Please remove it first and check it how it would look like.

Please let us know how it goes.

[dgarsa]

Yes! That was it! Thank you so much @RueNel! This has been a huge headache this whole week so it’s finally nice to see it work like it should. Also, I love your pikachu hat Thank you so much for your help, you’re the best.

Just in case someone wonders, I removed the code from both locations and it worked just fine

[Prasant]

You are most welcome.