New Shopify Certification now available: Liquid Storefronts for Theme Developers

Mandatory Checkbox on product page

TBSTransfers
Visitor
3 0 0

I am trying to add mandatory check buttons to 2 of my custom product pages. I have the boxes but it is allowing to not check boxes and checkout. I have tried all the things I have found on here  and google and nothing works

Replies 4 (4)
TBSTransfers
Visitor
3 0 0

myself. I have managed doing all without trouble

Relynjon
Shopify Partner
128 19 19

 

To make sure that the checkboxes on your custom product pages are mandatory and customers cannot proceed to checkout without selecting them, you'll need to add some custom code to your store. Here's how you can do it:

  1. Locate the product form code: Go to the Edit product page of your custom product, and locate the product form code. This is the code that generates the product options and add to cart button on the page.

  2. Add the required attribute to your checkboxes: Find the code for the checkboxes on your custom product page, and add the required attribute to each checkbox input element. Here's an example of what the code should look like:

 

 
<input type="checkbox" name="option1" value="option1" required>
 
  1. Test the form: Save your changes, and test the form to make sure that the checkboxes are now mandatory. You should not be able to proceed to checkout without selecting all the required checkboxes.

If this does not work, you can also try adding some custom JavaScript code to your store that will prevent checkout until the required checkboxes have been selected. Here's an example of what the code should look like:

 

javascript
$(document).on('click', '.checkout-btn', function(event) { if ($('.checkbox-input:checkbox:checked').length < 2) { event.preventDefault(); alert('Please select both checkboxes before proceeding to checkout.'); } });
 

This code will check to see if both checkboxes have been selected when the customer clicks the checkout button. If either checkbox is not selected, it will prevent checkout and display an error message.

Remember to replace .checkbox-input with the class name of your checkbox inputs, and 2 with the number of checkboxes that are required to be selected. 

I hope this helps! Let me know if you have any other questions.

TBSTransfers
Visitor
3 0 0

I tired both and neither worked where would I put the java one? maybe im putting in wrong place 

this is how its typed 

 

$(document).on('click', '.checkout-btn', function(event) { if ($('.Yes I have uploaded high resolution files (PNG 300dpi, SVG, EPS, Illustrator)Yes I have uploaded with transparent background:checkbox:checked').length < 2) { event.preventDefault(); alert('Please select both checkboxes before proceeding to checkout.'); } });

 

bolded are checkbox names

trnngctu
Tourist
10 0 1

I think his code can solve your probem

https://edcodes.gumroad.com/l/terms-checkbox?layout=profile

A new solopreneur