Changing What Price Variant Displays in the "from" field

Hi All,

I am working on building a site for my mom and have run into an issue. She runs a food business and offers dishes that either serve 4 or 2 people and then offers pricing for an additional portion. She has a set menu every week and it is misleading for the "from" price that is displayed for each item to show the additional portion pricing. She does not offer meals for one and would prefer the price for meals for 4 (which is her standard order) to display first. Is there a way to get the "from" price to display the most expensive variant first instead of the least? I searched the forum and others recommended adding this as a separate item in the shop (for instance if someone is offering fabric samples) -- however this does not work for a full week's menu and would end up making the store look very messy/not user friendly. Any help would be appreciated! Here are some visuals if it is helpful: 

Please post the URL to one of the product items you have set up with variants.

If your site is not public please set up a site-wide password, if you've not already done so. Post the password here.

We can then take a look at your issue.

Hi Creedon, 

Thank you! Here is the link to the site: https://chicken-kumquat-lkcf.squarespace.com/ and the current password is ForumHelp.

Add the following to Settings > Advanced > Code Injection > HEADER.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

Add the following to Store Settings > Advanced > Page Header Code Injection of the Store page.

<script>

  $( ( ) => {
  
    if ( ! $( '.ProductItem' ).length ) return;
    
    let dataVariants = $( '.product-variants' ).attr ( 'data-variants' );
    
    dataVariants = JSON.parse ( dataVariants );
    
    let prices = $.map ( dataVariants, function ( obj ) {
    
      let price = obj.onSale ? obj.salePrice : obj.price;
      
      price = price / 100;
      
      return price;
      
      } );
      
    let maxPrice = Math.max ( ...prices ).toFixed ( 2 );
    
    let $e = $( '.product-price' );
    
    $( 'span', $e ).text ( maxPrice );
    
    $( '.variant-option select' ).change ( function ( ) {
    
      if ( $e.text ( ).includes ( 'from' ) )
      
        $( 'span', $e ).text ( maxPrice );
        
      } );
      
    } );
    
  </script>

Let us know how it goes.

Thank you for the code! Unless I did something wrong (which is always possible) it didn't seem to fix the issue. I'm wondering if there is something else I could try?

From what I can tell it is working.

Normally that would be showing 21.25 when no selections are made.

Unless I've totally misunderstood what you want.

Ah thank you, I think I see where the discrepancy is? When you click through to an item it displays the more expensive item first -- however anywhere that shows the item thumbnail view (for instance on the home page or even on the order page) it still displays the lowest price first. Is there a way to make it display the highest price first across the site?

8 minutes ago, RachelF said:

Is there a way to make it display the highest price first across the site?

There is no setting for that in the SS interface. So any changes would have to be done through Javascript.

Unfortunately product items is the only place that has ready access to the variant information that I was able to use to determine max price.

If you want to do the same thing in other locations then there are some other ways it may be achieved.

One might be a piece of code that you would manually maintain a mapping between the product item and a max price. It would be a little tedious perhaps but probably not to bad if you only have to update once a week.

The other option might be to get on the Advanced Commerce plan and use the commerce api to take care of updating the max prices automatically.

These two options would take some amount of work.

Ah thank you, this is a total bummer. I am guessing there is also no way to change it so that is just shows a range of prices instead? So for instance if you can't show the highest price first, show "$20-$50" or whatever the price may be? (I'm trying to think of a work around that might be doable).

Wether you are showing the max price or a range the summary and product grid don't have ready access to the information needed to achieve those effects. The underlying code and procedures to keep the data up to date would be the same.

To be clear what you want to do, I think, can be done but it's not a few lines of code easily thrown together.

On 12/17/2020 at 1:31 PM, creedon said:

Add the following to Settings > Advanced > Code Injection > HEADER.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

Add the following to Store Settings > Advanced > Page Header Code Injection of the Store page.

 

<script>

  $( ( ) => {
  
    if ( ! $( '.ProductItem' ).length ) return;
    
    let dataVariants = $( '.product-variants' ).attr ( 'data-variants' );
    
    dataVariants = JSON.parse ( dataVariants );
    
    let prices = $.map ( dataVariants, function ( obj ) {
    
      let price = obj.onSale ? obj.salePrice : obj.price;
      
      price = price / 100;
      
      return price;
      
      } );
      
    let maxPrice = Math.max ( ...prices ).toFixed ( 2 );
    
    let $e = $( '.product-price' );
    
    $( 'span', $e ).text ( maxPrice );
    
    $( '.variant-option select' ).change ( function ( ) {
    
      if ( $e.text ( ).includes ( 'from' ) )
      
        $( 'span', $e ).text ( maxPrice );
        
      } );
      
    } );
    
  </script>

Let us know how it goes.

First, thank you for this. I'm trying to figure out something like this, too, and am having similar issues on the main product page. But at least this would clear some things up... However, in our case, we would like to instead show the second-lowest or third-lowest value, which is always the first drop-down item on each page for us if that's helpful. Would it be possible to modify this for that purpose? Site where we're trying to do this: nycfilmlab.com.

