портал о модных и интересных местах, событиях и людях Воронежа и области

Как добавить кнопки выбора количества товаров плюс минус для woocommerce

Просмотров: 382
Как добавить кнопки выбора количества товаров плюс минус для woocommerceВ современном интернет-маркетинге быстрый и удобный процесс оплаты играет ключевую роль. В этой статье мы рассмотрим, как добавить кнопки количества товаров в WooCommerce, чтобы упростить процесс выбора количества товаров
перед добавлением их в корзину.

Давайте теперь перейдем к настройке стандартных кнопок количества товаров.

В первую очередь, следует отметить, что код HTML и PHP для кнопок количества находится в файле templates/global/quantity-input.php. Однако важно понимать, что если есть возможность обойтись без изменения файлов шаблона WooCommerce, то лучше воспользоваться этой возможностью. Если вы разрабатываете тему или плагин для широкого круга пользователей, то замена файлов шаблона не рекомендуется.

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

1. Добавим наши кнопки плюса и минуса в function.php

Код +
add_action( 'woocommerce_before_quantity_input_field', 'aleks_quantity_minus', 25 );
add_action( 'woocommerce_after_quantity_input_field', 'aleks_quantity_plus', 25 );
 
function aleks_quantity_plus() {
    echo '<button type="button" class="plus">+</button>';
}
function aleks_quantity_minus() {
    echo '<button type="button" class="minus">-</button>';
}

2. JavaScript код

Код +
document.addEventListener('DOMContentLoaded', function() {
    document.body.addEventListener('click', function(event) {
        if (event.target.matches('button.plus, button.minus')) {
            let clickedButton = event.target;
            let parent = clickedButton.parentNode;
            let input = parent.querySelector('input');
            let qty = parseInt(input.value);
            let min = parseInt(input.getAttribute('min')) || 0;
            let max = parseInt(input.getAttribute('max')) || Infinity;
            let step = parseInt(input.getAttribute('step')) || 1;
            let updateCartButton = document.querySelector('[name="update_cart"]');
            
            if (clickedButton.classList.contains('plus')) {
                if (max && max <= qty) {
                    input.value = max;
                } else {
                    input.value = qty + step;
                }
            } else if (clickedButton.classList.contains('minus')) {
                if (min && min >= qty) {
                    input.value = min;
                } else if (qty > 1) {
                    input.value = qty - step;
                }
            }

            updateCartButton.removeAttribute('disabled');
        }
    });
});

3. CSS

Код +
.quantity input::-webkit-outer-spin-button,
.quantity input::-webkit-inner-spin-button {
    display: none;
    margin: 0;
}
.quantity input.qty {
    appearance: textfield;
    -webkit-appearance: none;
    -moz-appearance: textfield;
}

Данное решение работает не только в карточке товара, но и в корзине. При изменении колличества активируется кнопка "Обновить".

Всего комментариев: 0