Change the text for the 'Add to Cart' button in a custom product form.

Hi All

I'm building a website with a custom product form.  I would like the 'add to cart button' in the product page to say 'Choose Size & Sole' ... this will open the custom product form.  I would like the 'add to cart' button in the form to say 'Buy'.

https://xantheanna.uk/custom-made/p/blue

password: xantheanna

Thank you

1 hour ago, GGD said:

I would like the 'add to cart button' in the product page to say 'Choose Size & Sole'

You can change this by editing the product details and clicking Custom Button.

Hi Paul,

Thanks for your response.

When I change the text on the store button it also changes the text in the custom product form button.  I would like the form button to say something else.

Any suggestions much appreciated

On 12/16/2021 at 5:20 PM, GGD said:

When I change the text on the store button it also changes the text in the custom product form button.

Then you may want to use that method for the Custom Product Form button, and then add some code to change the caption on the Product Detail Page. For example you could add this to Design > Custom CSS, although this isn't the ideal way to do it:

.collection-6139070b192e0a23dc66e135 .sqs-add-to-cart-button-inner {
    visibility: hidden;
}
.collection-6139070b192e0a23dc66e135 .sqs-add-to-cart-button-inner:before {
    visibility: visible;
    content: "Choose size and sole";
}

This refers to the collection ID of your 'Custom Made' store, so that it does not affect other products.

A better way to do this is with some JavaScript that re-labels the buttons, but this only works on sites on a Business plan or above.

  If this post has helped you, please click a 'Like' or 'Thanks' icon below  ⬇️

Thank you so much.

This works.  Just so I can gain a bit more knowledge; how do you go about finding the collection id for a page?

If you could assist me further with the 'Custom Made' store button.  I would like to increase the font size of the text.  The text size does not respond when using the sliders in 'site styles'.

Thanks again

9 minutes ago, GGD said:

how do you go about finding the collection id for a page?

I wrote a guide about that here: How to apply CSS to one Squarespace page. It's about five years old but should still be fairly accurate 🙂.

9 minutes ago, GGD said:

I would like to increase the font size of the text.

The solution will depend on which text.

Hi Paul, and any one else reading this thread

I used your guide on applying CSS to work out my design issue and managed to do it with a bit of trial and error.   It was really helpful.  I'd recommend anyone trying to learn CSS to take a look

On 12/16/2021 at 12:50 PM, paul2009 said:

I wrote a guide about that here: How to apply CSS to one Squarespace page. It's about five years old but should still be fairly accurate 🙂.

The solution will depend on which text.

Hi Paul,

I used your code snippet above (thank you!) and it worked.  The label I am using on the Product Detail Page is "Customize".  The button isn't adjusting to the size of the label and so it is huge with the alignment being left instead fo centered.  What do I need to add to the code to fix this?

28 minutes ago, FBDCollars said:

The button isn't adjusting to the size of the label

It's difficult to guide you without a working link to the page on your site. Button sizes will vary according to the Squarespace version/template you are using and, if you are using 7.1, the Product Detail Page (PDP) layout you have selected.

I'm using Brine on Squarespace 7.0.   Here is the link to the product detail page for one of the items in the collection.

https://www.fusionbydesigncollars.com/075-new/siri-2ae6j

Try this instead:
 

.collection-61ec4ba57ee5600f71fa3716 .sqs-add-to-cart-button-inner {
    visibility: hidden;
    font-size: 0;
}

.collection-61ec4ba57ee5600f71fa3716 .sqs-add-to-cart-button-inner:before {
    visibility: visible;
    content: "Customize";
    font-size: 16px;
}

  If this post has helped you, please click a 'Like' or 'Thanks' icon below  ⬇️

Much better.  Thank you!

On 12/16/2021 at 9:32 AM, paul2009 said:

Then you may want to use that method for the Custom Product Form button, and then add some code to change the caption on the Product Detail Page. For example you could add this to Design > Custom CSS, although this isn't the ideal way to do it:

.collection-6139070b192e0a23dc66e135 .sqs-add-to-cart-button-inner {
    visibility: hidden;
}
.collection-6139070b192e0a23dc66e135 .sqs-add-to-cart-button-inner:before {
    visibility: visible;
    content: "Choose size and sole";
}

This refers to the collection ID of your 'Custom Made' store, so that it does not affect other products.

A better way to do this is with some JavaScript that re-labels the buttons, but this only works on sites on a Business plan or above.

  If this post has helped you, please click a 'Like' or 'Thanks' icon below  ⬇️

I followed this to use on my site and it worked, however the text is aligned left and I'm unable to find the proper CSS to align center.  Do you have any advice?  

1 hour ago, aunderwood said:

I followed this to use on my site and it worked, however the text is aligned left and I'm unable to find the proper CSS to align center.  Do you have any advice?

Please post the URL for a page on your site where we can see your issue. For us to see the URL you need to include the link in the content of your post. The URL field the forum software provides is not shown to us.

A link to the backend of the your site won’t work for us, i.e. a URL that contains /config/.

Please set up a site-wide password, if your site is not public and you've not already done so.

Post the password here.

Adding a site-wide password does not allow anyone to alter your site. It only allows those with the password to see your site.

Please read the site-wide password and how to share a link documentation to understand how they work.

You may find How to post a forum question post useful.

We can then take a look at your issue.