0
294
VistasHide 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.
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.
2 Respuestas
Responde la pregunta0
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.
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 );