Add accept terms checkbox on product page (not cart page)

Highlighted
New Member
7 0 0

Hi,

Has anyone added a terms and conditions checkbox in the product page? I have a couple of products only in my store that require additional terms to be accepted before purchase, so I'm trying to add a checkbox to the product page which will only let you add a product to cart once selected. Any ideas?

I have a checkbox on the cart page already for the overall store, but need specific terms to be selected for a couple of products which are not suitable to just have buried in the general terms.

Any help would be great!

 

0 Likes
Highlighted

Hello Anna,

You can certainly add terms and condition checkbox on product page that will only add a product to the cart when the checkbox is checked, but you will need to write some javascript code in order to acheive that, so it would be better to get some help from a person with some coding background. A knowledgable person might do the trick within half hour.

Have something to say? Or need to say Hi! just mail me at sagar.khadke03@gmail.com or visit https://sagarkhadke.myshopify.com
0 Likes
Highlighted
New Member
7 0 0

Any idea where to find a "knowledgeable person" to help?

I can add checkboxes into the product page no worries, just don't know how to disable the add to cart button until all of them are checked. The code I use for the checkboxes is (the "Yes..." text is just an example":

<div class="checkbox">
  <label><input type="checkbox" value="">Yes I agree to part 1</label>
</div>
<div class="checkbox">
  <label><input type="checkbox" value="">Yes I agree to part 2</label>
</div>
<div class="checkbox disabled">
  <label><input type="checkbox" value="" disabled>Yes I agree to part 3</label>
</div>

The code below is for adding in a checkout to the cart page, but I don't know how to adapt it for the product page:

 

  $(document).ready(function() {
    $('body').on('click', '[name="checkout"], [name="goto_pp"], [name="goto_gc"]', function() {
      if ($('#agree').is(':checked')) {
        $(this).submit();
      }
      else {
        alert("You must agree with the terms and conditions of sales to check out.");
        return false;
      }
    });
  });
0 Likes
Highlighted

Hello Anna,

Here is the link to my JSFiddle with your example, and it will work on any page. And you may have as many checkboxes as you want, just add the same class to that checkbox and it will work.

Hope that helps!

Have something to say? Or need to say Hi! just mail me at sagar.khadke03@gmail.com or visit https://sagarkhadke.myshopify.com
0 Likes
Highlighted
New Member
7 0 0

That's a great help thanks. I'm using the existing Add to Cart button,so have adapted it to the following - but the alert is only coming up if none of the checkboxes are selected. I want the alert to still come up if only two boxes are selected, and only have the add to cart button go through when all three are checked.

What do I need to change?

 

    $(document).ready(function() {
    $('body').on('click', '[name="add"]', function() {
      if ($('#acceptTerms').is(':checked')) {
        $(this).submit();
      }
      else {
        alert("You must agree to the terms to proceed");
        return false;
      }
    });
  });

0 Likes
Highlighted
New Member
3 0 0

Hello, 

would you know how to make checkbox, in final step/ order. 

In my country we have to have checkkox to confirm final information about user, order, shipping and payment. These checkboxes have to be in the final step of order (not before the check out)

Please let me know if you are able to help me or no :)

 

Best regards Filip

0 Likes
Highlighted
New Member
3 0 0

Hello, 

would you know how to make checkbox, in final step/ order. 

In my country we have to have checkkox to confirm final information about user, order, shipping and payment. These checkboxes have to be in the final step of order (not before the check out)

Please let me know if you are able to help me or no :)

 

Best regards Filip

0 Likes
Highlighted
New Member
5 0 0

Hello,

 

Where would this code go for a product and how would we be able to choose an item to use?

 

Our store: https://shop.openroadhd.com/ wants to use this to sell helmets, but they are not allowed to be returned because of DOT law in the US. What we would like to do similar is another dealership is using. Example: https://www.wisconsinharley.com/harley-davidson-womens-fly-by-ultra-light-j02-half-helmet-black-9822....

 

Could you help us out? I am kinda knowegable on coding as I go. I just am unsure of where it goes in the code. 

 

This is what I took from what you already have, would this be right?

<div class="checkbox">
<label><input type="checkbox" value="" class="acceptTerms">FINAL SALE - I acknowledge this item may not be returned due to strict health and safety regulations.</label>
<input type="submit" value="add to cart" disabled id="addToCart">

 

Your help is very appreciated. I have been trying to rack my brain for months on this. 

0 Likes
Highlighted
Excursionist
56 0 5

@Sagar_Khadke 

Hi, I'm trying to use your code on my product pages. It worked fine on a previous theme, but I'm having an issue on the Streamline theme now.
It works when the product page is initially loaded, but when selecting a different variant, a customer is able to add to cart without checking the box.

Can you help? Here is an example on my store:

https://www.killyourgod.net/collections/outerwear/products/numb-mens-bomber-jacket

 

0 Likes