How to make this line item required to add product to cart?

I figured out how to add a line item for personalization to a specific product page, and it works fine, but even after adding the ‘required’ attribute, it still allows me to add to cart without filling in any text. How can I fix this?

This is the page with the input that needs to be required: https://tipsyhues.com/collections/shop/products/personalized-shadow-box

I did remove the id required attribute because it didn’t work anyway.

Hi @Anonymous ,

I checked and your add to cart works with ajax so it won’t be able to check required.
So if you want it to work on this product page you need to do the following steps:


  • Step 2: Find ‘add_to_cart’ button, remove ‘ajax-submit’ class and change type=“button” => type=“submit”
    https://i.imgur.com/Twzjzsn.png
    Hope it helps!
1 Like

Thank you so much! That worked perfectly :slightly_smiling_face:

1 Like

@LitCommerce any idea how to get the Buy It Now button to do the same? It still allows purchase and bypasses the input requirement. I would simply disable it, but with the Artisan theme it adds a fixed Add to Cart button when you disable the Buy it Now button.

Hi @Anonymous ,

With buy now button you need to add JS for it, this will be more complicated requirement.

Or simply remove it, find ‘form | payment_button’ and remove code: “{{ form | payment_button }}”

Hope it helps!

@LitCommerce I found {{ form | payment_button }}, but wouldn’t removing that also remove the Buy it Now from all the other product pages? All the different product templates I have pull from the same ‘product-form’ …

GUESS WHAT!? As I was typing that, it hit me - Make a duplicate product form just for that one product and change that product template to render the duplicated and altered form. Now only that product does not show a Buy it Now button while the others still do :slightly_smiling_face:

THANK YOU!!!

Hi @Anonymous ,

Is it in a separate product-form file? Or in the template you just created. If it’s in a separate product-form file, you need to create a new product-form file, copy everything and make changes to the new file.

Hope it helps!

1 Like

Yes, I made a separate product-form so now I have two. Default products render the original form, the custom product renders the new form.

1 Like