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="{"Agree_0":[""]}" data-original-rules="{"Agree_0":[""]}" data-rulestype="{"Agree_0":[""]}" data-tm-validation="{"required":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="[""]" data-original-rules="[""]" data-rulestype="[""]" 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;
}
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="{"Agree_0":[""]}" data-original-rules="{"Agree_0":[""]}" data-rulestype="{"Agree_0":[""]}" data-tm-validation="{"required":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="[""]" data-original-rules="[""]" data-rulestype="[""]" 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;
}
1 Answer
Reset to default 1Just 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.
remove_action('woocommerce_after_shop_loop_item', 'woocommerce_template_loop_add_to_cart', 10);– VipinKundal Commented May 24, 2020 at 11:14