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"
      {{ variations_attr|default('')|raw }}>

    {{ do_action('woocommerce_before_variations_form') }}

    {% if available_variations is defined %}
        {# Variation attribute selectors #}
        <div class="variations mb-4">
            {% for attribute_name, options in attributes %}
                <div class="mb-3">
                    <label class="form-label fw-semibold" for="{{ attribute_name|esc_attr }}">
                        {{ wc_attribute_label(attribute_name)|esc_html }}
                    </label>
                    <select id="{{ attribute_name|esc_attr }}"
                            class="form-select"
                            name="attribute_{{ attribute_name|esc_attr }}"
                            data-attribute_name="attribute_{{ attribute_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>

        {{ do_action('woocommerce_after_variations_table') }}

        {# Reset link #}
        <div class="reset_variations_wrapper mb-3" style="display: none;">
            <a class="reset_variations btn btn-link btn-sm p-0 text-decoration-none" href="#">
                {{ __('Clear') }}
            </a>
        </div>

        {# Single variation display + add-to-cart button #}
        <div class="single_variation_wrap">
            {{ do_action('woocommerce_before_single_variation') }}

            <div class="woocommerce-variation single_variation"></div>

            <div class="woocommerce-variation-add-to-cart variations_button">
                {{ do_action('woocommerce_single_variation') }}
            </div>

            {{ 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') }}