On 5/11/2021 at 10:57 AM, adam said:

similar issues on the main product page

The code I posted only works on a product detail page. If you need the code to work on the store grid page or other places then please see my explanation to RachelF from Dec. 17th 2020.

On 12/17/2020 at 9:31 PM, creedon said:

Add the following to Settings > Advanced > Code Injection > HEADER.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

Add the following to Store Settings > Advanced > Page Header Code Injection of the Store page.

 

<script>

  $( ( ) => {
  
    if ( ! $( '.ProductItem' ).length ) return;
    
    let dataVariants = $( '.product-variants' ).attr ( 'data-variants' );
    
    dataVariants = JSON.parse ( dataVariants );
    
    let prices = $.map ( dataVariants, function ( obj ) {
    
      let price = obj.onSale ? obj.salePrice : obj.price;
      
      price = price / 100;
      
      return price;
      
      } );
      
    let maxPrice = Math.max ( ...prices ).toFixed ( 2 );
    
    let $e = $( '.product-price' );
    
    $( 'span', $e ).text ( maxPrice );
    
    $( '.variant-option select' ).change ( function ( ) {
    
      if ( $e.text ( ).includes ( 'from' ) )
      
        $( 'span', $e ).text ( maxPrice );
        
      } );
      
    } );
    
  </script>

Let us know how it goes.

Thank you for this! Do you know how to apply this site-wide? I'd like the highest price to show on mairi-helena.squarespace.com/shop (but it's still showing lowest variant). The password is test.

@merakiconceptstudio

Please see my May 11, 2021 post.

On 12/17/2020 at 11:53 PM, creedon said:

There is no setting for that in the SS interface. So any changes would have to be done through Javascript.

Unfortunately product items is the only place that has ready access to the variant information that I was able to use to determine max price.

If you want to do the same thing in other locations then there are some other ways it may be achieved.

One might be a piece of code that you would manually maintain a mapping between the product item and a max price. It would be a little tedious perhaps but probably not to bad if you only have to update once a week.

The other option might be to get on the Advanced Commerce plan and use the commerce api to take care of updating the max prices automatically.

These two options would take some amount of work.

We have the Advanced Commerce plan, but still unsure how to implement what you've described. Any help would be appreciated. Happy to pay for your time.

On 1/18/2022 at 10:03 AM, merakiconceptstudio said:

Do you know how to [show the highest price]? I'd like the highest price to show on mairi-helena.squarespace.com/shop (but it's still showing lowest variant).

I looked at your link and I see you a Wallpaper product that has a sample variant priced at £3 as well as a variant for the actual product (the roll of wallpaper) priced at £130.

I assume you're trying to make it easy to manage the inventory but you don't want the sample prices to appear in product lists or on product detail pages? Is that right?

As @creedon said, it's possible to add code to Product Detail pages (PDPs) to replace the 'From' price with the maximum price. However, there isn't a very practical way to do this on Product List pages (PLPs) because variant prices aren't available on list pages (@creedon called it "tedious" and he's right 🙂).

I've seen a number of Squarespace users hiding prices on PLPs and including the full price in the product title, however I'd argue that this is more of a workaround than a solution.

The solution I usually recommend is to avoid using variants for samples and use separate products instead (see my old post). It's now really easy to create a duplicate of your main product, quickly change the price and save it as the sample product.

By doing this, code can be used to automatically add a 'purchase sample' button to each full product page. This means that customers can still order a sample without leaving the full product page, and you won't need to use any code to change the way prices are displayed. Here's an example of what I mean:

Another benefit of doing it this way is that you can also offer a separate samples page (if you want to!) where potential customers can easily order a number of samples without dipping in and out of product pages:

I hope this alternative is helpful.

  Did this help? Show thanks by clicking one of the icons below  ⬇️

2 hours ago, paul2009 said:

I looked at your link and I see you a Wallpaper product that has a sample variant priced at £3 as well as a variant for the actual product (the roll of wallpaper) priced at £130.

I assume you're trying to make it easy to manage the inventory but you don't want the sample prices to appear in product lists or on product detail pages? Is that right?

As @creedon said, it's possible to add code to Product Detail pages (PDPs) to replace the 'From' price with the maximum price. However, there isn't a very practical way to do this on Product List pages (PLPs) because variant prices aren't available on list pages (@creedon called it "tedious" and he's right 🙂).

I've seen a number of Squarespace users hiding prices on PLPs and including the full price in the product title, however I'd argue that this is more of a workaround than a solution.

The solution I usually recommend is to avoid using variants for samples and use separate products instead (see my old post). It's now really easy to create a duplicate of your main product, quickly change the price and save it as the sample product.

By doing this, code can be used to automatically add a 'purchase sample' button to each full product page. This means that customers can still order a sample without leaving the full product page, and you won't need to use any code to change the way prices are displayed. Here's an example of what I mean:

 

Another benefit of doing it this way is that you can also offer a separate samples page (if you want to!) where potential customers can easily order a number of samples without dipping in and out of product pages:

