简体   繁体   中英

Hide add to cart button if extra product option is chosen

I am using Woocommerce with a request for quote plugin an TM Extra Product Options Plugin.

I want my customers usually to ask for a quote, so on every product there is a button for that next to the "add to cart" button.

If a customer chooses a certain option of the product (via TM Extra Product Options), I want to hide the add to cart button to only make it possible to ask for a quote. And not to check out directly.

I already found this snippet to make the button visible or invisible.

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);
}

But I don't have any idea how to write a condition that it is only hidden if the field in TM Extra product options is checked. Here is the HTML of the Radio Button.

<li class="tmcp-field-wrap tm-per-row tc-active">
        <label class="tm-epo-field-label" for="tmcp_choice_4_0_561e9641a28f9d">
                <input class="tmcp-field tm-epo-field tmcp-radio tcenabled" name="tmcp_radio_4" data-price="" data-rules="[&quot;&quot;]" data-original-rules="[&quot;&quot;]" data-rulestype="[&quot;&quot;]" data-image="" data-imagec="" data-imagep="" data-imagel="" data-image-variations="[]" value="kostenlose Preisanfrage_0" id="tmcp_choice_4_0_561e9641a28f9d" type="radio" checked="checked">
        <span class="tc-label-wrap"><span class="tc-label tm-label">kostenlose Preisanfrage</span></span>    </label>
    <span class="tc-price-wrap">
    <span class="price tc-price hidden">
    <span class="amount">0,00€</span>
</span>
</span>
        </li>
        </li>

I am not sure if this even is the best way to do it.

I believe unfortunately as you are needing to change the button as the user selects the radio button, you can't do it in the php code unless by using ajax. Though you can control it via some jQuery. I believe something like the following should work if added to the page. It listens for any changes to the radio button, and if it does change it checks if it is checked and if the value is the value of the specified radio button option. If so it disables the add to cart button.

jQuery("input[type=radio][name='tmcp_radio_4']").change(function() { 
if (this.checked && value='kostenlose Preisanfrage_0' ) 
    jQuery('.single_add_to_cart').prop('disabled', true);
else
    jQuery('.single_add_to_cart').prop('disabled', false);
});

If you are using a Chrome brower, you could try adding this in the console on the page you want to try it on, to test if it works. You should see the change to the Add to Cart button when you change the radio button. If it works you can then proceed to add it to your code.

In case you are not sure how to add it to your code, there are many ways to add jQuery code in WordPress here is an article about it How to Properly Add jQuery scripts to WordPress

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM