wc-bootstrap/templates/global/quantity-input.html.twig

{#
 # Quantity Input (Bootstrap 5 Override)
 #
 # Replaces WooCommerce's quantity input with a Bootstrap 5 input-group
 # featuring decrement/increment buttons.
 #
 # Expected context (from WooCommerce woocommerce_quantity_input()):
 #   input_id    - Input element ID
 #   input_name  - Input element name attribute
 #   input_value - Current quantity value
 #   min_value   - Minimum allowed quantity
 #   max_value   - Maximum allowed quantity (0 = no max)
 #   step        - Step increment
 #   placeholder - Placeholder text
 #   inputmode   - Input mode (e.g., 'numeric')
 #   classes     - CSS class(es) for the input
 #   readonly    - Whether input is read-only
 #   type        - Input type attribute
 #   args        - Additional args (product_name for accessible label)
 #   autocomplete - Autocomplete attribute value
 #
 # WooCommerce PHP equivalent: global/quantity-input.php
 #
 # @package WcBootstrap
 # @since 0.1.0
 #}

{% set label = args.product_name is defined and args.product_name
    ? __('%s quantity')|format(args.product_name)
    : __('Quantity')
%}

<div class="quantity input-group input-group-sm" style="max-width: 140px;">
    {{ do_action('woocommerce_before_quantity_input_field') }}

    <label class="visually-hidden" for="{{ input_id|esc_attr }}">{{ label|esc_attr }}</label>

    {% if not readonly %}
        <button type="button"
                class="btn btn-outline-secondary wc-qty-minus"
                aria-label="{{ __('Decrease quantity') }}"
                data-target="#{{ input_id|esc_attr }}">
            <i class="bi bi-dash" aria-hidden="true"></i>
        </button>
    {% endif %}

    <input type="{{ type|default('number')|esc_attr }}"
           {% if readonly %}readonly="readonly"{% endif %}
           id="{{ input_id|esc_attr }}"
           class="form-control text-center {{ classes is iterable ? classes|join(' ')|esc_attr : classes|default('')|esc_attr }}"
           name="{{ input_name|esc_attr }}"
           value="{{ input_value|esc_attr }}"
           aria-label="{{ __('Product quantity')|esc_attr }}"
           min="{{ min_value|esc_attr }}"
           {% if max_value is defined and max_value > 0 %}max="{{ max_value|esc_attr }}"{% endif %}
           {% if not readonly %}
               step="{{ step|esc_attr }}"
               placeholder="{{ placeholder|esc_attr }}"
               inputmode="{{ inputmode|default('numeric')|esc_attr }}"
               autocomplete="{{ autocomplete|default('on')|esc_attr }}"
           {% endif %}
    />

    {% if not readonly %}
        <button type="button"
                class="btn btn-outline-secondary wc-qty-plus"
                aria-label="{{ __('Increase quantity') }}"
                data-target="#{{ input_id|esc_attr }}">
            <i class="bi bi-plus" aria-hidden="true"></i>
        </button>
    {% endif %}

    {{ do_action('woocommerce_after_quantity_input_field') }}
</div>