Docs

[mattheltzel]

Hi all,

I’m trying to figure out how to make some customizations to the pricing table.

https://www.renaissancepassport.com/

My page is almost ready to go, but I need a little help with changing colors and such on the pricing table.

1. I want the “Buy Now” row in all of the columns to be gone.
2. I want the top title row (only columns 2 and 3) to be this color without having to make it a featured column: #276aa9 — I have a CSS span ‘lightblue’ with that color already if that helps.
3. For the top title row, I’d like to make that font slightly smaller if possible. How can I do that?

Thanks for your amazing support. You guys are incredible.

[John Ezra]

Hi there,

Thanks for writing in!

You can add this under Custom > CSS in the Customizer or in your child theme’s style.css file.

For #1:

.x-pricing-column.resp-p 
a.x-btn.x-btn-large {
    display: none;
}

For #2:

.x-pricing-table.cf.three-columns .x-pricing-column.resp-p:nth-child(2) h2.man,
.x-pricing-table.cf.three-columns .x-pricing-column.resp-p:nth-child(3) h2.man {
    background-color:#276aa9;
    color:#eeeeee;
}

For #3:

.x-pricing-table.cf.three-columns .x-pricing-column.resp-p h2.man {
    font-size:30px
}

Hope this helps – thanks!

[mattheltzel]

Worked great! In the space where the “Buy Now” button used to exist, there is a blank space. Can I remove that padding or margin (whatever it is) to move the bottom of that table up?

[Rupok]

Hi there,

In that case you can add this as well :

.x-pricing-column-info {
  padding-bottom: 0;
}

.x-pricing-column-info .x-ul-icons {
  margin-bottom: 0;
}

Hope this helps.

Cheers!

[mattheltzel]

Perfect!

[Thai]

If you need anything else please let us know.

[mattheltzel]

One more thing… I want the left columns of my pricing table to be blue (you can see that on my page), but the right columns (Timeshare) to be grey. Here’s what I added to my custom CSS:

.x-pricing-table.cf.two-columns .x-pricing-column.resp-p:nth-child(1) h2.man,
.x-pricing-column-info ul>li:nth-child(2n+1)
{
    background-color:#276aa9;
    color:#eeeeee;
}

You can see that they are both blue right now, so I’m wondering how to specify that the only the left columns turn blue.

Thanks!
Matt

[Christopher]

Hi there,

Please update your code to :

.x-pricing-table.cf.two-columns .x-pricing-column.resp-p:nth-child(1) h2.man, .x-pricing-column.resp-p:first-of-type .x-pricing-column-info ul>li:nth-child(2n+1) {
    background-color: #276aa9;
    color: #eeeeee;
}

Hope that helps.

[Author]

Posts