Jump to content

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

Recommended Posts

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.

sqsp-add-to-cart-change-button-text.thumb.jpg.9aff2e1b3471a238c75bb50b85f7a3ef.jpg

Improve your online store with our extensions.
About: Squarespace Circle Leader since 2017. I value honesty, transparency, appreciation and great design ♥.
Work: Squarespace Developer and founder of SF Digital, building the features Squarespace didn't include™.
Content: Links in my posts may refer to SF Digital products or may be affiliate links.

Buy me a coffee

Link to comment
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.

spacer.png

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

Edited by paul2009
added image

Improve your online store with our extensions.
About: Squarespace Circle Leader since 2017. I value honesty, transparency, appreciation and great design ♥.
Work: Squarespace Developer and founder of SF Digital, building the features Squarespace didn't include™.
Content: Links in my posts may refer to SF Digital products or may be affiliate links.

Buy me a coffee

Link to comment

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

Link to comment
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.

Edited by paul2009

Improve your online store with our extensions.
About: Squarespace Circle Leader since 2017. I value honesty, transparency, appreciation and great design ♥.
Work: Squarespace Developer and founder of SF Digital, building the features Squarespace didn't include™.
Content: Links in my posts may refer to SF Digital products or may be affiliate links.

Buy me a coffee

Link to comment
  • 1 month later...
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?

Screen Shot 2022-01-29 at 11.38.44 AM.png

Link to comment
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.

Improve your online store with our extensions.
About: Squarespace Circle Leader since 2017. I value honesty, transparency, appreciation and great design ♥.
Work: Squarespace Developer and founder of SF Digital, building the features Squarespace didn't include™.
Content: Links in my posts may refer to SF Digital products or may be affiliate links.

Buy me a coffee

Link to comment

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  ⬇️

 

Improve your online store with our extensions.
About: Squarespace Circle Leader since 2017. I value honesty, transparency, appreciation and great design ♥.
Work: Squarespace Developer and founder of SF Digital, building the features Squarespace didn't include™.
Content: Links in my posts may refer to SF Digital products or may be affiliate links.

Buy me a coffee

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.