wc-bootstrap/templates/cart/cart.html.twig

{#
 # Cart Page (Bootstrap 5 Override)
 #
 # Main cart page with items table and totals sidebar.
 # Layout: col-lg-8 (items) + col-lg-4 (totals).
 #
 # Expected context:
 #   cart_items - Array from WC()->cart->get_cart(), each with:
 #     .key            - Cart item key
 #     .product        - WC_Product object
 #     .product_id     - Product ID
 #     .product_name   - Filtered product name
 #     .permalink      - Product URL
 #     .quantity       - Quantity
 #     .subtotal       - Line subtotal HTML
 #     .price          - Unit price HTML
 #     .thumbnail      - Product thumbnail HTML
 #     .item_data_html - Variation data HTML
 #     .remove_url     - Remove item URL
 #     .visible        - Whether item is visible
 #     .css_class      - Item CSS class
 #
 # WooCommerce PHP equivalent: cart/cart.php
 #
 # @package WcBootstrap
 # @since 0.1.0
 #}

{{ do_action('woocommerce_before_cart') }}

<div class="row g-4">
    {# Cart items table #}
    <div class="col-lg-8">
        <form class="woocommerce-cart-form" action="{{ wc_get_cart_url()|esc_url }}" method="post">
            {{ do_action('woocommerce_before_cart_table') }}

            <div class="table-responsive">
                <table class="table align-middle shop_table shop_table_responsive cart woocommerce-cart-form__contents">
                    <thead>
                        <tr>
                            <th class="product-thumbnail" scope="col" style="width: 80px;">
                                <span class="visually-hidden">{{ __('Thumbnail') }}</span>
                            </th>
                            <th class="product-name" scope="col">{{ __('Product') }}</th>
                            <th class="product-price" scope="col">{{ __('Price') }}</th>
                            <th class="product-quantity" scope="col" style="width: 160px;">{{ __('Quantity') }}</th>
                            <th class="product-subtotal" scope="col">{{ __('Subtotal') }}</th>
                            <th class="product-remove" scope="col" style="width: 50px;">
                                <span class="visually-hidden">{{ __('Remove') }}</span>
                            </th>
                        </tr>
                    </thead>
                    <tbody>
                        {{ do_action('woocommerce_before_cart_contents') }}

                        {% if cart_items is defined %}
                            {% for item in cart_items %}
                                {% if item.visible is not defined or item.visible %}
                                    <tr class="woocommerce-cart-form__cart-item {{ item.css_class|default('') }}">
                                        <td class="product-thumbnail">
                                            {% if item.permalink %}
                                                <a href="{{ item.permalink|esc_url }}">{{ item.thumbnail|raw }}</a>
                                            {% else %}
                                                {{ item.thumbnail|raw }}
                                            {% endif %}
                                        </td>

                                        <td class="product-name" data-title="{{ __('Product') }}">
                                            {% if item.permalink %}
                                                <a href="{{ item.permalink|esc_url }}" class="text-decoration-none">
                                                    {{ item.product_name|esc_html }}
                                                </a>
                                            {% else %}
                                                {{ item.product_name|esc_html }}
                                            {% endif %}
                                            {{ item.item_data_html|default('')|raw }}
                                        </td>

                                        <td class="product-price" data-title="{{ __('Price') }}">
                                            {{ item.price|raw }}
                                        </td>

                                        <td class="product-quantity" data-title="{{ __('Quantity') }}">
                                            {% include 'global/quantity-input.html.twig' with {
                                                input_id: 'quantity_' ~ item.key,
                                                input_name: 'cart[' ~ item.key ~ '][qty]',
                                                input_value: item.quantity,
                                                min_value: 0,
                                                max_value: item.product.get_max_purchase_quantity()|default(0),
                                                step: 1,
                                                placeholder: '',
                                                inputmode: 'numeric',
                                                classes: 'qty',
                                                readonly: false,
                                                type: 'number',
                                                args: { product_name: item.product_name }
                                            } %}
                                        </td>

                                        <td class="product-subtotal" data-title="{{ __('Subtotal') }}">
                                            {{ item.subtotal|raw }}
                                        </td>

                                        <td class="product-remove">
                                            <a href="{{ item.remove_url|esc_url }}"
                                               class="btn btn-sm btn-outline-danger remove"
                                               aria-label="{{ __('Remove this item') }}"
                                               data-product_id="{{ item.product_id }}"
                                               data-product_sku="{{ item.product.get_sku()|default('')|esc_attr }}">
                                                <i class="bi bi-x-lg" aria-hidden="true"></i>
                                            </a>
                                        </td>
                                    </tr>
                                {% endif %}
                            {% endfor %}
                        {% endif %}

                        {{ do_action('woocommerce_cart_contents') }}

                        <tr>
                            <td colspan="6" class="actions">
                                <div class="d-flex justify-content-between align-items-center flex-wrap gap-2">
                                    {% if wc_coupons_enabled() %}
                                        <div class="coupon input-group" style="max-width: 350px;">
                                            <label class="visually-hidden" for="coupon_code">{{ __('Coupon:') }}</label>
                                            <input type="text"
                                                   name="coupon_code"
                                                   class="form-control"
                                                   id="coupon_code"
                                                   placeholder="{{ __('Coupon code') }}" />
                                            <button type="submit"
                                                    class="btn btn-outline-secondary"
                                                    name="apply_coupon"
                                                    value="{{ __('Apply coupon') }}">
                                                {{ __('Apply coupon') }}
                                            </button>
                                            {{ do_action('woocommerce_cart_coupon') }}
                                        </div>
                                    {% endif %}

                                    <button type="submit"
                                            class="btn btn-outline-primary"
                                            name="update_cart"
                                            value="{{ __('Update cart') }}">
                                        {{ __('Update cart') }}
                                    </button>

                                    {{ do_action('woocommerce_cart_actions') }}
                                    {{ wp_nonce_field('woocommerce-cart', 'woocommerce-cart-nonce') }}
                                </div>
                            </td>
                        </tr>

                        {{ do_action('woocommerce_after_cart_contents') }}
                    </tbody>
                </table>
            </div>

            {{ do_action('woocommerce_after_cart_table') }}
        </form>
    </div>

    {# Cart totals sidebar #}
    <div class="col-lg-4">
        <div class="cart-collaterals">
            {{ do_action('woocommerce_cart_collaterals') }}
        </div>
    </div>
</div>

{{ do_action('woocommerce_after_cart') }}