I want to auto update the cart when quantity is changed. I got this working code in functions.php, but it's only working for the first click. How to adjust it so it's working for every click?
add_action( 'wp_footer', 'cart_update_qty_script' );
function cart_update_qty_script() {
if (is_cart()) :
?>
<script>
jQuery('div.woocommerce').on('click', '.quantity .button', function(){
jQuery("[name='update_cart']").trigger("click"); });
</script>
<?php
endif;
}
try it like this..
add_action( 'wp_footer', 'cart_update_qty_script' );
function cart_update_qty_script() {
if (is_cart()) :
?>
<script>
jQuery( 'div.woocommerce' ).on( 'change', '.qty', function () {
jQuery( "[name='update_cart']" ).trigger( "click" );
} );
</script>
<?php
endif;
}
I it's because the html is being replaced, div.woocommerce click event is no longer there... if you attached it to body, it might work...
The reason that is happening is because your dom is refreshed with the Ajax and events are flushed.
What you need to do is listen to the event 'updated_cart_totals' which will tell you that dom is updated and after that reactivate your listeners.
function quantity_upd() {
$(".woocommerce-cart-form").on("change", ".qty", function() {
$("[name='update_cart']").removeAttr('disabled');
$("[name='update_cart']").trigger("click");
});
}
$( document ).on( 'updated_cart_totals', function() {
quantity_upd();
}
Please adjust it for your theme and HTML, it can vary
The reason it only works on the first click is because everytime you update the form, it refreshes itself. So instead of doing:
jQuery('div.woocommerce').on('click', '.quantity .button', function() {
You need to switch div.woocommerce to document:
jQuery('document').on('click', '.quantity .button', function() {
You can use plugin like below.
https://wordpress.org/plugins/woo-update-cart-on-quantity-change/
Also this plugin is working for you.
https://wordpress.org/plugins/woocommerce-ajax-cart/
Please use plugin for your safe side because plugin works in every wordpress version and woocommerce version.
OR
You can try custom code with minor modifications like below.
add_action( 'wp_footer', 'cart_update_qty_script' );
function cart_update_qty_script() {
if (is_cart()) :
?>
<script type="text/javascript">
jQuery(document).on("click", "div.woocommerce .quantity .button", function(e) {
jQuery("[name='update_cart']").trigger("click");
});
OR
jQuery("body").on("click", "div.woocommerce .quantity .button", function(e) {
jQuery("[name='update_cart']").trigger("click");
});
</script>
<?php
endif;
}
As I don't know your HTML structure so I built a sample jQuery which is working on storefront theme.
Here is a sample code.
add_action( 'wp_footer', 'cart_update_qty_script' );
function cart_update_qty_script() {
if (is_cart()) :
?>
<script>
jQuery('div.woocommerce').on('keyup', '.quantity .qty', function(){
//console.log('clicked');
jQuery("[name='update_cart']").trigger("click"); });
</script>
<?php
endif;
}
Rather than try to trigger the click, how about removing the "disabled" attribute from the Update Cart button so the user can click it. The cart page already works this way where when the quantity is changed on an item, the Update Cart button becomes clickable.
add_action( 'wp_footer', 'cart_update_qty_script' );
function cart_update_qty_script() {
if (is_cart()) :
?>
<script>
jQuery('body').on('click', 'div.woocommerce .quantity .button', function(){
jQuery("[name='update_cart']").prop("disabled", false);
});
</script>
<?php
endif;
}
The update button is actually disabled when the page loads, so you need basically to enable it, right before triggering the click event.
Use this code:
add_action( 'wp_footer', 'cart_update_qty_script' );
function cart_update_qty_script() {
if (is_cart()) :
?>
<script>
jQuery('div.woocommerce').on('change', '.qty', function(){
jQuery("[name='update_cart']").removeAttr('disabled');
jQuery("[name='update_cart']").trigger("click");
});
</script>
<?php
endif;
}
Copy this code to functions:
function bbloomer_cart_refresh_update_qty() {
if (is_cart()) {
?>
<script>
jQuery('div.woocommerce').on('change', '.qty', function(){
jQuery("[name='update_cart']").prop("disabled", false);
jQuery("[name='update_cart']").trigger("click");
});
</script>
<?php
}
}
End this to style:
button[name='update_cart'] {
display: none !important;
}
Related
I have searched and searched on the forum but no right code to do the following job. The code below auto updates changes in quantity on the shopping cart. Yet, it is not working on the Off canvas flyout cart. See
How do I change the code so that it also works on that cart?
add_action( 'wp_footer', 'ava_cart_refresh_update_qty', 9999 );
function ava_cart_refresh_update_qty() {
if (is_cart()) {
?>
<script type="text/javascript">
(function($) {
var triggerUpdate = function() {
$('.woocommerce-cart-form .quantity').on('click', '.qty, .plus, .minus', function(){
console.log('test');
$("button[name='update_cart']").trigger("click");
});
}
triggerUpdate();
$(document).ajaxComplete(function() {
triggerUpdate();
});
})(jQuery);
</script>
<?php
}
}
Hi have a wocommerce plugin, While changing the payment method. the cost for shipping my function calculate_shipping is not being called. and therefore shipping methods are not updating with appropriate cost
here are some samples from my code.
public function __construct() {
add_action('woocommerce_review_order_before_payment', array($this, 'update_shipping_charges'), 1);
}
public function update_shipping_charges() {
// jQuery code
?>
<script type="text/javascript">
(function ($) {
$('form.checkout').on('change', 'input[name^="payment_method"]', function () {
// Set the select value in a variable
$('body').trigger('update_checkout');
//testing
$('body').on('updated_checkout', function() {
console.log('updated');
});
});
})(jQuery);
</script>
<?php
}
Try wrapping everything inside the init hook. Maybe the code gets executed too early:
public function __construct() {
add_action( 'init', [ $this, 'init_action' ] );
}
public function init_action(): void {
add_action( 'woocommerce_review_order_before_payment', [ $this, 'update_shipping_charges' ], 1 );
}
public function update_shipping_charges(): void {
// jQuery code
?>
<script type="text/javascript">
(function ( $ ) {
$( 'form.checkout' ).on( 'change', 'input[name^="payment_method"]', function () {
// Set the select value in a variable
let body = $( 'body' );
body.trigger( 'update_checkout' );
//testing
body.on( 'updated_checkout', function () {
console.log( 'updated' );
} );
} );
})( jQuery );
</script>
<?php
}
You could try multiple hooks if init don't works:
woocommerce_loaded
woocommerce_init
plugins_loaded <- I use this one in my plugins for example
Please try the following (Add to functions.php or via Code Snippets plugin)
function kia_checkout_on_payment_change() {
wp_add_inline_script( 'wc-checkout', '
jQuery( document.body ).on( "payment_method_selected", function() {
jQuery( "form.checkout" ).trigger( "update_checkout", { update_shipping_method: true } );
console.log("payment selected");
} );
'
);
}
add_action( 'wp_enqueue_scripts', 'kia_checkout_on_payment_change' );
A couple notes....
We're adding the script right after the wc-checkout script is loaded.
We're listening for the WooCommerce checkout script's payment_method_selected (but yes, it's a core Woo trigger in the checkout) trigger which should fire when the payment method is changed
We're explicitly passing some arguments to the update_checkout function.
Don't have any shipping methods set up locally to test it properly, but I hope it points you in the right direction.
The header is designed using "Elementor - Header, Footer & Blocks" plugin. The dropdown is not working. Tried activating, deactivating plugin, clearing cache.
Website Link:
https://www.party-monsters.com/
Try this below code. code goes in your active theme functions.php file.
function add_custom_js(){
?>
<script type="text/javascript">
(function($){
$(document).ready(function(){
$('.hfe-has-submenu .hfe-menu-item').on('click',function(e){
e.preventDefault();
if( $(this).closest('li').find('.sub-menu').css('opacity') === '0' ){
$(this).closest('li').find('.sub-menu').css({"visibility": "visible", "opacity": "1"});
}else{
$(this).closest('li').find('.sub-menu').css({"visibility": "hidden", "opacity": "0"});
}
});
});
})(jQuery);
</script>
<?php
}
add_action( 'wp_footer', 'add_custom_js', 10, 1 );
Tested and works.
This question already has answers here:
Run javascript code after ajax add to cart event in Woocommerce
(1 answer)
JS alert on ajax add to cart for specific product category count in Woocommerce
(1 answer)
Closed 4 years ago.
Every time a product is added to the basket by ajax and the mini cart is refreshed I need to be able to run some jQuery. I can't just simply create an even for add to cart because, I run some jQuery that checks if the mini cart has products inside it, but the add to cart even runs before the mini cart has added the products. This means that my if statement becomes false.
What can I do about this apart from creating a timeout in jQuery?
Here is the code I have modified from the current answers;
add_action( 'wp_footer', 'ajax_add_tocart_event' );
function ajax_add_tocart_event() {
?>
<script type="text/javascript">
jQuery( 'body' ).on( 'added_to_cart', function() {
if( $('#mini_wrap .cart_list').length ){
alert('hi');
}
} );
</script>
<?php
}
You can do using following code.
add_action( 'wp_footer', 'ajax_add_tocart_event' );
function ajax_add_tocart_event() {
?>
<script type="text/javascript">
jQuery( 'body' ).on( 'added_to_cart', function( e, fragments, cart_hash, this_button ) {
alert('product added to cart');
} );
</script>
<?php
} ?>
Put this code in functions.php file.
add_action( 'wp_footer', 'trigger_for_ajax_add_to_cart' );
function trigger_for_ajax_add_to_cart() {
?>
<script type="text/javascript">
(function($){
$('body').on( 'added_to_cart', function(){
//do some code
});
})(jQuery);
</script>
<?php
} ?>
I have this script:
$(document).ready(function(){
$("text1").click(function(){
$(this).hide();
});
});
Code html:
<div class="div1">
<p class="text1">text to appear when the user puts the mouse over</p>
</div>
I want to apply this script to my website in Wordpress.
I put this code in functions.php
add_action( 'wp_enqueue_scripts', 'script_echipa' );
function script_echipa()
{ wp_enqueue_script( 'script', get_template_directory_uri() . '/js/echipa.js', array('jquery'), null, true );
}
It is a very simple script that works smoothly on local Wordpress but we did not implement it.
Is something wrong?
Can you help me to solve this problem?
Thanks in advance!
You forgot to add a . before the selector for class text1 --> "text1"
$(document).ready(function(){
$(".text1").click(function(){
$(this).hide();
});
});
WordPress uses noconflict so you have to wrap your scripts in jQuery(function($) {}); in order to be able to use the dollar sign. Like so:
jQuery(function($) {
$(".text1").click(function() {
$(this).hide();
});
});