Price Chart ideas for improvement

Ask the Community General Questions
1

I just started playing with the Price Chart widget and had some suggestions I think would make it stronger:

  • Under “Unit Type” adding options for per “lesson”, “class” and “session”
  • The ability to assign different colour palettes to separate tables (So they really show clients a clear difference between them)
  • The option to have collapsible Price Charts to save webpage space. (Like an Accordion Menu). Each individual table could be collapsible/expandable as well–and at the same time for those who wish to price compare.

That’s it! These are things that would really help my specific use. Great work & thanks.

2 Likes
3

Hi there, @Brad2 :waving_hand:

Thank you so much for sharing your thoughts with us!

  1. This is a nice idea and I’ve added it to the Wishlist on your behalf - Add Lesson Unit for Per Item Price type. As for now, you can use this code in the Custom CSS field on the Appearance tab of your widget’s settings to replace the price postfix text:
.es-price-postfix {
font-size: 0 !important;
}

.es-price-postfix:after {
content: '/ Lesson';
font-size: 14px;
}

  1. Would you like only the primary and secondary colors to be different, or the text color should be changed too?

  2. You’d like to expand/collapse features in each column, like in this screenshot, right?

image
image1319×901 42.5 KB

If so, feel free to upvote this idea - Accordion feature in the widget layout. However, it doesn’t meet your case, please describe your idea in more detail and share an example of how it should look :slightly_smiling_face:

2 Likes
4

Oh, that’s great–thanks!

To answer your questions:

  1. The ability to fully control colour palettes for each individual table would allow for ultimate customizability and would be really ideal–The goal being a clear visual change for clients when they flip from one table to the next, helping to avoid them getting lost or confused. Ideally fonts could change too, but if it’s just the primary & secondary colours for each table, that would still be a great upgrade.

  2. I was thinking the accordion menu option would be helpful, because I’ll have multiple price charts for multiple services. If there was a Price Chart heading that clients could simply expand if that’s the one they wanted to see, it would really optimize space & streamline their experience. For example: I have a pricing chart for the 1-on-1 lessons I conduct. I use the tables to offer different lesson duration options.

    But, I also offer 2-on-1 lessons. If that’s what clients are looking for, ideally they could simply click that heading to expand that pricing chart–never being distracted or confused by being presented with the first 1-on-1 chart and greatly optimizing the space on my website.

Thanks!

1 Like
5

…Kinda like this is what I’m imagining for the accordion menu, if it’s possible

Elfsight-Pricechart-wishlist
Elfsight-Pricechart-wishlist901×1370 128 KB

menu idea.

2 Likes
6

Thanks for clarification!

Please let me check with the devs if there is a custom solution for this. I’ll update you as soon as I have their response :slightly_smiling_face:

1 Like
7

Hi there, @Brad2 :waving_hand:

Thank you for waiting!

1. Here is the CSS code to change the Primary color individually for each table:

.es-widget-container {
  --table-1-primary: rgb(141, 56, 255);
  --table-2-primary: blue;
  --table-3-primary: black;
}

/* First Table */
.es-widget-container:has(.es-toggles-wrapper:nth-child(1) .es-toggles-toggle-active) *:is(.es-title-container, .es-button, .es-bar) {
  background-color: var(--table-1-primary) !important;
}
.es-widget-container:has(.es-toggles-wrapper:nth-child(1) .es-toggles-toggle-active) .es-features-feature-icon svg {
  fill: var(--table-1-primary);
}

/* Second Table */
.es-widget-container:has(.es-toggles-wrapper:nth-child(2) .es-toggles-toggle-active) *:is(.es-title-container, .es-button, .es-bar) {
  background-color: var(--table-2-primary) !important;
}
.es-widget-container:has(.es-toggles-wrapper:nth-child(2) .es-toggles-toggle-active) .es-features-feature-icon svg {
  fill: var(--table-2-primary);
}

/* Third Table */
.es-widget-container:has(.es-toggles-wrapper:nth-child(3) .es-toggles-toggle-active) *:is(.es-title-container, .es-button, .es-bar) {
  background-color: var(--table-3-primary) !important;
}
.es-widget-container:has(.es-toggles-wrapper:nth-child(3) .es-toggles-toggle-active) .es-features-feature-icon svg {
  fill: var(--table-3-primary);
}

Give it a try and let me know if it worked :wink:

I also agree that it would be awesome to have this option right in the settings and I’ve added this idea to the Wishlist on your behalf -Individual color scheme for each table.


2. Since the Secondary color controls only the font color, I’ve requested a detailed code to change the color of all text elements individually for each table. I’ll update you once the code is ready :slightly_smiling_face:


