I am using a plugin to help "build" a customized product. There are different tabs/steps the user has to go through with back and continue buttons. At the last step I would like to add an "agree to terms" box with a checkbox "Agree". I have this done. But I would like to hide the add to cart button in Woocommerce until the user selects the checkbox agreeing to the terms.

This will be beneficial to me to make sure they reviewed the return policy as well as avoid confusion with the add to cart button appearing during all the steps, assuring they go through all the steps.

Here is the checkbox coding i pulled from console:

<ul data-rules="{&quot;Agree_0&quot;:[&quot;&quot;]}" data-original-rules="{&quot;Agree_0&quot;:[&quot;&quot;]}" data-rulestype="{&quot;Agree_0&quot;:[&quot;&quot;]}" data-tm-validation="{&quot;required&quot;:true}" class="tmcp-ul-wrap tmcp-elements tm-extra-product-options-checkbox tm-element-ul-checkbox element_16 termsbox-ul">
    <li class="tmcp-field-wrap tmhexcolorimage-li-nowh">
        <label for="tmcp_choice_16_0_35">    <input class="tmcp-field termsbox tmhexcolor_16_0_35 tm-epo-field tmcp-checkbox" name="tmcp_checkbox_16_0" data-limit="" data-exactlimit="" data-minimumlimit="" data-image="" data-imagec="" data-imagep="" data-imagel="" data-image-variations="[]" data-price="" data-rules="[&quot;&quot;]" data-original-rules="[&quot;&quot;]" data-rulestype="[&quot;&quot;]" value="Agree_0" id="tmcp_choice_16_0_35" tabindex="35" type="checkbox">
    <span for="tmcp_choice_16_0_35"></span><span class="tc-label tm-label">Agree</span></label> <span class="price tc-price  hidden">
    <span class="amount">$0.00</span>
</span><i data-tm-tooltip-html="This is were the description will be to agree" class="tm-tooltip tc-tooltip tcfa tcfa-question-circle"></i>     </li></ul>

Here is the add to cart section with the quantity

<div class="quantity buttons_added">
    <input value="-" class="minus button is-form" type="button">    <input class="input-text qty text" step="1" min="1" max="9999" name="quantity" value="1" title="Qty" size="4" pattern="[0-9]*" inputmode="numeric" type="number">
    <input value="+" class="plus button is-form" type="button">  </div>
<button type="submit" name="add-to-cart" value="267" class="single_add_to_cart_button button alt">Add to cart</button>

I am self taught with html and css, but javascript is to foreign for me

I tried the following in CSS but it does nothing.Tried is on codepen and works (i know needs to show instead of hide when checked)....

input[type=checkbox]:checked + .single_add_to_cart_button {
    display:none !important;

  • To remove Add To Cart Button: remove_action('woocommerce_after_shop_loop_item', 'woocommerce_template_loop_add_to_cart', 10); – VipinKundal May 24 at 11:14

Just add the following code in your functions.php and you will find button hidden

I don't know whether my solution is perfect. But it works. Normally if is_purchasable is returned to the filter woocommerce_is_purchasable, the ‘Add to Cart’ button is displayed, and if false is returned the button is hidden. So, you just need to add the following:

add_filter('woocommerce_is_purchasable', 'my_woocommerce_is_purchasable', 10, 2);

function my_woocommerce_is_purchasable($is_purchasable, $product) {
 // Write code to access checkbox value in this function
 // let $checkbox_value be the value from checkbox
  return ($checkbox_value == false ? false : $is_purchasable);

No incompatibility issues would creep up.

| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.