wc-composable-product/templates/product-selector.twig

{# Product Selector Template #}
<div class="wc-composable-product-selector" data-product-id="{{ product_id }}" data-selection-limit="{{ selection_limit }}" data-pricing-mode="{{ pricing_mode }}" data-fixed-price="{{ fixed_price }}">

    <div class="composable-header">
        <h3>{{ __('Select Your Products') }}</h3>
        <p class="selection-info">
            {{ __('Choose up to') }} <strong>{{ selection_limit }}</strong> {{ __('items from the selection below.') }}
        </p>
    </div>

    <div class="composable-products-grid">
        {% for product in products %}
        <div class="composable-product-item{% if not product.in_stock %} out-of-stock{% endif %}" data-product-id="{{ product.id }}" data-price="{{ product.price }}" data-stock-status="{{ product.stock_status }}">
            <div class="product-item-inner">
                <label class="product-item-label">
                    <input type="checkbox"
                           name="composable_products[]"
                           value="{{ product.id }}"
                           class="composable-product-checkbox"
                           data-product-id="{{ product.id }}"
                           data-price="{{ product.price }}"
                           {% if not product.in_stock %}disabled{% endif %}>

                    {% if show_images and product.image_url %}
                    <div class="product-item-image">
                        <img src="{{ product.image_url }}" alt="{{ product.name|esc_attr }}">
                    </div>
                    {% endif %}

                    <div class="product-item-details">
                        <h4 class="product-item-name">{{ product.name|esc_html }}</h4>

                        {% if show_prices %}
                        <div class="product-item-price">
                            {{ product.price_html|raw }}
                        </div>
                        {% endif %}

                        <div class="product-item-stock">
                            {% if not product.in_stock %}
                                <span class="stock-status out-of-stock">{{ __('Out of stock') }}</span>
                            {% elseif product.managing_stock and product.stock_quantity is not null and product.stock_quantity <= 5 %}
                                <span class="stock-status low-stock">{{ __('Only') }} {{ product.stock_quantity }} {{ __('left') }}</span>
                            {% elseif product.in_stock %}
                                <span class="stock-status in-stock">{{ __('In stock') }}</span>
                            {% endif %}
                        </div>
                    </div>

                    <span class="product-item-checkmark"></span>
                </label>
            </div>
        </div>
        {% endfor %}
    </div>

    {% if show_total %}
    <div class="composable-total">
        <div class="total-label">{{ __('Total Price:') }}</div>
        <div class="total-price" data-currency="{{ currency_symbol }}" data-fixed-price="{{ fixed_price }}">
            {% if pricing_mode == 'fixed' %}
                {{ fixed_price_html|raw }}
            {% else %}
                <span class="calculated-total">{{ zero_price_html|raw }}</span>
            {% endif %}
        </div>
    </div>
    {% endif %}

    <div class="composable-actions">
        <button type="button" class="button alt composable-add-to-cart" data-product-id="{{ product_id }}">
            {{ __('Add to Cart') }}
        </button>
        <div class="composable-messages"></div>
    </div>
</div>