Задача. Необходимо настроить автоматическое обновление корзины в Woocommerce при изменении количества товаров.
Решение 1. Использовать плагины:
- WooCommerce AJAX Cart (Moises Heberle) — к автообновлению корзины + небольшое оформление полей ввода количества.
- Ajax Cart AutoUpdate for WooCommerce (taisho)
- WooCommerce Ajax Cart Plugin
Решение 2. Вариант кода №1, вставить в functions.php, Если скрывать кнопку обновления не нужно, то <style>...</style> убираем:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
// Обновление корзины при изменении колич.товара add_action( 'wp_footer', 'cart_update_qty_script' ); function cart_update_qty_script() { if (is_cart()) : // Проверяем страница корзины это или нет ?> <style> /* Если хотим скрыть кнопку кнопку "Обновить". Если не нужно, то убираем весь style */ button[name="update_cart"]{display: none;}</style> <script> jQuery( function( $ ) { $( 'body' ).on( 'change', '.qty', function() { // поле с количеством имеет класс .qty setTimeout(function() { $( '[name="update_cart"]' ).trigger( 'click' ); }, 1300 ); // 1300 - задержка в мс до срабатывания } ); } ); </script> <?php endif; } // End Обновление корзины при изменении колич.товара |
Решение 3. Вариант кода №2, если кнопки для изменения количества товаров в корзине кастомные, нужно добавить еще функцию срабатывания по событию клика на кнопки инкремента и декремента. Смотрим какие классы у кнопок добавления / уменьшения количества товара и заменяем .quantity-button.dec и .quantity-button.inc на свои:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
// Обновление корзины при изменении колич.товара add_action( 'wp_footer', 'cart_update_qty_script' ); function cart_update_qty_script() { if (is_cart()) : // Проверяем страница корзины это или нет ?> <style> /* Если хотим скрыть кнопку кнопку "Обновить". */ button[name="update_cart"]{display: none;}</style> <script> jQuery( function( $ ) { $( 'body' ).on( 'change', '.qty', function() { // поле с количеством имеет класс .qty setTimeout(function() { $( '[name="update_cart"]' ).trigger( 'click' ); }, 1300 ); } ); $( 'body' ).on( 'click', '.quantity-button.inc, .quantity-button.dec', function() { // элементы инкремента/декремента setTimeout(function() { $( '[name="update_cart"]' ).trigger( 'click' ); }, 1300 ); } ); } ); </script> <?php endif; } // End Обновление корзины при изменении колич.товара |
Работает. Вы — топ 🙂