You've already forked wc-bootstrap
magdev
cfe089d1fe
- Override WooCommerce's .input-text background (specificity 0,3,1) with [data-bs-theme="dark"] selector for text inputs and textareas - Remove table-light from <thead> in cart, review-order, orders, and payment-methods templates (forces white in dark mode) - Add .alert.woocommerce-* compound selectors for notice overrides outside .woocommerce wrapper ancestry - Suppress focus ring on programmatically focused notices (woocommerce.js focus_populate_live_region adds tabindex + focus) - Wrap order-details product table in card matching thank-you page style - Fix thank-you alert icon/text line wrap with d-flex align-items-center - Bump version to 0.1.2 Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
172 lines
8.9 KiB
Twig
172 lines
8.9 KiB
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') }}
|