Add notes for product on Cart page

Hello,

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

https://rhombus-coconut-gfrg.squarespace.com/
password: bunny

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

That's not really what I'm looking for, thank you though. 

Hoping someone else can find a workaround.

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

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'
}

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.

@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". 

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'
}

@iamdavehart

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

Am I missing something?

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. 

@paul2009 I did, but I'm getting a pop-up on the item page instead of the Notes link like in @iamdavehart's images

and the cart shows "edit details" instead of "add notes"

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

hi @iamdavehart is there any way to remove the pop-up when you click 'add to cart'? 

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.

Hi @iamdavehart thank you for your thorough response and help!!