3. Regarding the Accordion feature, as far as I see your website is built on the Squarespace builder. If your Squarespace plan allows adding custom codes, you can add this Accordion block to your website, and we’ll install the widget there using a custom script :slightly_smiling_face:

1 Like
8

Hi there, @Brad2 :waving_hand:

Here is the CSS code to change the font settings of each text element individually for all tables:

/* Text colors */
.es-widget-container {
  /* first table */
  --table-1-highlight-label: #fff;
  --table-1-title: #fff;
  --table-1-caption: #fff;
  --table-1-price: rgb(17, 17, 17);
  --table-1-price-postfix: rgba(17, 17, 17, 0.7);
  --table-1-old-price: rgba(17, 17, 17, 0.5);
  --table-1-discount: rgb(255, 56, 56);
  --table-1-price-caption: rgba(17, 17, 17, 0.7);
  --table-1-button-text: #fff;
  --table-1-feature-text: rgba(17, 17, 17, 0.7);

  /* second table */
  --table-2-highlight-label: #fff;
  --table-2-title: #fff;
  --table-2-caption: #fff;
  --table-2-price: rgb(17, 17, 17);
  --table-2-price-postfix: rgba(17, 17, 17, 0.7);
  --table-2-old-price: rgba(17, 17, 17, 0.5);
  --table-2-discount: rgb(255, 56, 56);
  --table-2-price-caption: rgba(17, 17, 17, 0.7);
  --table-2-button-text: #fff;
  --table-2-caption-feature-text: rgba(17, 17, 17, 0.7);

  /* third table */
  --table-3-highlight-label: #fff;
  --table-3-title: #fff;
  --table-3-caption: #fff;
  --table-3-price: rgb(17, 17, 17);
  --table-3-price-postfix: rgba(17, 17, 17, 0.7);
  --table-3-old-price: rgba(17, 17, 17, 0.5);
  --table-3-discount: rgb(255, 56, 56);
  --table-3-price-caption: rgba(17, 17, 17, 0.7);
  --table-3-button-text: #fff;
  --table-3-caption-feature-text: rgba(17, 17, 17, 0.7);
}

/* First Table */
.es-widget-container:has(.es-toggles-wrapper:nth-child(1) .es-toggles-toggle-active) .es-bar {
  color: var(--table-1-highlight-label);
}
.es-widget-container:has(.es-toggles-wrapper:nth-child(1) .es-toggles-toggle-active) .es-title {
  color: var(--table-1-title);
}
.es-widget-container:has(.es-toggles-wrapper:nth-child(1) .es-toggles-toggle-active) .es-title-caption {
  color: var(--table-1-caption);
}
.es-widget-container:has(.es-toggles-wrapper:nth-child(1) .es-toggles-toggle-active) .es-price-value {
  color: var(--table-1-price);
}
.es-widget-container:has(.es-toggles-wrapper:nth-child(1) .es-toggles-toggle-active) .es-price-postfix {
  color: var(--table-1-price-postfix);
}
.es-widget-container:has(.es-toggles-wrapper:nth-child(1) .es-toggles-toggle-active) .es-old-price * {
  color: var(--table-1-old-price);
}
.es-widget-container:has(.es-toggles-wrapper:nth-child(1) .es-toggles-toggle-active) .es-price-discount {
  color: var(--table-1-discount);
}
.es-widget-container:has(.es-toggles-wrapper:nth-child(1) .es-toggles-toggle-active) .es-price-caption * {
  color: var(--table-1-price-caption);
}
.es-widget-container:has(.es-toggles-wrapper:nth-child(1) .es-toggles-toggle-active) .es-button * {
  color: var(--table-1-button-text);
}
.es-widget-container:has(.es-toggles-wrapper:nth-child(1) .es-toggles-toggle-active) .es-features-feature-text * {
  color: var(--table-1-feature-text);
}

