Pricing table: all CSS customisation options

Ask the Community Customization
22

Hi there @Pradeep_Dodle :wave:

Unfortunately, I havenā€™t got any news yet. Iā€™ve requested an update and will let you know once anything comes up :slightly_smiling_face:

23

Hi there @Pradeep_Dodle :wave:

Thank you for waiting!

  1. Alignment for the particular row - unfortunately, there is no way to customize the widget this way. I am really sorry! Iā€™ve added your idea to the Wishlist, so you can keep an eye on it right here - Center align particular row

  2. Stack toggle buttons next to each other on mobile:

@media (max-width: 480px) {
	.eapps-pricing-table-toggle-inner {
		flex-wrap: nowrap !important;
		padding: 0 !important;
	}
	.eapps-pricing-table-toggle-item-hint {
		display: block !important;
	}
}
  1. Code to change spacing between toggles and toggles and table:
/* between toggles */
.eapps-pricing-table-toggle-inner {
	gap: 0px;
}

/* between toggles and table*/
.eapps-pricing-table-toggle-container {
	margin-bottom: 35px !important;
}
  1. Change background and text color of toggles independently:
/* Toggle 1 */
.eapps-pricing-table-toggle-item-1 .eapps-pricing-table-toggle-item-name {
  color: rgb(30, 249, 110);
  background-color: rgba(30, 249, 110, 0.05);
}

/* Toggle 1 Active */
.eapps-pricing-table-toggle-item-1.eapps-pricing-table-toggle-item-active
  .eapps-pricing-table-toggle-item-name {
  color: rgb(30, 249, 110);
  background-color: rgba(30, 249, 110, 0.1);
}

/* Toggle 2 */
.eapps-pricing-table-toggle-item-2 .eapps-pricing-table-toggle-item-name {
  color: rgb(207, 24, 248);
  background-color: rgba(207, 24, 248, 0.05);
}

/* Toggle 2 Active */
.eapps-pricing-table-toggle-item-2.eapps-pricing-table-toggle-item-active
  .eapps-pricing-table-toggle-item-name {
  color: rgb(207, 24, 248);
  background-color: rgba(207, 24, 248, 0.1);
}

Check it out and let me know if it helped :slightly_smiling_face:

24

Hi @Max ,

Is there an option to change the height of the pricing row? To be exact, I want to remove the padding (see image) on the website and on our mobile site.

elfsight 7
elfsight 72098Ɨ458 73.4 KB

25

Hi @Pradeep_Dodle :wave:

Could you please send me a link to the page where your widget is installed?

26

www.superfone.in/pricing

27

Thanks!

Iā€™ve passed it to the devs. Currently, they are out of the office, so Iā€™ll get back to you on Monday :slightly_smiling_face:

28

I think you can use this CSS code

div.eapps-pricing-table-column-features-container.eapps-pricing-table-column-item {
    padding-top: 0px !important;
}
.eapps-pricing-table-column-features-container.eapps-pricing-table-column-item>div>div:first-child {
    display: none !important; 
}

image
image1572Ɨ342 45.8 KB

29

Hi @Pradeep_Dodle :wave:

The solution by @tuanphan is great, and I see that youā€™ve already added it to the widget.

If anything else comes up, feel free to let us know. Weā€™ll be happy to help :wink:

31

@Max Is there a way to change the alignment of the text (left / mid / right) of a particular column in the pricing table?

32

This code should help:

.eapps-pricing-table-columns-container-N .eapps-pricing-table-column-M * {
  text-align: center !important;
}

Replace N with the number of the table and M with the number of column, where youā€™d like to change the alignment :slightly_smiling_face: