wc-bootstrap/templates/single-product/add-to-cart/variable.html.twig

{#
 # Variable Product Add to Cart (Bootstrap 5 Override)
 #
 # Add-to-cart form for variable products with attribute selectors.
 #
 # Expected context:
 #   product              - WC_Product_Variable object
 #   attributes           - Array of attribute taxonomies
 #   available_variations - JSON-encoded variations data
 #   attribute_keys       - Array of attribute keys
 #   variations_json      - Variations data as JSON string
 #   variations_attr      - Data attribute string for the form
 #   selected_attributes  - Currently selected attribute values
 #
 # WooCommerce PHP equivalent: single-product/add-to-cart/variable.php
 #
 # @package WcBootstrap
 # @since 0.1.0
 #}

{{ do_action('woocommerce_before_add_to_cart_form') }}

<form class="variations_form cart"
      action="{{ product.get_permalink()|esc_url }}"
      method="post"
      enctype="multipart/form-data"
      data-product_id="{{ product.get_id() }}"
      data-product_variations="{{ available_variations|json_encode|esc_attr }}">

    {{ do_action('woocommerce_before_variations_form') }}

    {% if available_variations is not same as(false) %}
        {# Variation attribute selectors.
           WC PHP uses sanitize_title() on attribute names for name/data-attribute_name
           so they match the lowercase keys in the variation data JSON. #}
        <div class="variations mb-4">
            {% for attribute_name, options in attributes %}
                {% set sanitized_name = attribute_name|sanitize_title %}
                <div class="mb-3">
                    <label class="form-label fw-semibold" for="{{ sanitized_name|esc_attr }}">
                        {{ wc_attribute_label(attribute_name)|esc_html }}
                    </label>
                    <select id="{{ sanitized_name|esc_attr }}"
                            class="form-select"
                            name="attribute_{{ sanitized_name|esc_attr }}"
                            data-attribute_name="attribute_{{ sanitized_name|esc_attr }}">
                        <option value="">{{ __('Choose an option') }}</option>
                        {% if options is iterable %}
                            {% for option in options %}
                                {% set selected_value = selected_attributes[attribute_name]|default('') %}
                                <option value="{{ option|esc_attr }}"{% if option == selected_value %} selected{% endif %}>
                                    {{ option|esc_html }}
                                </option>
                            {% endfor %}
                        {% endif %}
                    </select>
                </div>
            {% endfor %}
        </div>

        {# Reset link — WC JS toggles visibility based on attribute selection #}
        <a class="reset_variations btn btn-link btn-sm p-0 text-decoration-none" href="#" style="visibility: hidden;">
            {{ __('Clear') }}
        </a>
        <div class="reset_variations_alert screen-reader-text" role="alert" aria-live="polite" aria-relevant="all"></div>

        {{ do_action('woocommerce_after_variations_table') }}

        {# Single variation display + add-to-cart button.
           The woocommerce_single_variation hook outputs:
             - priority 10: empty .single_variation div (JS populates via underscore template)
             - priority 20: .variations_button div with quantity + add-to-cart button
           No manual wrapper divs — the hooks handle the full DOM structure. #}
        <div class="single_variation_wrap">
            {{ do_action('woocommerce_before_single_variation') }}
            {{ do_action('woocommerce_single_variation') }}
            {{ do_action('woocommerce_after_single_variation') }}
        </div>
    {% else %}
        {# Out of stock / unavailable #}
        <p class="stock out-of-stock alert alert-warning">
            {{ __('This product is currently out of stock and unavailable.') }}
        </p>
    {% endif %}

    {{ do_action('woocommerce_after_variations_form') }}
</form>

{{ do_action('woocommerce_after_add_to_cart_form') }}