wc-bootstrap/templates/myaccount/orders.html.twig

{#
 # My Account Orders (Bootstrap 5 Override)
 #
 # Shows orders table on the account page with Bootstrap table styling.
 # HPOS compatible: uses WC_Order methods only.
 #
 # Expected context:
 #   has_orders      - boolean
 #   customer_orders - object with .orders array and .max_num_pages
 #   current_page    - current pagination page number
 #   wp_button_class - WP theme button class
 #
 # WooCommerce PHP equivalent: myaccount/orders.php
 #
 # @package WcBootstrap
 # @since 0.1.0
 #}

{{ do_action('woocommerce_before_account_orders', has_orders) }}

{% if has_orders %}
    <div class="table-responsive">
        <table class="woocommerce-orders-table table table-hover align-middle mb-4">
            <thead class="table-light">
                <tr>
                    {% for column_id, column_name in wc_get_account_orders_columns() %}
                        <th scope="col">{{ column_name|esc_html }}</th>
                    {% endfor %}
                </tr>
            </thead>
            <tbody>
                {% for customer_order in customer_orders.orders %}
                    {% set order = wc_get_order(customer_order) %}
                    {% set item_count = order.get_item_count() - order.get_item_count_refunded() %}
                    <tr>
                        {% for column_id, column_name in wc_get_account_orders_columns() %}
                            {% if column_id == 'order-number' %}
                                <th scope="row" data-title="{{ column_name|esc_attr }}">
                                    <a href="{{ order.get_view_order_url()|esc_url }}"
                                       aria-label="{{ __('View order number %s')|format(order.get_order_number()) }}">
                                        #{{ order.get_order_number()|esc_html }}
                                    </a>
                                </th>
                            {% elseif column_id == 'order-date' %}
                                <td data-title="{{ column_name|esc_attr }}">
                                    <time datetime="{{ order.get_date_created().date('c')|esc_attr }}">
                                        {{ wc_format_datetime(order.get_date_created())|esc_html }}
                                    </time>
                                </td>
                            {% elseif column_id == 'order-status' %}
                                <td data-title="{{ column_name|esc_attr }}">
                                    {% set status = order.get_status() %}
                                    {% if status == 'completed' %}
                                        <span class="badge text-bg-success">{{ wc_get_order_status_name(status)|esc_html }}</span>
                                    {% elseif status == 'processing' %}
                                        <span class="badge text-bg-primary">{{ wc_get_order_status_name(status)|esc_html }}</span>
                                    {% elseif status == 'on-hold' %}
                                        <span class="badge text-bg-warning">{{ wc_get_order_status_name(status)|esc_html }}</span>
                                    {% elseif status == 'cancelled' or status == 'failed' or status == 'refunded' %}
                                        <span class="badge text-bg-danger">{{ wc_get_order_status_name(status)|esc_html }}</span>
                                    {% else %}
                                        <span class="badge text-bg-secondary">{{ wc_get_order_status_name(status)|esc_html }}</span>
                                    {% endif %}
                                </td>
                            {% elseif column_id == 'order-total' %}
                                <td data-title="{{ column_name|esc_attr }}">
                                    {{ _n('%1$s for %2$s item', '%1$s for %2$s items', item_count)|format(order.get_formatted_order_total(), item_count)|wp_kses_post }}
                                </td>
                            {% elseif column_id == 'order-actions' %}
                                <td data-title="{{ column_name|esc_attr }}">
                                    {% set actions = wc_get_account_orders_actions(order) %}
                                    {% if actions is not empty %}
                                        <div class="btn-group btn-group-sm" role="group">
                                            {% for key, action in actions %}
                                                <a href="{{ action.url|esc_url }}"
                                                   class="btn btn-outline-primary {{ key }}"
                                                   aria-label="{{ action['aria-label']|default(__('%1$s order number %2$s')|format(action.name, order.get_order_number())) }}">
                                                    {{ action.name|esc_html }}
                                                </a>
                                            {% endfor %}
                                        </div>
                                    {% endif %}
                                </td>
                            {% else %}
                                <td data-title="{{ column_name|esc_attr }}">
                                    {{ do_action('woocommerce_my_account_my_orders_column_' ~ column_id, order) }}
                                </td>
                            {% endif %}
                        {% endfor %}
                    </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>

    {{ do_action('woocommerce_before_account_orders_pagination') }}

    {% if customer_orders.max_num_pages > 1 %}
        <nav aria-label="{{ __('Order pagination') }}">
            <ul class="pagination justify-content-center">
                <li class="page-item{% if current_page == 1 %} disabled{% endif %}">
                    <a class="page-link" href="{{ wc_get_endpoint_url('orders', current_page - 1)|esc_url }}"
                       {% if current_page == 1 %}tabindex="-1" aria-disabled="true"{% endif %}>
                        {{ __('Previous') }}
                    </a>
                </li>
                <li class="page-item{% if current_page == customer_orders.max_num_pages %} disabled{% endif %}">
                    <a class="page-link" href="{{ wc_get_endpoint_url('orders', current_page + 1)|esc_url }}"
                       {% if current_page == customer_orders.max_num_pages %}tabindex="-1" aria-disabled="true"{% endif %}>
                        {{ __('Next') }}
                    </a>
                </li>
            </ul>
        </nav>
    {% endif %}
{% else %}
    <div class="alert alert-info" role="alert">
        <i class="bi bi-info-circle me-2" aria-hidden="true"></i>
        {{ __('No order has been made yet.') }}
        <a href="{{ apply_filters('woocommerce_return_to_shop_redirect', wc_get_page_permalink('shop'))|esc_url }}" class="alert-link">
            {{ __('Browse products') }}
        </a>
    </div>
{% endif %}

{{ do_action('woocommerce_after_account_orders', has_orders) }}