Jump to content

Customize 'From price' text to a custom text in product details page

Go to solution Solved by Lesum,

Recommended Posts

Hi,

I would like to add a custom text instead of "from" before price for a product with four different variants. This product is a service, with prices ranging from $99 to $399. Currently, when you view the product details page, it says "from $99." I'd like to customize it to read "Consultation Services Starting at $99." Is it possible to achieve this using custom code?

I appreciate your help in advance!

Best regards,

Taylor

Link to comment
  • Solution

Hi Taylor, You can add this code snippet within the Settings > Developer Tools > Code Injection > Header

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
<script>
$(document).ready(function() {  
	$(".product-price").html(function() { 
          return $(this).html().replace("from", "Consultation Services Starting at");  
    });
});
</script>

 

If my comments were useful, please like or mark my solution as answer so others can scroll to it quickly. 

Sam
Web Developer & Digital Designer

 Did you find my contribution helpful? Buy me a coffee?

Link to comment

@Taylor_Design You can add this code within the Custom CSS panel:

.ProductItem-details .ProductItem-product-price .product-price {
    font-size: 1.2rem !important;
}

You can change font size 1.2rem in the code. Thanks!

If my comments were useful, please like or mark my solution as answer so others can scroll to it quickly. 

Sam
Web Developer & Digital Designer

 Did you find my contribution helpful? Buy me a coffee?

Link to comment
  • 2 months later...

I have a related question, @creedon I've read through a lot of forum posts that you've contributed to as well, but as yet can't find the answer to my specific problem.

https://www.moymackay.com/courses

My client wants to charge a deposit while still being very clear and upfront about the full cost of her products. Having the pricing read 'from £500' when the full price is up to £2895 is leaving a lot of customers feeling misled - understandably.

There are two categories within the store that require customised pricing: 'Workshops' and 'Retreats'

As an interim workaround while I'm figuring this out, I've hidden pricing for the whole store when viewing all products as thumbnails i.e. at the beginning of the breadcumb trail within the store. I'm wondering if this is causing my problem? It's a temporary fix applied as a blanket to all products/categories in that store which doesn't actually work for the client.

When applying @Lesum's code I get an error message:

These items cannot be set as Category ordered item ids because they do not belong to categories including 61f2885e6664b132c0545a87, 6207ef09de99f90f5925c9c7 

I'll be frank and say I don't actually know what this is about - I was applying the code to the page header of the 'Workshop' category - it's still there, though obviously not functioning.

In an ideal world I'd like to be able to list the price as '<<Category Name>> - <<£Price>> | Deposit - <<£Deposit>>' 

An alternative that the client would probably also accept would be to hide the pricing block altogether at the top of the page and instead include it manually in the product description - this would be equally as quick as updating the text of each piece of code to apply to each product if this is what it required. Each variant would have the correct pricing so hopefully this wouldn't have any negative consequences in the checkout process.

Advice, suggestions, code all gratefully received!

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.