Custom field + Variations

Just gonna try my luck here an hopefully I can get someones help. I’ve been trying for a long time and it’s getting frustrating as I am no JS expert and still unable to get it to work after trying various methods. I am currently using Snipcart on Webflow.

1.) Product variations & pricing – How do I have the different pricing of the variations to display without the brackets. Right now it is showing as “Walnut [+70]” instead of “Walnut +$70”.

2.) I would like the customer to be able to input on a custom field on the products page instead and have the inputs reflected in the cart instead of having them input on the cart itself. I would love to have data-item-custom1-name=“Custom Name” on the products page instead in the cart.

Really appreciate the help!

Hi @nigeltangg

We don’t show the price modifier for the product variation in the dropdown. Could you send us a link to your store or paste your product definition here? We’ll take a look at what’s going on.

Concerning your second question, you can create an external dropdown and update the data-item-customX-value attribute dynamically to set a default value to the custom field. We have an example in this section of our documentation.

Let me know if that helps,

Cheers!

2.) I would like the customer to be able to input on a custom field on the products page instead and have the inputs reflected in the cart instead of having them input on the cart itself. I would love to have data-item-custom1-name=“Custom Name” on the products page instead in the cart.

Here is an example for this exact use case:

Hope this helps!

1 Like

Hi Dominic

Thanks for the quick help! Sorry, maybe I have worded my example wrongly. I’ve got the selector part working. What I would like is to have an input field on my product page where the customer can type in any custom information such as name,gift messages etc. Thank you!

Hi Michael,

Yes I found it weird that it is showing as well and I couldn’t get rid of it. Right now, it is only showing on the dropdown on my products page but not on the cart. Here’s the link to the product page Ring Bearer Box.

For the second question. Sorry, maybe I have worded my example wrongly. I’ve got the selector part working. What I would like is to have an input field on my product page where the customer can type in any custom information such as name,gift messages etc. Thank you!

Hi @nigeltangg

Do you mean you want a text custom field instead of (or in addition to) the dropdown custom field? If so, you can apply the same principle as the example.

Let me know if I’m still not getting it :wink:

As for your first point, here is the issue:
image

The value attribute is what is used to set Snipcart’s custom field value,
the text between your <option> tag is only for the customer.

This means you could write your options like this:
<option value="Oak (L)">Oak (L)</option>

Cheers!