magdev/wc-bootstrap
1
Fork 0
Code Issues Pull Requests Actions Releases 8 Activity

Fix dark mode rendering for tables, form inputs, and notices
All checks were successful
Create Release Package / PHP Lint (push) Successful in 51s
Details
Create Release Package / Build Release (push) Successful in 1m9s
Details

Browse Source 
- 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>
This commit is contained in:
Marco Grätsch
2026-02-28 22:13:31 +01:00
parent cb2d064441
commit cfe089d1fe
11 changed files with 131 additions and 61 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
templates/cart/cart.html.twig
View File

@@ -36,7 +36,7 @@
<div class="table-responsive">
<table class="table align-middle shop_table shop_table_responsive cart woocommerce-cart-form__contents">
<thead class="table-light">
<thead>
<tr>
<th class="product-thumbnail" scope="col" style="width: 80px;">
<span class="visually-hidden">{{ __('Thumbnail') }}</span>

2
templates/checkout/review-order.html.twig
View File

@@ -19,7 +19,7 @@
<div class="card shadow-sm woocommerce-checkout-review-order-table">
<div class="card-body p-0">
<table class="table table-sm mb-0 shop_table woocommerce-checkout-review-order-table">
<thead class="table-light">
<thead>
<tr>
<th class="product-name" scope="col">{{ __('Product') }}</th>
<th class="product-total text-end" scope="col">{{ __('Subtotal') }}</th>

4
templates/checkout/thankyou.html.twig
View File

@@ -27,7 +27,7 @@
</a>
</p>
{% else %}
<div class="alert alert-success mb-4" role="alert">
<div class="alert alert-success d-flex align-items-center mb-4" role="alert">
<i class="bi bi-check-circle me-2" aria-hidden="true"></i>
{% include 'checkout/order-received.html.twig' with { order: order } %}
</div>
@@ -68,7 +68,7 @@
{{ do_action('woocommerce_thankyou_' ~ order.get_payment_method(), order.get_id()) }}
{{ do_action('woocommerce_thankyou', order.get_id()) }}
{% else %}
<div class="alert alert-success mb-4" role="alert">
<div class="alert alert-success d-flex align-items-center mb-4" role="alert">
<i class="bi bi-check-circle me-2" aria-hidden="true"></i>
{% include 'checkout/order-received.html.twig' %}
</div>

2
templates/myaccount/orders.html.twig
View File

@@ -21,7 +21,7 @@
{% if has_orders %}
<div class="table-responsive">
<table class="woocommerce-orders-table table table-hover align-middle mb-4">
<thead class="table-light">
<thead>
<tr>
{% for column_id, column_name in wc_get_account_orders_columns() %}
<th scope="col">{{ column_name|esc_html }}</th>

2
templates/myaccount/payment-methods.html.twig
View File

@@ -17,7 +17,7 @@
{% if has_methods %}
<div class="table-responsive">
<table class="table table-hover align-middle mb-4">
<thead class="table-light">
<thead>
<tr>
{% for column_id, column_name in wc_get_account_payment_methods_columns() %}
<th>{{ column_name|esc_html }}</th>

87
templates/order/order-details.html.twig
View File

@@ -31,51 +31,54 @@
<section class="woocommerce-order-details">
{{ do_action('woocommerce_order_details_before_order_table', order) }}
<h2 class="h5 mb-3">{{ __('Order details') }}</h2>
<div class="table-responsive">
<table class="table table-hover align-middle mb-0">
<thead class="table-light">
<tr>
<th>{{ __('Product') }}</th>
<th class="text-end">{{ __('Total') }}</th>
</tr>
</thead>
<tbody>
{{ do_action('woocommerce_order_details_before_order_table_items', order) }}
{% for item_id, item in order_items %}
{% set product = item.get_product() %}
{% include 'order/order-details-item.html.twig' with {
order: order,
item_id: item_id,
item: item,
show_purchase_note: show_purchase_note,
purchase_note: product ? product.get_purchase_note() : '',
product: product
} %}
{% endfor %}
{{ do_action('woocommerce_order_details_after_order_table_items', order) }}
</tbody>
<tfoot>
{% for key, total in order.get_order_item_totals() %}
<div class="card shadow-sm mb-4">
<div class="card-header">
<h2 class="h5 mb-0">{{ __('Order details') }}</h2>
</div>
<div class="table-responsive">
<table class="table table-hover align-middle mb-0">
<thead>
<tr>
<th scope="row">{{ total.label|esc_html }}</th>
<td class="text-end">{{ total.value|wp_kses_post }}</td>
<th>{{ __('Product') }}</th>
<th class="text-end">{{ __('Total') }}</th>
</tr>
{% endfor %}
</thead>
{% if order.get_customer_note() %}
<tr>
<th>{{ __('Note:') }}</th>
<td class="text-end">{{ order.get_customer_note()|esc_html|nl2br }}</td>
</tr>
{% endif %}
</tfoot>
</table>
<tbody>
{{ do_action('woocommerce_order_details_before_order_table_items', order) }}
{% for item_id, item in order_items %}
{% set product = item.get_product() %}
{% include 'order/order-details-item.html.twig' with {
order: order,
item_id: item_id,
item: item,
show_purchase_note: show_purchase_note,
purchase_note: product ? product.get_purchase_note() : '',
product: product
} %}
{% endfor %}
{{ do_action('woocommerce_order_details_after_order_table_items', order) }}
</tbody>
<tfoot>
{% for key, total in order.get_order_item_totals() %}
<tr>
<th scope="row">{{ total.label|esc_html }}</th>
<td class="text-end">{{ total.value|wp_kses_post }}</td>
</tr>
{% endfor %}
{% if order.get_customer_note() %}
<tr>
<th>{{ __('Note:') }}</th>
<td class="text-end">{{ order.get_customer_note()|esc_html|nl2br }}</td>
</tr>
{% endif %}
</tfoot>
</table>
</div>
</div>
{{ do_action('woocommerce_order_details_after_order_table', order) }}