Хотите улучшить функциональность своей корзины WooCommerce? Отличный способ улучшить взаимодействие с пользователем — добавить кнопки «плюс» и «минус» в поле количества корзины. В этой статье мы рассмотрим различные способы достижения этой цели с помощью Elementor, популярного конструктора страниц WordPress.

Метод 1. Использование jQuery

Один простой подход — использовать jQuery для динамического добавления кнопок «плюс» и «минус». Вот пример того, как это можно реализовать:

jQuery(document).ready(function($) {
  // Select the quantity input field
  var quantityInput = $('.quantity input[type="number"]');
  // Insert plus and minus buttons after the quantity input
  quantityInput.after('<span class="plus">+</span>');
  quantityInput.before('<span class="minus">-</span>');
  // Increase quantity when plus button is clicked
  $(document).on('click', '.plus', function() {
    var quantity = parseFloat(quantityInput.val());
    quantityInput.val(quantity + 1);
  });
  // Decrease quantity when minus button is clicked
  $(document).on('click', '.minus', function() {
    var quantity = parseFloat(quantityInput.val());
    if (quantity > 1) {
      quantityInput.val(quantity - 1);
    }
  });
});

Метод 2: использование пользовательских действий Elementor

Если вы предпочитаете решение, более ориентированное на Elementor, вы можете воспользоваться настраиваемыми действиями Elementor. Вот как это можно реализовать:

Шаг 1. Создайте новый шаблон Elementor

Создайте новый шаблон Elementor и создайте страницу корзины. Добавьте поле ввода количества и придайте ему желаемый стиль.

Шаг 2. Создайте специальное действие

В файле functions.phpвашей темы добавьте следующий код для создания специального действия:

function custom_elementor_actions() {
  if (function_exists('wc_get_template')) {
    wc_get_template('cart/custom-quantity.php');
  }
}
add_action('elementor/frontend/after_render', 'custom_elementor_actions');

Шаг 3. Создайте собственный шаблон

Создайте новый файл с именем custom-quantity.phpв каталоге /woocommerce/cart/вашей темы. Добавьте следующий код для отображения кнопок «плюс» и «минус»:

<?php if (is_cart()) : ?>
  <span class="minus">-</span>
  <?php woocommerce_quantity_input(array('min_value' => 0)); ?>
  <span class="plus">+</span>
<?php endif; ?>

Метод 3. Использование расширения WooCommerce

Если вы предпочитаете решение на основе плагина, вы можете рассмотреть возможность использования расширения WooCommerce, например «WooCommerce Quantity Increment». Этот плагин позволяет легко добавлять кнопки «плюс» и «минус» в корзину WooCommerce.

После установки и активации плагина вы можете настроить внешний вид и поведение кнопок плюс и минус через настройки плагина.

Заключение

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

Не забудьте тщательно протестировать свою реализацию и убедиться в совместимости с вашей темой и другими плагинами. Приятного улучшения!