/* Second Table */
.es-widget-container:has(.es-toggles-wrapper:nth-child(2) .es-toggles-toggle-active) .es-bar {
  color: var(--table-2-highlight-label);
}
.es-widget-container:has(.es-toggles-wrapper:nth-child(2) .es-toggles-toggle-active) .es-title {
  color: var(--table-2-title);
}
.es-widget-container:has(.es-toggles-wrapper:nth-child(2) .es-toggles-toggle-active) .es-title-caption {
  color: var(--table-2-caption);
}
.es-widget-container:has(.es-toggles-wrapper:nth-child(2) .es-toggles-toggle-active) .es-price-value {
  color: var(--table-2-price);
}
.es-widget-container:has(.es-toggles-wrapper:nth-child(2) .es-toggles-toggle-active) .es-price-postfix {
  color: var(--table-2-price-postfix);
}
.es-widget-container:has(.es-toggles-wrapper:nth-child(2) .es-toggles-toggle-active) .es-old-price * {
  color: var(--table-2-old-price);
}
.es-widget-container:has(.es-toggles-wrapper:nth-child(2) .es-toggles-toggle-active) .es-price-discount {
  color: var(--table-2-discount);
}
.es-widget-container:has(.es-toggles-wrapper:nth-child(2) .es-toggles-toggle-active) .es-price-caption * {
  color: var(--table-2-price-caption);
}
.es-widget-container:has(.es-toggles-wrapper:nth-child(2) .es-toggles-toggle-active) .es-button * {
  color: var(--table-2-button-text);
}
.es-widget-container:has(.es-toggles-wrapper:nth-child(2) .es-toggles-toggle-active) .es-features-feature-text * {
  color: var(--table-2-feature-text);
}

/* Third Table */
.es-widget-container:has(.es-toggles-wrapper:nth-child(3) .es-toggles-toggle-active) .es-bar {
  color: var(--table-3-highlight-label);
}
.es-widget-container:has(.es-toggles-wrapper:nth-child(3) .es-toggles-toggle-active) .es-title {
  color: var(--table-3-title);
}
.es-widget-container:has(.es-toggles-wrapper:nth-child(3) .es-toggles-toggle-active) .es-title-caption {
  color: var(--table-3-caption);
}
.es-widget-container:has(.es-toggles-wrapper:nth-child(3) .es-toggles-toggle-active) .es-price-value {
  color: var(--table-3-price);
}
.es-widget-container:has(.es-toggles-wrapper:nth-child(3) .es-toggles-toggle-active) .es-price-postfix {
  color: var(--table-3-price-postfix);
}
.es-widget-container:has(.es-toggles-wrapper:nth-child(3) .es-toggles-toggle-active) .es-old-price * {
  color: var(--table-3-old-price);
}
.es-widget-container:has(.es-toggles-wrapper:nth-child(3) .es-toggles-toggle-active) .es-price-discount {
  color: var(--table-3-discount);
}
.es-widget-container:has(.es-toggles-wrapper:nth-child(3) .es-toggles-toggle-active) .es-price-caption * {
  color: var(--table-3-price-caption);
}
.es-widget-container:has(.es-toggles-wrapper:nth-child(3) .es-toggles-toggle-active) .es-button * {
  color: var(--table-3-button-text);
}
.es-widget-container:has(.es-toggles-wrapper:nth-child(3) .es-toggles-toggle-active) .es-features-feature-text * {
  color: var(--table-3-feature-text);
}

The desired values should be set only in this part of the code:

/* Text colors */
.es-widget-container {
  /* first table */
  --table-1-highlight-label: #fff;
  --table-1-title: #fff;
  --table-1-caption: #fff;
  --table-1-price: rgb(17, 17, 17);
  --table-1-price-postfix: rgba(17, 17, 17, 0.7);
  --table-1-old-price: rgba(17, 17, 17, 0.5);
  --table-1-discount: rgb(255, 56, 56);
  --table-1-price-caption: rgba(17, 17, 17, 0.7);
  --table-1-button-text: #fff;
  --table-1-feature-text: rgba(17, 17, 17, 0.7);

  /* second table */
  --table-2-highlight-label: #fff;
  --table-2-title: #fff;
  --table-2-caption: #fff;
  --table-2-price: rgb(17, 17, 17);
  --table-2-price-postfix: rgba(17, 17, 17, 0.7);
  --table-2-old-price: rgba(17, 17, 17, 0.5);
  --table-2-discount: rgb(255, 56, 56);
  --table-2-price-caption: rgba(17, 17, 17, 0.7);
  --table-2-button-text: #fff;
  --table-2-caption-feature-text: rgba(17, 17, 17, 0.7);

  /* third table */
  --table-3-highlight-label: #fff;
  --table-3-title: #fff;
  --table-3-caption: #fff;
  --table-3-price: rgb(17, 17, 17);
  --table-3-price-postfix: rgba(17, 17, 17, 0.7);
  --table-3-old-price: rgba(17, 17, 17, 0.5);
  --table-3-discount: rgb(255, 56, 56);
  --table-3-price-caption: rgba(17, 17, 17, 0.7);
  --table-3-button-text: #fff;
  --table-3-caption-feature-text: rgba(17, 17, 17, 0.7);
}

Give it a try and let me know how it worked :wink:

2 Likes
9

Wow, thanks a lot Max! (and sorry for the delayed response–been away for a few days).

Much appreciated! Code scares me, but I’ll give this a shot. :slight_smile:

2 Likes