Поле кількості з кнопками плюс і мінус в woocommerce

У цій інструкції покажу, як додати до поля кількості в WooCommerce кнопки плюс і мінус, щоб користувачі могли зручно змінювати кількість товару без ручного введення числа.

Крок 1. Додайте кнопки

Перейдіть у папку /wp-content/plugins/woocommerce/templates/global/ і скопіюйте файл quantity-input.php у вашу тему за шляхом your-theme/woocommerce/global/quantity-input.php.

Після цього відредагуйте файл і додайте до нього дві кнопки — для зменшення і збільшення кількості:

<div class="quantity form-group--number">
    <?php do_action( 'woocommerce_before_quantity_input_field' ); ?>
    <label class="screen-reader-text" for="<?php echo esc_attr( $input_id ); ?>"><?php echo esc_attr( $label ); ?></label>

    <button class="down minus qty_button" onclick="event.preventDefault();"></button>

    <input
        type="number"
        id="<?php echo esc_attr( $input_id ); ?>"
        class="form-control <?php echo esc_attr( join( ' ', (array) $classes ) ); ?>"
        step="<?php echo esc_attr( $step ); ?>"
        min="<?php echo esc_attr( $min_value ); ?>"
        max="<?php echo esc_attr( 0 < $max_value ? $max_value : '' ); ?>"
        name="<?php echo esc_attr( $input_name ); ?>"
        value="<?php echo esc_attr( $input_value ); ?>"
        title="<?php echo esc_attr_x( 'Qty', 'Product quantity input tooltip', 'woocommerce' ); ?>"
        size="4"
        placeholder="<?php echo esc_attr( $placeholder ); ?>"
        inputmode="<?php echo esc_attr( $inputmode ); ?>" />

    <button class="up plus qty_button" onclick="event.preventDefault();"></button>

    <?php do_action( 'woocommerce_after_quantity_input_field' ); ?>
</div>

У цей шаблон ми вставили дві кнопки:

<button class="minus qty_button" onclick="event.preventDefault();">-</button>
<button class="plus qty_button" onclick="event.preventDefault();">+</button>

Також для них були додані кастомні класи, щоб потім можна було підключити стилі та JavaScript-логіку.

Крок 2. Додайте JavaScript

Щоб кнопки плюс і мінус працювали, потрібно підключити JavaScript-код, який буде змінювати значення поля кількості:

<script>
jQuery(function($) {

    if ( ! String.prototype.getDecimals ) {
        String.prototype.getDecimals = function() {
            var num = this,
                match = ('' + num).match(/(?:\.(\d+))?(?:[eE]([+-]?\d+))?$/);

            if ( ! match ) {
                return 0;
            }

            return Math.max(0, (match[1] ? match[1].length : 0) - (match[2] ? +match[2] : 0));
        }
    }

    $(document.body).on('click', '.plus, .minus', function() {
        var $qty = $(this).closest('.quantity').find('.qty'),
            currentVal = parseFloat($qty.val()),
            max = parseFloat($qty.attr('max')),
            min = parseFloat($qty.attr('min')),
            step = $qty.attr('step');

        if ( ! currentVal || currentVal === '' || currentVal === 'NaN' ) currentVal = 0;
        if ( max === '' || max === 'NaN' ) max = '';
        if ( min === '' || min === 'NaN' ) min = 0;
        if ( step === 'any' || step === '' || step === undefined || parseFloat(step) === 'NaN' ) step = 1;

        if ( $(this).is('.plus') ) {
            if ( max && ( currentVal >= max ) ) {
                $qty.val(max);
            } else {
                $qty.val((currentVal + parseFloat(step)).toFixed(step.getDecimals()));
            }
        } else {
            if ( min && ( currentVal <= min ) ) {
                $qty.val(min);
            } else if ( currentVal > 0 ) {
                $qty.val((currentVal - parseFloat(step)).toFixed(step.getDecimals()));
            }
        }

        $qty.trigger('change');
    });
});
</script>

Крок 3. Додайте CSS для кнопок

Тепер додамо стилі для кнопок плюс і мінус та самого поля кількості:

<style>
.form-group--number {
    max-width: 150px;
}

label.screen-reader-text {
    display: none;
}

.form-group--number button {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    max-width: 20px;
    color: #222;
    font-size: 30px;
    border: none;
    background: none;
}

.form-group--number button.down {
    left: 12px;
}

.form-group--number button.down:before {
    position: absolute;
    top: 50%;
    left: 50%;
    display: inline-block;
    content: '';
    width: 14px;
    height: 1px;
    background-color: #999;
    transform: translate(-50%, -50%) rotate(0deg);
}

.form-group--number button.up {
    right: 12px;
}

.form-group--number button.up:before,
.form-group--number button.up:after {
    position: absolute;
    top: 50%;
    left: 50%;
    display: inline-block;
    content: '';
    width: 14px;
    height: 1px;
    background-color: #999;
}

.form-group--number button.up:before {
    transform: translate(-50%, -50%) rotate(90deg);
}

.form-group--number button.up:after {
    transform: translate(-50%, -50%) rotate(0deg);
}

.form-group--number .form-control {
    border: 2px solid #eaeaea;
    height: 45px;
    padding: 0 25px;
    font-size: 18px;
    font-weight: 600;
    text-align: center;
    color: #222;
    background-color: transparent;
}

.form-group--number input {
    border-radius: 0;
}
</style>

У результаті ви отримаєте робочі кнопки плюс і мінус для поля кількості в WooCommerce.