Editing format for Pricing table for fields such as Title, currency, plan, etc

[vipinbattu]

I have created a pricing table but unable to modify any of the fields. even there is no option to customize CSS for these fields.

I need to create a table as displayed in the screenshot. however, I am only able to create the table as shown in the current screenshot.

Please help me to set up the correct pricing table. we are launching our product on 21 May and the pricing table needs to be perfect. please do help urgently.

[Richardz]

Hello,

Here is how I will have proceeded to obtain a pricing grid similar to your example:

1. Create a row with 2 columns (2/3 + 1/3)
2. Add Pricing table element in the two columns (3 columns on left and 1 column in right column)
3. Write your features using HTML formatting (!!)
4. Customize your button with CSS :
   4.1.

.x-btn.my-btn {
color: #ffffff;
border-color: #048fa5;
background-color: #048fa5;
border-radius: 0.30em;
padding: 1.2em;
text-align: center;
text-decoration: none;
letter-spacing: 0.15em;
display: inline-block;
font-size: 1.1em;
margin: 1em 1em;
}
.x-btn.my-btn:hover {
color: #ffffff;
border-color: #07d891;
background-color: #07d891;
}

4.2. In the HTML content of your price list, use this line of code with your information:

[x_button class=“my-btn” href=“YOUR URL” size=“large”]MY BUTTON >[/x_button]

5. Add #ffffff to your style :
   

[vipinbattu]

The main issue to control the font size and width of columns for custom Field such as Title, Currency and Interval.

refer to https://www.yantraksh.com/pricing/

Please provide way out for this

[friech]

Hi Vipin,

Thank you for writing in, yes that is the limitation of Classic Pricing Table it’s not very customizable, but we can help you with custom CSS for that. To resize the title you can use this custom CSS.

/*table column title*/
.x-pricing-column > h2 {
	font-size: 24px;
}

for the currency and interval, please use this

/*table column pricing and interval*/
.x-pricing-column-info .x-price {
	font-size: 22px;
    letter-spacing: 0;
}

You can add custom CSS on the Theme Options > CSS if you want that styling to be applied site-wide.
Or if you only want that styling to be apply on that specific page only, you can add the custom CSS in the Page > CSS area.

Now, I see on your screenshot that you needed the title and buttons to have a different color, to do that, add a unique class for each of your table columns.

e.g. for essentials column

Then add this to the Page > CSS

/*title color*/
.essentials > h2 {
	color: magenta;
}
/*button color*/
.essentials a.x-btn {
	background-color: magenta;
}

Feel free to change the color value, do this class and CSS for each column to have a unique color.

Hope it helps
Cheers!