Remove "from" in product price with multiple variants

Does anyone know if it is possible to remove "From" in product prices when you have a few variants with higher prices? I would only like the lowest price to display without "from" and am struggling to find a solution.

Any help would be much appreciated!Thanks

@11squared Can you share a product url?

Sure!

Here is a link to one.

Basically the only reason variants were added was for customers to add personalisation to products and pay the price accordingly (£7 per initial for products below £200) so the price may go up slightly if they choose to do this but the product price itself is always the same so it gives the wrong impression to say "from"...

Would be so grateful if you could shed any light. Thought this would be a simple fix! : )

@11squared With that site url. You can add to Home > Design > Custom CSS

/* Hide from & Price */
.product-price {
   visibility: hidden;
}
/* Unhide price */
span.sqs-money-native {
   visibility: visible;
   display: block;
}

Thank you so much! That has helped and there are no more froms on the product pages... The only concern is that now when you are selecting the variant within the product page, the price disappears... Do you know how I'd go about that?

@11squared It need JavaScript or jQuery to handle. Please remove CSS I just sent. And i will check again.

@tuanphan Thank you! : ) I have removed that css now.

I did originally try this code in the header:

<script>
   $(document).ready(function() {
   var text = $('.ProductItem-details .product-price').text();
   text = text.remove ('from');
   $('.ProductItem-details .product-price').text(text);
 });
 </script>

which was posted by @Patcross10 on a related issue (https://answers.squarespace.com/questions/122346/how-do-i-change-product-price-displayed-that-has-m.html) but it didn't work unfortunately...

@11squared Use this code

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
    $(document).ready(function() {
    var text = $('.ProductItem-details .product-price').text();
    text = text.remove ('from');
    $('.ProductItem-details .product-price').text(text);
  });
  </script>

Thank you! I just tried it in the site header and then in a product page header but it didn't manage to remove the from... It's very stubborn!

@11squared Try adding to Footer

@tuanphan I tried thanks but it didn't work either...

@11squared I just asked a friend. Hope he hasn't been off for the weekend

@tuanphan Thank you so much, that's so kind of you!

@11squared Try

<script>
$('.product-price').each(function() {
   var text = $(this).text();
   $(this).text(text.replace('from', ''));
});
</script>

@tuanphan Thank you! Just tried but unfortunately this isn't working either.

Thanks @11squared Saved your solution :-D

I have tried to implement the selected solution (Aug 5) at the top of the thread. I am using a premium e-commerce account with the template Sonora. 

My site is in Italian language so the product price doesn't say "from" but it says "da".  I modified this detail in the code, however, it didn't work for me. Nothing changed except a return was inserted after the "da" pushing the price to a new line.

My real issue is that on the page in the preview summary of the product, I would like to force it to display the price of only one particular variant - a variant that is not the lowest in price, but that is usually the best seller.  Does anyone have a workaround for this?

Thanks in advance 😉

@sportsam05 Did you figure this out? I'm trying to solve the same problem (display the price of a specific variant which is not the lowest in price). For now have just removed the price display altogether, and added the price in each variant's name so that it displays in the drop-down list... 

On 2/9/2020 at 3:34 AM, jcsteigs said:

@sportsam05 Did you figure this out? I'm trying to solve the same problem (display the price of a specific variant which is not the lowest in price). For now have just removed the price display altogether, and added the price in each variant's name so that it displays in the drop-down list... 

No, I haven't figured it out. Your workaround sounds good, but it won't work for my client.  I was thinking of putting in a question directly to tuanphan but in the end it stopped being a priority. However, it's good to note that multiple people are looking for this functionality.

I am having the same issue, need to display the highest price variant on certain products. Has anyone solved this?

Hello! Thank you @tuanphan for all your help with this issue. Using the CSS, my dollar sign has disappeared. Is there anyway to get this back?

On 5/22/2021 at 8:03 AM, Danielle_99 said:

Hello! Thank you @tuanphan for all your help with this issue. Using the CSS, my dollar sign has disappeared. Is there anyway to get this back?

Same here

On 8/5/2019 at 3:58 PM, SourceProjects said:

Hi, I found a solution for this, just wanted to share!

In CSS, add:

.summary-price {
    visibility: hidden;
}
/* Unhide price */
span.sqs-money-native {
    visibility: visible;
    display: block;
}

 

 

Then in Advanced >> Code Injection add this to the Footer:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
     $(document).ready(function() {
     var text = $('.ProductItem-details .product-price').text();
     text = text.replace ('from', '');
     $('.ProductItem-details .product-price').text(text);
   });
   </script>

 

 

Thank you @Tuanphan for all your help! : ) I would not have found these solutions otherwise.

Hello, i tried using the above after reading this page. I'm trying to hide the "From £X" from all products but show the final price when variants are selected. Any help would be much appreciated.  

3 hours ago, anastasiosmoiras said:

i tried using the above after reading this page.

The technique above does not work because SS made changes since then.

Please see the following.

Let us know how it goes.