0
172
VistasHow to add a div element to another div element through jQuery in Wordpress?
I'm building a checkout page in Wordpress with Woocommerce and I would like to change the position of this coupon
I tried using jQuery to add the .woocommerce-form-coupon-toggle coupon class to the ID of the order review table,but the class is not added, and if I call the function itself in the order-review.php file, it gives me an error.
my code:
add_filter( 'woocommerce_checkout_order_review', 'add_class_element');
function add_class_element() {
?>
<script type="text/javascript">
jQuery(function($) {
$('#order_review ').addClass('woocommerce-form-coupon-toggle');
});
</script>
<?php
}
add_filter( 'woocommerce_checkout_order_review', 'add_class_element');
I also tried to create a jQuery function in an external file and call it in functions.php:
function ws_add_class_to_order_review()
{
wp_register_script(
'custom_script',
get_template_directory_uri() . '/assets/js/main-navigation.js',
array('jquery'),
'1.0'
);
wp_enqueue_script('custom_script');
}
add_action('wp_enqueue_scripts', 'ws_add_class_to_order_review');
In main-navigation.js:
jQuery( document ).ready( function() {
jQuery( '#order_review' ).addClass( '.woocommerce-form-coupon-toggle' );
} );
Is there any way I can add the coupon class to the page element? or call it another way?
1 Respuestas
Responde la pregunta0
The script in your main-navigation.js is correct, but you need to add extra event because Woocommerce will update the div in #order_review by AJAX when the prices are updated (when customer update shipping address / change the shipping method...).
You can add use Woocommerce event updated_checkout like this
jQuery( '#order_review' ).addClass( '.woocommerce-form-coupon-toggle' );
jQuery(document.body).on('updated_checkout', function(){
jQuery( '#order_review' ).addClass( '.woocommerce-form-coupon-toggle' );
});