Как изменить данные корзины на странице оформления заказа WooCommerce

Большинство из вас должно знать, что WooCommerce не позволяет покупателям обновлять корзину со страницы оформления заказа. Это означает, что вы не можете изменить количество или удалить товар со страницы оформления заказа. Покупателю необходимо вернуться на страницу корзины, обновить корзину, а затем снова перейти на страницу оформления заказа. Это приводит к тому, что клиентам приходится заново заполнять всю необходимую информацию. Это немного расстраивает клиентов , особенно гостевых пользователей (а их подавляющее большинство).

В этом посте мы обсудим, как обновить корзину на странице оформления заказа WooCommerce. Я разработал эту функцию на нашем мероприятии «Веселая пятница» в офисе. В «Веселые пятницы » мы стараемся целый день заниматься делами, не связанными с основной работой человека.

Во-первых, давайте взглянем на таблицу сведений о корзине на странице оформления заказа WooCommerce:

Здесь покупатель не может изменить количество товара или удалить его. Поэтому мы хотим предоставить возможность изменять количество и удалять товар, не покидая страницу оформления заказа.

Давайте начнем

Если вы хотите пропустить это объяснение и вместо этого хотите реализовать функциональность в своем магазине, вы можете загрузить плагин, который я создал.

1. Внесение изменений в пользовательский интерфейс в разделе корзины на странице оформления заказа.

Нам нужно изменить столбец «Товар» в таблице «Ваш заказ». Нам нужно добавить значок «Удалить» и «Выбор количества» для каждого товара в корзине.

Для этого WooCommerce предоставил фильтр, который позволяет вам изменять строку с названием продукта для каждого элемента корзины: woocommerce_cart_item_name .

Выбранное количество, отображаемое в таблице «Ваш заказ», также можно изменить с помощью другого фильтра WooCommerce: woocommerce_checkout_cart_item_quantity .

Мы будем использовать оба фильтра и позволим клиентам редактировать информацию о корзине на странице оформления заказа. Вы можете реализовать указанные ниже изменения, создав новый плагин.

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

После этого мы изменим строку с названием продукта, используя фильтр woocommerce_cart_item_name, и добавим поле «Количество» и значок «Удалить».

Здесь мы используем функцию is_checkout() , чтобы убедиться, что мы применяем изменения только на странице оформления заказа. Я разделил его на 3 шага, как указано в приведенном выше фрагменте кода.

Шаг 1. Добавьте значок удаления
На этом этапе мы добавим значок «Удалить» для каждого элемента в корзине. Это тот же значок, который используется в корзине WooCommerce.

Здесь мы использовали функцию WooCommerce get_remove_url() . Нам нужно передать $cart_key для каждого элемента корзины. Таким образом, функция get_remove_url() вернет уникальный URL-адрес для удаления каждого элемента корзины.

Шаг 2: Добавьте название продукта
Поскольку мы изменяем строку с названием продукта, нам также необходимо добавить название продукта в строку вместе с новыми полями. Название продукта мы получим из самого фильтра, который передается в качестве первого аргумента. В нашем случае это $product_title.

Увеличьте продажи магазина WooCommerce

«Интересно посмотреть, насколько WooCommerce Abandoned Cart Pro увеличил продажи дорогостоящих продуктов. Я ожидал, что плагин увеличит продажи недорогих продуктов, которые клиенты не возражают независимо от того, покупают они или нет (например, продукты питания), но я были более удивлены, увидев разницу, которую это может иметь для продуктов, которые требуют такого серьезного решения о покупке». — Кэти Кит, операционный директор Barn2 Media.

Шаг 3. Добавьте селектор количества
Наконец, мы добавим селектор количества. Здесь мы будем использовать функцию WooCommerce woocommerce_quantity_input() .

Нам нужно указать четыре параметра для функции «input_name», «input_value», «max_value», «min_value».

• input_name: он будет содержать массив с именем «корзина», в котором вам нужно передать ключ элемента корзины и количество.
• input_value: будет содержать выбранное количество товара.
• max_value: максимальное количество товаров в наличии.
• min_value: это будет минимальное значение селектора количества.

После того, как все вышеперечисленные шаги будут выполнены, теперь он будет отображать кнопку удаления и селектор количества в таблице «Ваш заказ» на странице «Оформление заказа».

Здесь у нас есть одно условие if (is_checkout()) { condition. Это необходимо по причинам, указанным ниже.

Фильтр, который мы использовали для изменения значения столбца имени продукта (woocommerce_cart_item_name), также вызывается на странице корзины вашего магазина. Поэтому, чтобы код, который мы пишем, не нарушал функциональность страницы корзины, мы сделали так, чтобы изменения применялись только на странице оформления заказа.

2. Обновление корзины через вызов Ajax

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

Изменение количества

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

Теперь мы добавим файл «add_quantity.js» в нижний колонтитул веб-сайта и убедимся, что он включен, когда мы находимся на странице оформления заказа.

Теперь нам нужно добавить в файл Javascript функцию, которая будет вызывать ajax для изменения суммы корзины.

Приведенный выше javascript вызовет ajax, в который мы передадим данные измененной формы оформления заказа. Но он будет вызываться, когда мы нажимаем на значок количества. Таким образом, он будет содержать измененное значение количества.

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

Когда мы изменим количество на странице оформления заказа, будет вызвана вышеуказанная функция, и она изменит общую сумму корзины. Мы использовали функции WooCommerce в наших функциях.

Мы использовали функции «set_quantity()», «calculate_totals()», «woocommerce_cart_totals()» для изменения суммы корзины и ее отображения в таблице «Ваш заказ» на странице оформления заказа.

set_quantity() : эта функция установит измененное количество в корзину.

Мы отправили данные из функции javascript, которые будут иметь измененное значение количества, поэтому мы будем использовать это измененное значение и установим его в корзину.

calculate_totals() : Используя эту функцию, мы снова подсчитываем общую сумму корзины.

woocommerce_cart_totals() : эта функция используется для отображения измененной корзины.

Как только все вышеуказанные вычисления будут выполнены, он вернется к javascript, из которого мы вызвали функцию ajax. В ответ на эту функцию мы « запустим» функцию «update_checkout» , которая, в свою очередь, изменит корзину и отобразит ее пользователю.

Нам нужен CSS для кнопки «Удалить» таблицы «Ваш заказ». Таким образом, это должно выглядеть как кнопка удаления корзины WooCommerce. Поэтому нам нужно добавить CSS для него. Вы можете добавить CSS в нижний колонтитул вашего сайта.

После добавления нам нужно указать CSS для кнопки удаления в файле CSS. CSS показан ниже.

Итак, мы готовы к функциональности, позволяющей изменять количество на странице оформления заказа WooCommerce.

После реализации вышеизложенного таблица «Ваш заказ» на странице оформления заказа будет выглядеть так:

Он добавит селектор количества и значок удаления для каждого элемента таблицы «Ваш заказ» на странице оформления заказа.

Я создал это как плагин под названием Change Quantity on Checkout для WooCommerce, который был выпущен в сентябре 2016 года. Он используется в более чем 400 магазинах WooCommerce. Если вы уже используете этот плагин в своем магазине WooCommerce, я был бы признателен, если бы вы выделили время для просмотра плагина.

Если у вас есть какие-либо отзывы, вы можете сообщить мне об этом в комментариях ниже или опубликовать на форуме поддержки плагина.