Jump to content

Add notes for product on Cart page

Recommended Posts

I've not heard of this feature on Squarespace, nor seen a plugin for it, what you can do is add a Checkout Form with this field or more info:

https://support.squarespace.com/hc/en-us/articles/206540907-Creating-a-custom-checkout-form

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment

 

19 hours ago, cinnamoncat said:

I am hoping to add a text box for shoppers to add notes for their orders, similar to Etsy. Is this possible?

You can request information at the checkout using a Custom Checkout Form (as Ziggy explained) or, if the information is specific to a product or service, you can request information when a product is added to the cart using a Custom Product Form.

These are the only two options. Other options are not possible, even with code or plugins. It is not possible to request information on the cart page, as shown in your mock-up. 

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

Edited by paul2009

About me: I'm Paul. A SQSP User for 18 yrs, I joined Circle when it launched in 2016 and have been a Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥.
Work: Founder of SF.DIGITAL, providing expertise and extensions to supercharge your Squarespace website. 
Content: Views and opinions are my own. Links in my posts may refer to my own SF.DIGITAL products or may be affiliate links.
Forum advice is free. You can thank me by clicking one of the feedback emojis below. Coffee fuels my work.

Book paid help with a Squarespace Domain

Link to comment

just one small addition I thought of: if you use the Custom Product Form that Paul mentions (the best option IMO) you do get a link that says "Edit Details" on the cart page. You can get to that in css by using button.cart-row-edit. e.g. to change the wording you could try. you won't get a text box on the page but you can get them to fill in / edit the notes in the dialog that comes up. 

button.cart-row-edit::before {
  content:'Add Notes'
}
button.cart-row-edit span {
  display:none;
}

if you wanted to change the text in the cart for a specific product then you can do that by using the products url in a sibling selector

button.cart-row-edit::before {
  content:'Add Notes'
}
button.cart-row-edit span {
  display:none;
}

.cart-row-desc a[href='/store/p/golden-mist-cup-weny8-54bjz'] ~
button.cart-row-edit::before {
  content:'Misty Cup Notes'
}

image.png.a9d683667ae6d6d5252c30929f642459.png

Edited by iamdavehart

Dave Hart. Software/Technology Consultant living in London. buymeacoffee 

Link to comment

True, but of course the form isn't optional. The customer will have already seen the Custom Product Form launch when they clicked Add to Cart.

About me: I'm Paul. A SQSP User for 18 yrs, I joined Circle when it launched in 2016 and have been a Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥.
Work: Founder of SF.DIGITAL, providing expertise and extensions to supercharge your Squarespace website. 
Content: Views and opinions are my own. Links in my posts may refer to my own SF.DIGITAL products or may be affiliate links.
Forum advice is free. You can thank me by clicking one of the feedback emojis below. Coffee fuels my work.

Book paid help with a Squarespace Domain

Link to comment

@paul2009 Good point! You could bypass that easily enough on the product page with a bit of code to take the use-form class off the button, but I think it's probably decent user experience as is though and we're probably moving dangerously towards the territory where I write "for educational purposes only". 

 

Dave Hart. Software/Technology Consultant living in London. buymeacoffee 

Link to comment
On 9/5/2023 at 4:02 AM, iamdavehart said:

just one small addition I thought of: if you use the Custom Product Form that Paul mentions (the best option IMO) you do get a link that says "Edit Details" on the cart page. You can get to that in css by using button.cart-row-edit. e.g. to change the wording you could try. you won't get a text box on the page but you can get them to fill in / edit the notes in the dialog that comes up. 

button.cart-row-edit::before {
  content:'Add Notes'
}
button.cart-row-edit span {
  display:none;
}

if you wanted to change the text in the cart for a specific product then you can do that by using the products url in a sibling selector

button.cart-row-edit::before {
  content:'Add Notes'
}
button.cart-row-edit span {
  display:none;
}

.cart-row-desc a[href='/store/p/golden-mist-cup-weny8-54bjz'] ~
button.cart-row-edit::before {
  content:'Misty Cup Notes'
}

image.png.a9d683667ae6d6d5252c30929f642459.png

 

@iamdavehart

This first example is perfect! I added the code but it didn't seem to work.

Am I missing something?

 

Screen Shot 2023-09-06 at 1.07.16 PM.png

Link to comment
1 hour ago, cinnamoncat said:

I added the code but it didn't seem to work.

Did you add a Custom Product Form to the product? It will only appear when a product has this form. 

About me: I'm Paul. A SQSP User for 18 yrs, I joined Circle when it launched in 2016 and have been a Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥.
Work: Founder of SF.DIGITAL, providing expertise and extensions to supercharge your Squarespace website. 
Content: Views and opinions are my own. Links in my posts may refer to my own SF.DIGITAL products or may be affiliate links.
Forum advice is free. You can thank me by clicking one of the feedback emojis below. Coffee fuels my work.

Book paid help with a Squarespace Domain

Link to comment

yes, so as Paul said in his reply just after mine, you will definitely get the form when you click Add to Cart from the product form. (and in your case you'll have to fill in the Notes as you've made them required). You will then also see the Edit Details link in the cart. At this point you can use the CSS i quoted to change the text. It looks like currently (on your published site) that you haven't saved the CSS as it's not rendering. I would make sure that you save the CSS then go and add the Customizable Baby Bibs on your site and try it out. I've tried the two simple rules on your cart and they do work. I have seen that sometimes they might not render in the config itself but try it in the published site and it should work

 

 

 

Dave Hart. Software/Technology Consultant living in London. buymeacoffee 

Link to comment

Well, sort of. As I alluded in a reply to paul: you can, but I don't think you should tbh. The main reason is that there's a danger you're going to get an invalid order record into the customers cart which they then won't be able to check out. This will certainly happen in the case where you have required fields in your custom form (which you do), squarespace will think its an invalid order and wont add it to the cart.

however, if you must, and if you're prepared for the fact that it might break at some point as its non-standard behaviour, then you can try this. (you must make sure that you have no required fields in your custom product form - it won't work otherwise). Because you're modifying the classes assigned to elements you'll also have to have premium account as we'll need to add some code.

in the advanced section of the stores settings, go to your Page Header Code Injection and add this:

<script>
document.addEventListener("DOMContentLoaded", function () { 
	document.querySelectorAll(".sqs-add-to-cart-button.use-form")
      	.forEach(function(e) { e.classList.remove("use-form"); });
});
</script>

You can test it out, but honestly I'll just reiterate that I don't think you should do this. Apart from the fact that we're bypassing Squarespace's default behaviour, it feels like bad UX to me to have people have to wait until the cart to fill this stuff out. if it's optional and they want to skip it then just make sure it's clearly labelled that they can do that when the pop up comes and just fill it in in the cart later on. If you feel you must bypass the form then by all means try the code above.

Dave Hart. Software/Technology Consultant living in London. buymeacoffee 

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.