Woocommerce Question posted in
The official Woocommerce documentation can be found here.

Hide element if checkbox is not checked in Woocommerce

I am using JavaScrip to show/hide a certain element if a certain checkbox is checked.
In my case, if the "Freight forwarding" checkbox is not checked, I would like to hide deposit payment options.

enter image description here

I have added deposit.js in my child theme and enqueued it by adding the following code in functions.php

function load_hide_deposit_script() {
  if( is_page(98) ) {
    //script location - child theme//
    wp_enqueue_script( 'js-file', get_stylesheet_directory_uri() . '/deposit.js');
  }
}

add_action('wp_enqueue_scripts', 'load_hide_deposit_script');

I checked developer tools and the script is loaded successfully.

Based on How to show/hide an element on checkbox checked/unchecked states using jQuery?

I have used two approaches:

function valueChanged()
    {
        if($('.input-checkbox.thwcfe-input-field').is(":checked"))   
            $(".cart-wcdpp-fields.order-total").show();
        else
            $(".cart-wcdpp-fields.order-total").hide();
    }

and

$(".cart-wcdpp-fields.order-total").hide();
$(".input-checkbox.thwcfe-input-field").click(function() {
    if($(this).is(":checked")) {
        $(".cart-wcdpp-fields.order-total").show(300);
    } else {
        $(".cart-wcdpp-fields.order-total").hide(200);
    }
});

So far I haven’t achieved desired result with these codes.

What could be the problem?

Link to the shop page (testing site) – https://siakurjers.wpengine.com/shop/

To check the functionality please add a product to the cart and visit the checkout page.

FIDDLE

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    These two components (checkbox and deposit options) are implemented by 3rd party plugins.

    I am not sure why JS in the question did not do the trick.

    Based on Calculate fee from cart totals (subtotal + shipping) without adding it to order total value in Woocommerce, I used a PHP function with jQuery. It was inserted in the functions.php file.

    // Show/hide deposit options

function action_wp_footer() {
    // Only on checkout
    if ( is_checkout() && ! is_wc_endpoint_url() ) :
    ?>
    <script type="text/javascript">
    jQuery( function($){
        // Selector
        var my_input = 'input[name=forwarding]';
        var my_deposit = '#my_id_field';
        
        // Show or hide
        function show_or_hide() {
            if ( $( my_input ).is(':checked') ) {
                return $( my_deposit ).show();
            } else {
                return $( my_deposit ).hide();               
            }           
        }
        
        // Default
        $( document ).ajaxComplete(function() {
            show_or_hide();
        });
        
        // On change
        $( 'form.checkout' ).change(function() {
            show_or_hide();
        });
    });
    </script>
    <?php
    endif;
}
add_action( 'wp_footer', 'action_wp_footer', 10, 0 );

  2. 0

    As you can see, in How to show/hide an element on checkbox checked/unchecked states using jQuery? the $(".ItemName"). and then assign the parameter "hide".

    Try add a name to the Tr item and then try it.
    It would be better if you can show some code with JSfiddle or directly in the question.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search