I hope this alternative is helpful.

 

  Did this help? Show thanks by clicking one of the icons below  ⬇️

Paul, this is amazing! Could you assist me with creating this? I'm happy to pay for your time. A few questions first:

• How do I generate an active purchase link for a product?
• Can the button in Additional Info be targeted by CSS universally (on every product page), as opposed to having to add it for every individual product page?

29 minutes ago, merakiconceptstudio said:

Could you assist me with creating this?

I'll contact you.

On 1/19/2022 at 4:39 PM, paul2009 said:

I'll contact you.

I also am interested in purchasing something very similar to this please.

Thanks,

Tom

On 5/16/2022 at 8:26 PM, TFantom said:

I also am interested in purchasing something very similar to this please.

This solution is now in beta test and will be available as an extension for Squarespace 7.1 websites.

Here it is in use:

Hi Paul, 

Thanks again for installing the Beta. It was exactly what I needed and works perfectly!

This looks great, Paul! 🙂 

@paul2009 @creedon

Hello, 

I'm hoping someone can guide me through. I've been reading multiple threads now and I can't seem to find anyone nailing down a solution. Here's the status.
 

1. I have 7.1 and Business Plan. 
2. We loaded 4 price variants.
3. I wanted to show a range of prices from low to highest on the PLP, instead of only showing "from cheapest variant".
4. I used this code on the header:
    

   <script>
       /* This is the code overides prices variants in product pages */
   document.addEventListener("DOMContentLoaded", function() {
     var productVariants = document.querySelectorAll(".product-variants")[0].dataset.variants;
     productVariants = JSON.parse(productVariants);
     var lowestPrice = Infinity;
     var highestPrice = 0;
     for (var i = 0; i < productVariants.length; i++) {
       var variantPrice = parseFloat(productVariants[i].price) / 100;
       if (variantPrice < lowestPrice) {
         lowestPrice = variantPrice;
       }
       if (variantPrice > highestPrice) {
         highestPrice = variantPrice;
       }
     }
     var priceContainer = document.querySelector(".product-price");
     priceContainer.innerHTML = "$" + lowestPrice.toFixed(2) + " - $" + highestPrice.toFixed(2);
   });
   </script>

    

5. It worked. Here's the result:
   
   

6. I want to do the same in the Store Page. I was able to figure out a code that targets the right element, but it doesn't show any prices and it only affects the first product on the grid. Here's the code i used on the footer:
   
    

   <script>
   if (window.location.pathname === '/shop') {
     var priceContainers = document.getElementsByClassName("grid-prices");
     var lowestPrice = Infinity;
     var highestPrice = 0;
     for (var i = 0; i < priceContainers.length; i++) {
       var priceText = priceContainers[i].querySelector(".product-price").textContent.trim();
       var price = parseFloat(priceText.substring(5));
       if (price < lowestPrice) {
         lowestPrice = price;
       }
       if (price > highestPrice) {
         highestPrice = price;
       }
     }
     var priceRangeContainer = document.querySelectorAll(".product-price");
     for (var i = 0; i < priceRangeContainer.length; i++) {
       priceRangeContainer[i].innerHTML = "$" + lowestPrice.toFixed(2) + " - $" + highestPrice.toFixed(2);
     }
   }
   
   </script>

    

7. Here's the result:
   
   

8. What I'm thinking is that from the Store Page, it doesn't know what the min and max price variant is, unlike the PLP. How can I scrap the data and then loop it back but in the Store Page. 

9. How do I target all the elements on the grid?

10. Is it possible to achieve the same result I got on the PLP? 

Thank you in advance for taking the time to read. I'm not a programmer by any means nor do I feel comfortable with code, Chat GTP helped me figure most of it out. Which is amazing to me. 

Here's the link to the website: https://chathamcompassion.com/shop 

(It's a 420 shop I'm working for a client)

14 hours ago, cro0w said:

I wanted to show a range of prices from low to highest on the PLP, instead of only showing "from cheapest variant". What I'm thinking is that...it doesn't know what the min and max price variant is, unlike the [PDP].

As you've shown, this can be achieved on the Product Detail Page (PDP) because the price metadata is available on this page so that users can select a variant and see the correct price.

It isn't possible to do the same thing on the Product List Page (PLP) because the highest price is not included in the markup of the PLP. However, depending on your circumstances you may be able to use a workaround, such as duplicating this metadata in a product tag and pulling it from there.

Did this help? Please give feedback by clicking an icon below  ⬇️

Thank you @paul2009 you confirmed my suspicions.

My head was starting to hurt. I appreciate you taking the time. I would like to know more about the workaround. 

1. How would I duplicate the metadata in a product tag and
2. then pull the variant price from there?
3. Assuming I can use the same method I used to parse information what is my code missing?

I know that it might be tedious but I'm willing to try it. 

As an alternative, is it possible to just inject code to, hide the from price, and then manually write for each one. I know that would be cumbersome, but I could make it work. 

What would you recommend?