WooCommerce — Сообщение о подтверждении перед удалением товара из корзины и авто обновление корзины

Бывает задача сделать всплывающее сообщение, чтобы подтвердить, хотите ли вы удалить что-то из корзины магазина. Это требуется для явного согласия, попробуем это добавить. На самом деле довольно просто, все, что вам нужно, это немного jQuery, как показано ниже:

И сразу же решим частую задачу, как автоматически обновлять корзину при изменении количества. Опять же, здесь довольно простая задача. С точки зрения UX, некоторые пользователи считают кнопку обновления корзины ненужной или запутанной; хорошо, если мы можем облегчить пользователям задачу, чтобы корзина автоматически обновлялась при изменении, то почему бы не сделать это?

Простая функция PHP, за которой следуют две строки JQuery и строка CSS, и вы можете быстро реализовать это!

1. Фрагмент CSS: скройте кнопку WooCommerce «Обновить корзину»

2. PHP: автоматическое обновление корзины WooCommerce при изменении количества

Теперь, когда кнопка обновления корзины скрыта, все, что нам нужно сделать, это «щелкнуть» кнопку с помощью jQuery и позволить WooCommerce выполнить ту же работу (обновление итогов корзины, налогов и т. д.).

В частности, когда мы «нажимаем» на любой из входов количества, мы переходим и инициируем «щелчок» по скрытой кнопке «Обновить корзину».

Легко, верно?

Примечание: добавьте следующее в ваш functions.php (в дочернюю тему, если вы ее используете)

Если это помогло, оставьте комментарий и поделитесь своими мыслями! Если вам нужна помощь, мы будем рады помочь; просто напишите

4 КОММЕНТАРИИ

  1. Каким образом WooCommerce обеспечивает сообщение о подтверждении перед удалением товара из корзины и автоматическое обновление корзины?

  2. Насколько сложно реализовать автоматическое обновление корзины при изменении количества товаров в магазине? В чем заключается простая функция PHP, которая позволяет это сделать? Какие строки jQuery и CSS нужно добавить для этого?

  3. стве товаров
    php
    function update_cart_quantity($cart_item_key, $quantity) {
    WC()->cart->set_quantity($cart_item_key, $quantity);
    WC()->cart->calculate_totals();
    }

    add_action('wp_ajax_update_cart_quantity', 'update_cart_quantity');
    add_action('wp_ajax_nopriv_update_cart_quantity', 'update_cart_quantity');

    3. JavaScript: отправка ajax-запроса при изменении количества товаров
    javascript
    jQuery(function($) {
    $('.quantity input[type="number"]').on('input', function() {
    var cart_item_key = $(this).closest('.cart_item').data('cart_item_key');
    var new_quantity = $(this).val();
    $.ajax({
    url: ajaxurl,
    type: 'POST',
    data: {
    action: 'update_cart_quantity',
    cart_item_key: cart_item_key,
    quantity: new_quantity
    },
    success: function(response) {
    if (response.success) {
    location.reload();
    } else {
    console.log('Error updating cart quantity');
    }
    }
    });
    });
    });

    Теперь корзина будет автоматически обновляться при изменении количества товаров, без необходимости нажимать кнопку «Обновить корзину».

  4. С помощью данной функции можно добавить всплывающее сообщение для подтверждения удаления товара из корзины. Также можно автоматически обновлять корзину при изменении количества товаров.

    Для добавления всплывающего сообщения, нужно просто добавить данный код в файл скрипта:

    javascript

    Для автоматического обновления корзины при изменении количества товаров, необходимо добавить следующий код PHP:

    php



    Также добавьте следующий фрагмент CSS для скрытия кнопки «Обновить корзину»:

    css
    input[name='update_cart'] {
    display: none !important;
    }
    button[name='update_cart'] {
    display: none !important;
    }

    С помощью этих изменений вы сможете добавить всплывающее сообщение для подтверждения удаления товара из корзины, а также автоматическое обновление корзины при изменении количества товаров.

ОСТАВЬТЕ ОТВЕТ

Пожалуйста, введите ваш комментарий!
пожалуйста, введите ваше имя здесь

77 − = 70

OK2WEB
OK2WEB
Более 12 лет занимаюсь разработкой и продвижением сайтов. Городские порталы, информационные и новостные сайты. Сейчас в основном разрабатываю интернет магазины и коммерческие сайты. Если у вас есть вопросы пишите, стараюсь оперативно ответить и помочь.

Плагин Wordfence: как настроить сканирование сайта для проверки файлов и страниц

Плагин Wordfence предоставляет широкий набор настроек, которые позволяют гибко настроить сканирование вашего веб-сайта для проверки файлов и страниц на наличие вредоносного кода и потенциальных уязвимостей. В этой статье я расскажу вам, как правильно настроить сканирование сайта с помощью Wordfence. Установка и активация Скачайте и установите плагин...

Плагин Wordfence: список основных проблем при сканировании сайта и их решение

Безопасность веб-сайтов стала одной из наиболее актуальных и важных проблем в современном цифровом мире. С ростом числа вредоносных атак, хакерских нападений и киберугроз, владельцы сайтов и администраторы должны принимать все возможные меры для защиты своих онлайн-присутствий. Инструменты безопасности, такие как Wordfence, становятся незаменимыми средствами...

Как ChatGPT может помочь в разработке сайта, ищем полезные варианты

ChatGPT может помочь вам создать свой веб-сайт. Хотя он не может создать реальный веб-сайт и опубликовать его в Интернете — для этого вам следует проверить эти конструкторы веб-сайтов AI — он все же может быть очень полезным компаньоном в процессе создания. Правильно, с ChatGPT на вашей стороне многие элементы процесса создания веб-сайта...

Что такое ChatGPT и OpenAi, статистика, полезные данные и описание работы

С момента своего запуска ChatGPT стал вирусным как похожий на человека чат-бот, который отвечает пользователям на основе того, что они вводят. Инструмент может отвечать на вопросы и давать ответы на основе набора данных из 300 миллиардов слов и 175 миллиардов параметров. В будущем он обязательно...

Обзор новой версии Woocommerce 7.4 — основные изменения, журнал разработки

Вышло обновление плагин интернет магазина Woocommerce в котором большое количество добавлено изменений, исправлений. Полный обзор всех новых деталей в этой статье. Журнал изменений 7.4.0 2023-02-18 WooCommerce Fix — добавлена ​​поддержка сортировки по включенному параметру. №36215 Исправление — Разрешить навигацию по вкладкам продуктов без запроса несохраненных изменений #36235 Исправление —...

При оформлении не проходит заказ на woocommerce, и просит ввести адрес для продолжения

В последних версиях Woocommerce при оформлении и управлении полями стала выскакивать ошибка, что заказ невозможно оформить и для этого необходимо ввести адрес. Хотя поле адреса есть. Решается вставкой кода в function.php Чтобы исправить ошибку нужно чтобы передавалось поле страны доставкиили страны платёжного адреса. Простое удаление...