Add Bootstrap 5 product archive with card grid and sidebar

Replace WooCommerce's default shop/category page rendering with a
Bootstrap 5 card grid layout featuring responsive columns, sale badges,
star ratings, and an offcanvas sidebar for filters on mobile.

Key implementation details:

- Bypass parent theme's TemplateController for product archives via
  wp_bootstrap_should_render_template filter, render at template_redirect
  priority 11 using the same page shell injection pattern as plugin pages

- Add archive-product.php (Bootstrap layout with optional sidebar) and
  content-product.php (PHP bridge for wc_get_template_part interception)

- Inject global $product into Twig context in TemplateOverride to fix
  empty price/add-to-cart/rating/sale-flash in loop sub-templates — Twig
  has isolated variable scopes and cannot access PHP globals directly

- Fix pagination URLs: use get_pagenum_link() instead of ?page= query
  param (WordPress uses 'paged' for archive pagination, not 'page')

- Fix double-escaped – in result count by adding |raw filter

- Reset WooCommerce float-based layout CSS (woocommerce-layout.css) for
  shop pages to prevent conflicts with Bootstrap flex grid

- Register shop-sidebar widget area with Bootstrap-styled markup

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

.dockerignore

@@ -0,0 +1,19 @@
+.git
+.gitea
+.github
+.vscode
+.claude
+.idea
+node_modules
+vendor
+releases
+wp-core
+wc-core
+CLAUDE.md
+PLAN.md
+SETUP.md
+*.log
+*.bak
+*.po~
+.DS_Store
+Thumbs.db

.env-dist

@@ -0,0 +1,19 @@
+# Database
+MYSQL_ROOT_PASSWORD=rootpass
+MYSQL_DATABASE=wordpress
+MYSQL_USER=wordpress
+MYSQL_PASSWORD=wordpress
+
+# WordPress
+WP_PORT=8080
+
+# Auto-setup (runs on first boot, set to 0 to disable)
+WP_AUTO_SETUP=1
+WP_URL=http://localhost:8080
+WP_TITLE=WC Bootstrap Dev
+WP_ADMIN_USER=admin
+WP_ADMIN_PASSWORD=admin
+WP_ADMIN_EMAIL=admin@example.com
+
+# Build args (used during `docker compose build`)
+# WOOCOMMERCE_VERSION=latest

.gitignore

@@ -31,3 +31,6 @@ npm-debug.log
 
 # Build artifacts (releases directory)
 releases/
+
+# Docker runtime
+.env

CHANGELOG.md

@@ -27,6 +27,12 @@ All notable changes to this project will be documented in this file.
 - Theme wrapping signal via `woocommerce_is_theme_wrapped` filter
 - CI/CD release workflow (Gitea Actions)
 - Translation support (`.pot` template ready)
+- Docker development environment (multistage Dockerfile, Compose, auto-setup entrypoint)
+
+### Fixed
+
+- Rename `base.html.twig` → `wc-base.html.twig` to prevent shadowing the parent theme's page shell via Twig `FilesystemLoader` path priority
+- Correct CSS dependency handle from `woocommerce` to `woocommerce-general` for `wc-bootstrap-overrides` stylesheet
 
 ### Skipped
 

CLAUDE.md

@@ -299,7 +299,11 @@ The child theme inherits from `wp-bootstrap` via WordPress `Template: wp-bootstr
 
 ## Architecture Decisions
 
-- **Edit forms** use 3+9 column layout: `col-lg-3` sticky sidebar (progress indicator, section nav) + `col-lg-9` card-based sections.
+- **My Account layout** uses `col-lg-auto` (nav) + `col-lg` (content) so the nav auto-sizes to its content and the main area fills remaining space. Requires CSS resets for WooCommerce's float-based layout (`float: none; width: auto/100%`) and `max-width: none` on `.woocommerce-account main .woocommerce` to override the plugin's `max-width: 1000px`.
+- **My Account navigation** uses `offcanvas-lg offcanvas-start` responsive pattern: full sidebar with icons on desktop (sticky via `position-sticky`), offcanvas slide-in on mobile with toggle button. Icons are mapped per endpoint via a Twig hash.
+- **My Account dashboard** uses card-based quick actions (`row row-cols-1 row-cols-md-2 row-cols-xl-3 g-3`) with `bg-primary-subtle` icon containers that adapt to dark mode. Each action card is an `<a class="card">` for full-card clickability.
+- **My Account forms** (edit-account, edit-address, lost-password, reset-password) are wrapped in `card shadow-sm` sections with icon headers for visual consistency.
+- **Edit forms** use card-based section grouping (e.g., "Personal information" + "Password change" as separate cards) instead of `<fieldset>/<legend>`.
 - **Detail pages** use 8+4 column layout with sticky sidebar.
 - **Cards** use `<article class="card h-100">` with `stretched-link`.
 - **Form layout** uses centered `col-lg-8 col-xl-7` with card + shadow for auth forms.
@@ -313,4 +317,28 @@ Current version: **v0.0.1**
 
 ## Session History
 
-<!-- AI assistants: document key learnings and session outcomes here -->
+### 2026-02-28 — My Account Bootstrap 5 Polish
+
+**Scope:** Redesigned 8 my-account Twig templates + CSS overrides to feel like a polished Bootstrap 5 application.
+
+**Files changed (10):**
+
+- `templates/myaccount/navigation.html.twig` — Added endpoint icon map, `offcanvas-lg` responsive pattern, sticky sidebar
+- `templates/myaccount/dashboard.html.twig` — Replaced plain `<p>` tags with welcome card (avatar + greeting) and 5 quick-action cards in responsive grid
+- `templates/myaccount/view-order.html.twig` — Replaced `<mark>` tags with summary card using `list-group-flush` and `components/status-badge.html.twig`; notes wrapped in card
+- `templates/myaccount/form-edit-account.html.twig` — Wrapped in two card sections (Personal info + Password change) with icons
+- `templates/myaccount/form-edit-address.html.twig` — Wrapped in card with dynamic icon (`bi-receipt` billing / `bi-truck` shipping)
+- `templates/myaccount/form-lost-password.html.twig` — Wrapped in card with `bi-key` icon
+- `templates/myaccount/form-reset-password.html.twig` — Wrapped in card with `bi-shield-lock` icon
+- `templates/myaccount/lost-password-confirmation.html.twig` — Added `text-body-secondary` styling and "Back to login" button
+- `templates/myaccount/my-account.html.twig` — Changed grid from `col-lg-3`/`col-lg-9` to `col-lg-auto`/`col-lg`
+- `assets/css/wc-bootstrap.css` — Reset WooCommerce float layout, override `max-width: 1000px`, avatar rounding, card hover lift
+
+**Design decisions:**
+
+- **Nav column auto-sizing (`col-lg-auto`)**: Fixed-width columns (e.g., `col-lg-3` = 285px) caused label overflow with icons. Auto-sizing lets the nav take exactly the space it needs across locales while the content fills the rest.
+- **WooCommerce layout overrides require matching specificity**: The plugin uses `.woocommerce-account .woocommerce-MyAccount-navigation` (specificity `0,2,0`) — single-class selectors don't override. Also `.woocommerce-account main .woocommerce` sets `max-width: 1000px` (specificity `0,2,1`) which must be reset to `none`.
+- **`offcanvas-lg` over `d-none d-lg-block`**: Bootstrap's responsive offcanvas natively handles the desktop/mobile switch without duplicating nav markup. The toggle button uses `d-lg-none` visibility.
+- **`bg-primary-subtle` for icon containers**: These Bootstrap 5.3 contextual utilities automatically adapt to dark mode, unlike hardcoded colors.
+- **Welcome message restructured**: Separated greeting from logout link instead of using WooCommerce's default inline-linked `__()` string. This gives full control over card layout and avoids translated strings containing HTML structure assumptions.
+- **Templates NOT changed** (already well-done): `orders.html.twig`, `my-address.html.twig`, `form-login.html.twig`, `payment-methods.html.twig`, `form-add-payment-method.html.twig`, `downloads.html.twig`

README.md

@@ -64,7 +64,12 @@ wc-bootstrap/
 │       └── WooCommerceExtension.php  # WC/WP Twig functions & filters
 ├── languages/                 # Translation files
 ├── templates/                 # Bootstrap 5 Twig template overrides
+│   ├── wc-base.html.twig       # Base layout (extends parent's base.html.twig)
+│   ├── layouts/                 # Page-type layouts (account, archive, form, page, single)
 │   ├── archive-product.html.twig
+│   ├── content-product.html.twig
+│   ├── content-product-cat.html.twig
+│   ├── product-searchform.html.twig
 │   ├── auth/
 │   ├── brands/
 │   ├── cart/
@@ -76,6 +81,13 @@ wc-bootstrap/
 │   ├── notices/
 │   ├── order/
 │   └── single-product/
+├── docker/
+│   ├── Dockerfile             # Multistage build (WC download, npm, composer, WP)
+│   ├── entrypoint.sh          # Auto-setup wrapper entrypoint
+│   └── setup.sh               # First-run WP install + plugin/theme activation
+├── .env-dist                  # Environment variable template
+├── compose.yaml               # WordPress + MariaDB services
+├── compose.override.yaml      # Dev overrides (bind mounts, debug flags)
 ├── composer.json
 ├── functions.php
 └── style.css
@@ -95,6 +107,29 @@ WooCommerce wc_get_template("cart/cart.php")
   → Result: Bootstrap 5 Twig output only
 ```
 
+### Docker Environment
+
+```bash
+# Copy and adjust environment variables (optional)
+cp .env-dist .env
+
+# Build and start
+docker compose build
+docker compose up -d
+
+# WordPress installs automatically on first boot (admin/admin)
+# → http://localhost:8080
+# → http://localhost:8080/wp-admin/
+
+# Manual setup (if WP_AUTO_SETUP=0)
+docker compose exec wordpress setup.sh
+
+# Tear down
+docker compose down -v
+```
+
+The image preinstalls WooCommerce and wp-bootstrap. The override bind-mounts both themes for live development.
+
 ### Building Translations
 
 ```bash

archive-product.php

@@ -0,0 +1,104 @@
+<?php
+/**
+ * Product Archive / Shop Page (Bootstrap 5 Layout)
+ *
+ * Renders the WooCommerce product archive content with a Bootstrap 5 layout
+ * featuring a responsive sidebar (offcanvas on mobile) and product card grid.
+ *
+ * This file is NOT included directly by WordPress. Instead, it is captured via
+ * output buffering by wc_bootstrap_render_product_archive() and injected into
+ * the parent theme's page shell (pages/page.html.twig). Therefore it does NOT
+ * call get_header()/get_footer() or render the wrapper hooks.
+ *
+ * @package WcBootstrap
+ * @since 0.1.0
+ */
+
+defined( 'ABSPATH' ) || exit;
+
+// Fire structured data hook (normally on woocommerce_before_main_content at priority 30).
+do_action( 'woocommerce_shop_loop_header' );
+
+$has_sidebar = is_active_sidebar( 'shop-sidebar' );
+
+if ( woocommerce_product_loop() ) {
+
+	/**
+	 * Hook: woocommerce_before_shop_loop.
+	 *
+	 * @hooked woocommerce_output_all_notices - 10
+	 * @hooked woocommerce_result_count - 20
+	 * @hooked woocommerce_catalog_ordering - 30
+	 */
+	do_action( 'woocommerce_before_shop_loop' );
+
+	?>
+	<div class="row g-4">
+		<?php if ( $has_sidebar ) : ?>
+			<aside class="col-lg-3 mb-4 mb-lg-0">
+				<button class="btn btn-outline-secondary w-100 d-lg-none mb-3"
+				        type="button"
+				        data-bs-toggle="offcanvas"
+				        data-bs-target="#shopSidebar"
+				        aria-controls="shopSidebar">
+					<i class="bi bi-funnel me-1" aria-hidden="true"></i>
+					<?php esc_html_e( 'Filters', 'wc-bootstrap' ); ?>
+				</button>
+
+				<div class="offcanvas-lg offcanvas-start"
+				     id="shopSidebar"
+				     tabindex="-1"
+				     aria-labelledby="shopSidebarLabel">
+					<div class="offcanvas-header d-lg-none">
+						<h5 class="offcanvas-title" id="shopSidebarLabel">
+							<?php esc_html_e( 'Filters', 'wc-bootstrap' ); ?>
+						</h5>
+						<button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="<?php esc_attr_e( 'Close', 'wc-bootstrap' ); ?>"></button>
+					</div>
+					<div class="offcanvas-body p-0">
+						<?php dynamic_sidebar( 'shop-sidebar' ); ?>
+					</div>
+				</div>
+			</aside>
+			<div class="col-lg-9">
+		<?php else : ?>
+			<div class="col-12">
+		<?php endif; ?>
+
+			<?php
+			woocommerce_product_loop_start();
+
+			if ( wc_get_loop_prop( 'total' ) ) {
+				while ( have_posts() ) {
+					the_post();
+
+					/**
+					 * Hook: woocommerce_shop_loop.
+					 */
+					do_action( 'woocommerce_shop_loop' );
+
+					wc_get_template_part( 'content', 'product' );
+				}
+			}
+
+			woocommerce_product_loop_end();
+
+			/**
+			 * Hook: woocommerce_after_shop_loop.
+			 *
+			 * @hooked woocommerce_pagination - 10
+			 */
+			do_action( 'woocommerce_after_shop_loop' );
+			?>
+		</div>
+	</div>
+	<?php
+
+} else {
+	/**
+	 * Hook: woocommerce_no_products_found.
+	 *
+	 * @hooked wc_no_products_found - 10
+	 */
+	do_action( 'woocommerce_no_products_found' );
+}

assets/css/wc-bootstrap.css

@@ -109,6 +109,104 @@
     width: 100%;
 }
 
+/* Product link wrapping card content — remove underline, inherit text color */
+.product.card a.woocommerce-LoopProduct-link {
+    text-decoration: none;
+    color: inherit;
+}
+
+/* Product title in card body */
+.product.card .woocommerce-loop-product__title {
+    font-size: 1rem;
+    font-weight: 600;
+    margin-bottom: 0.5rem;
+}
+
+/* Push price to bottom of card body for even card heights */
+.product.card .card-body .price {
+    margin-top: auto;
+}
+
+/* Add-to-cart button — Bootstrap btn-outline-primary style */
+.product.card .button {
+    display: inline-block;
+    width: 100%;
+    font-weight: 400;
+    line-height: 1.5;
+    text-align: center;
+    text-decoration: none;
+    vertical-align: middle;
+    cursor: pointer;
+    padding: 0.375rem 0.75rem;
+    font-size: 0.875rem;
+    border-radius: var(--bs-border-radius);
+    color: var(--bs-primary);
+    border: var(--bs-border-width) solid var(--bs-primary);
+    background-color: transparent;
+    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
+}
+
+.product.card .button:hover {
+    color: #fff;
+    background-color: var(--bs-primary);
+    border-color: var(--bs-primary);
+}
+
+/* "View options" button for variable products */
+.product.card .button.product_type_variable {
+    color: var(--bs-secondary);
+    border-color: var(--bs-secondary);
+}
+
+.product.card .button.product_type_variable:hover {
+    color: #fff;
+    background-color: var(--bs-secondary);
+    border-color: var(--bs-secondary);
+}
+
+/* "Read more" button for external/non-purchasable products */
+.product.card .button.product_type_external {
+    color: var(--bs-info);
+    border-color: var(--bs-info);
+}
+
+.product.card .button.product_type_external:hover {
+    color: #fff;
+    background-color: var(--bs-info);
+    border-color: var(--bs-info);
+}
+
+/* Added-to-cart visual feedback */
+.product.card .added_to_cart {
+    display: inline-block;
+    width: 100%;
+    text-align: center;
+    font-size: 0.875rem;
+    margin-top: 0.5rem;
+    color: var(--bs-success);
+    text-decoration: none;
+}
+
+/* WooCommerce result count and ordering bar */
+.woocommerce-result-count {
+    margin-bottom: 0;
+    line-height: 2.5;
+}
+
+.woocommerce-ordering select {
+    display: inline-block;
+    padding: 0.375rem 2.25rem 0.375rem 0.75rem;
+    font-size: 0.875rem;
+    font-weight: 400;
+    line-height: 1.5;
+    color: var(--bs-body-color);
+    background-color: var(--bs-body-bg);
+    border: var(--bs-border-width) solid var(--bs-border-color);
+    border-radius: var(--bs-border-radius);
+    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
+    appearance: auto;
+}
+
 /* ==========================================================================
    Sale Badge
    Positioning for the sale overlay badge on product cards.
@@ -179,12 +277,37 @@
 }
 
 /* ==========================================================================
-   WooCommerce Grid Override
-   Reset WooCommerce's default grid to let Bootstrap handle layout.
+   Shop / Archive Layout
+   Reset WooCommerce's default float grid to let Bootstrap handle layout.
+   Override woocommerce-layout.css float-based widths and clearfixes.
    ========================================================================== */
 
-.woocommerce ul.products {
-    display: contents;
+/* Reset float-based result count / ordering bar — use flexbox instead */
+.post-type-archive-product .woocommerce-result-count,
+.tax-product_cat .woocommerce-result-count,
+.tax-product_tag .woocommerce-result-count,
+.post-type-archive-product .woocommerce-ordering,
+.tax-product_cat .woocommerce-ordering,
+.tax-product_tag .woocommerce-ordering {
+    float: none;
+}
+
+/* Reset WooCommerce's product grid floats and widths */
+.woocommerce ul.products,
+.woocommerce .products {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+    width: 100%;
+    clear: both;
+}
+
+.woocommerce ul.products li.product,
+.woocommerce .products .product {
+    float: none;
+    width: auto;
+    margin: 0;
+    padding: 0;
 }
 
 /* ==========================================================================
@@ -280,16 +403,50 @@ header.sticky-top.is-stuck {
 /* ==========================================================================
    My Account
    Navigation and layout for the My Account area.
+   Reset WooCommerce's float-based layout to let Bootstrap flex grid handle it.
    ========================================================================== */
 
+.woocommerce-account main .woocommerce,
+.woocommerce-cart main .woocommerce,
+.woocommerce-checkout main .woocommerce,
+.post-type-archive-product main .woocommerce,
+.tax-product_cat main .woocommerce,
+.tax-product_tag main .woocommerce {
+    max-width: none;
+}
+
+.woocommerce-account .woocommerce-MyAccount-navigation {
+    float: none;
+    width: auto;
+}
+
+.woocommerce-account .woocommerce-MyAccount-content {
+    float: none;
+    width: 100%;
+}
+
+.woocommerce-MyAccount-navigation .list-group-item {
+    white-space: nowrap;
+}
+
 .woocommerce-MyAccount-navigation .list-group-item.active {
     font-weight: 600;
 }
 
-/* Order status marks */
-.woocommerce-order-details mark {
-    background: none;
-    font-weight: 600;
+/* Dashboard: avatar rounding */
+.woocommerce-MyAccount-content .avatar {
+    border-radius: 50%;
+}
+
+/* Dashboard: quick action card hover lift */
+.woocommerce-MyAccount-content a.card {
+    transition: transform 0.15s ease, box-shadow 0.15s ease;
+    color: inherit;
+}
+
+.woocommerce-MyAccount-content a.card:hover {
+    transform: translateY(-2px);
+    box-shadow: var(--bs-box-shadow) !important;
 }
 
 /* View-order notes */

compose.override.yaml

@@ -0,0 +1,17 @@
+services:
+  db:
+    container_name: woocommerce-db
+    restart: unless-stopped
+
+  wordpress:
+    container_name: woocommerce
+    restart: unless-stopped
+    volumes:
+      - ../wp-bootstrap:/var/www/html/wp-content/themes/wp-bootstrap
+      - .:/var/www/html/wp-content/themes/wc-bootstrap
+    environment:
+      WORDPRESS_DEBUG: "1"
+      WORDPRESS_CONFIG_EXTRA: |
+        define('WP_DEBUG_LOG', true);
+        define('WP_DEBUG_DISPLAY', true);
+        define('SCRIPT_DEBUG', true);

compose.yaml

@@ -0,0 +1,48 @@
+services:
+  db:
+    image: mariadb:latest
+    restart: always
+    volumes:
+      - db_data:/var/lib/mysql
+    environment:
+      MYSQL_ROOT_PASSWORD: ${MYSQL_ROOT_PASSWORD:-rootpass}
+      MYSQL_DATABASE: ${MYSQL_DATABASE:-wordpress}
+      MYSQL_USER: ${MYSQL_USER:-wordpress}
+      MYSQL_PASSWORD: ${MYSQL_PASSWORD:-wordpress}
+    healthcheck:
+      test: ["CMD", "healthcheck.sh", "--connect", "--innodb_initialized"]
+      interval: 10s
+      timeout: 5s
+      retries: 5
+
+  wordpress:
+    image: hub.bundespruefstelle.ch/woocommerce:latest
+    restart: always
+    build:
+      context: .
+      dockerfile: docker/Dockerfile
+      additional_contexts:
+        wp-bootstrap: ../wp-bootstrap
+      target: wp_runtime
+    ports:
+      - "${WP_PORT:-8080}:80"
+    environment:
+      WORDPRESS_DB_HOST: db
+      WORDPRESS_DB_NAME: ${MYSQL_DATABASE:-wordpress}
+      WORDPRESS_DB_USER: ${MYSQL_USER:-wordpress}
+      WORDPRESS_DB_PASSWORD: ${MYSQL_PASSWORD:-wordpress}
+      WP_AUTO_SETUP: ${WP_AUTO_SETUP:-1}
+      WP_URL: ${WP_URL:-http://localhost:${WP_PORT:-8080}}
+      WP_TITLE: ${WP_TITLE:-WC Bootstrap Dev}
+      WP_ADMIN_USER: ${WP_ADMIN_USER:-admin}
+      WP_ADMIN_PASSWORD: ${WP_ADMIN_PASSWORD:-admin}
+      WP_ADMIN_EMAIL: ${WP_ADMIN_EMAIL:-admin@example.com}
+    depends_on:
+      db:
+        condition: service_healthy
+    volumes:
+      - wp_data:/var/www/html
+
+volumes:
+  db_data:
+  wp_data:

content-product.php

@@ -0,0 +1,33 @@
+<?php
+/**
+ * Product Content in Loop — PHP Bridge to Twig
+ *
+ * Bridge file that renders the Bootstrap 5 card template (content-product.html.twig)
+ * via the parent theme's TwigService instead of WooCommerce's default <li> markup.
+ *
+ * WooCommerce's wc_get_template_part('content', 'product') uses locate_template()
+ * which finds this file in the child theme before falling back to the plugin template.
+ * Unlike wc_get_template(), wc_get_template_part() does NOT fire the
+ * woocommerce_before_template_part / woocommerce_after_template_part hooks,
+ * so the TemplateOverride class cannot intercept it — this bridge file is needed.
+ *
+ * @package WcBootstrap
+ * @since 0.1.0
+ */
+
+defined( 'ABSPATH' ) || exit;
+
+global $product;
+
+// Ensure the product is valid and visible (same guard as WooCommerce's default template).
+if ( ! is_a( $product, WC_Product::class ) || ! $product->is_visible() ) {
+	return;
+}
+
+if ( class_exists( '\WPBootstrap\Twig\TwigService' ) ) {
+	$twig = \WPBootstrap\Twig\TwigService::getInstance();
+	echo $twig->render( 'content-product.html.twig', [] );
+} else {
+	// Fallback: include WooCommerce's default template directly.
+	include WC()->plugin_path() . '/templates/content-product.php';
+}

docker/Dockerfile

@@ -0,0 +1,70 @@
+###############################################################################
+# Stage 1 — Download WooCommerce from WordPress.org
+###############################################################################
+FROM alpine:3.21 AS woocommerce
+
+RUN apk add --no-cache curl unzip jq
+
+ARG WOOCOMMERCE_VERSION=latest
+RUN set -ex; \
+    if [ "$WOOCOMMERCE_VERSION" = "latest" ]; then \
+      URL=$(curl -sSf "https://api.wordpress.org/plugins/info/1.2/?action=plugin_information&slug=woocommerce" \
+            | jq -r '.download_link'); \
+    else \
+      URL="https://downloads.wordpress.org/plugin/woocommerce.${WOOCOMMERCE_VERSION}.zip"; \
+    fi; \
+    curl -sSfL -o /tmp/woocommerce.zip "$URL"; \
+    unzip -q /tmp/woocommerce.zip -d /tmp/plugins; \
+    rm /tmp/woocommerce.zip
+
+
+###############################################################################
+# Stage 2 — Build wp-bootstrap theme assets
+###############################################################################
+FROM node:20-alpine AS wp-bootstrap-assets
+
+COPY --from=wp-bootstrap . /build
+WORKDIR /build
+RUN npm ci && npm run build \
+    && rm -rf node_modules src .git .gitea .github .vscode .claude .idea \
+       CLAUDE.md PLAN.md package.json package-lock.json .editorconfig \
+       releases .gitignore
+
+
+###############################################################################
+# Stage 3 — Install Composer dependencies for both themes
+###############################################################################
+FROM composer:2 AS composer
+
+COPY --from=wp-bootstrap-assets /build /themes/wp-bootstrap
+WORKDIR /themes/wp-bootstrap
+RUN composer install --no-dev --optimize-autoloader --no-interaction
+
+COPY . /themes/wc-bootstrap
+WORKDIR /themes/wc-bootstrap
+RUN composer install --no-dev --optimize-autoloader --no-interaction
+
+
+###############################################################################
+# Stage 4 — Final WordPress image
+###############################################################################
+FROM wordpress:php8.4 AS wp_runtime
+
+RUN curl -sSfL -o /usr/local/bin/wp \
+      https://raw.githubusercontent.com/wp-cli/builds/gh-pages/phar/wp-cli.phar \
+    && chmod +x /usr/local/bin/wp
+
+COPY --from=woocommerce /tmp/plugins/woocommerce \
+     /var/www/html/wp-content/plugins/woocommerce
+
+COPY --from=composer /themes/wp-bootstrap \
+     /var/www/html/wp-content/themes/wp-bootstrap
+
+COPY --from=composer /themes/wc-bootstrap \
+     /var/www/html/wp-content/themes/wc-bootstrap
+
+COPY --link --chmod=0755 docker/setup.sh /usr/local/bin/setup.sh
+COPY --link --chmod=0755 docker/entrypoint.sh /usr/local/bin/wc-entrypoint.sh
+
+ENTRYPOINT ["wc-entrypoint.sh"]
+CMD ["apache2-foreground"]

docker/entrypoint.sh

@@ -0,0 +1,21 @@
+#!/bin/bash
+#
+# Wrapper entrypoint: runs first-time WordPress setup in the background,
+# then hands off to the official WordPress entrypoint.
+#
+# Set WP_AUTO_SETUP=0 to disable automatic setup.
+#
+
+if [ "${WP_AUTO_SETUP:-1}" = "1" ]; then
+    (
+        cd /var/www/html
+        until [ -f wp-config.php ]; do sleep 2; done
+        sleep 3
+
+        if ! wp core is-installed --allow-root 2>/dev/null; then
+            setup.sh
+        fi
+    ) &
+fi
+
+exec docker-entrypoint.sh "$@"

docker/setup.sh

@@ -0,0 +1,47 @@
+#!/bin/bash
+#
+# First-run setup: installs WordPress, activates WooCommerce and wc-bootstrap.
+#
+# Usage:
+#   docker compose exec wordpress setup.sh
+#
+set -euo pipefail
+
+WP_URL="${WP_URL:-http://localhost:8080}"
+WP_TITLE="${WP_TITLE:-WC Bootstrap Dev}"
+WP_ADMIN_USER="${WP_ADMIN_USER:-admin}"
+WP_ADMIN_PASSWORD="${WP_ADMIN_PASSWORD:-admin}"
+WP_ADMIN_EMAIL="${WP_ADMIN_EMAIL:-admin@example.com}"
+
+cd /var/www/html
+
+# Wait for WordPress files (entrypoint copies them on first boot)
+until [ -f wp-config.php ]; do
+    echo "Waiting for WordPress to initialize..."
+    sleep 2
+done
+
+if ! wp core is-installed --allow-root 2>/dev/null; then
+    echo "Installing WordPress..."
+    wp core install \
+        --url="$WP_URL" \
+        --title="$WP_TITLE" \
+        --admin_user="$WP_ADMIN_USER" \
+        --admin_password="$WP_ADMIN_PASSWORD" \
+        --admin_email="$WP_ADMIN_EMAIL" \
+        --skip-email \
+        --allow-root
+fi
+
+echo "Activating WooCommerce..."
+wp plugin activate woocommerce --allow-root 2>/dev/null || true
+
+echo "Activating wc-bootstrap theme..."
+wp theme activate wc-bootstrap --allow-root 2>/dev/null || true
+
+echo ""
+echo "Setup complete!"
+echo "  URL:      $WP_URL"
+echo "  Admin:    $WP_URL/wp-admin/"
+echo "  User:     $WP_ADMIN_USER"
+echo "  Password: $WP_ADMIN_PASSWORD"

functions.php

@@ -14,6 +14,7 @@ if ( ! defined( 'ABSPATH' ) ) {
     exit;
 }
 
+
 /**
  * Define theme constants.
  *
@@ -114,7 +115,7 @@ function wc_bootstrap_enqueue_styles(): void {
     wp_enqueue_style(
         'wc-bootstrap-overrides',
         get_stylesheet_directory_uri() . '/assets/css/wc-bootstrap.css',
-        array( 'wc-bootstrap-style', 'woocommerce' ),
+        array( 'wc-bootstrap-style', 'woocommerce-general' ),
         $theme_version
     );
 }
@@ -223,3 +224,123 @@ function wc_bootstrap_sticky_header_script(): void {
     <?php
 }
 add_action( 'wp_footer', 'wc_bootstrap_sticky_header_script' );
+
+/**
+ * Register the shop sidebar widget area.
+ *
+ * Provides a widget area for product filters and shop-specific widgets.
+ * Uses Bootstrap-styled markup matching the parent theme's sidebar pattern.
+ *
+ * @since 0.1.0
+ */
+function wc_bootstrap_register_sidebars(): void {
+    register_sidebar( array(
+        'name'          => __( 'Shop Sidebar', 'wc-bootstrap' ),
+        'id'            => 'shop-sidebar',
+        'description'   => __( 'Add widgets here to appear in the shop sidebar.', 'wc-bootstrap' ),
+        'before_widget' => '<div id="%1$s" class="widget mb-4 %2$s">',
+        'after_widget'  => '</div>',
+        'before_title'  => '<h3 class="sidebar-heading h6 text-uppercase fw-semibold">',
+        'after_title'   => '</h3>',
+    ) );
+}
+add_action( 'widgets_init', 'wc_bootstrap_register_sidebars' );
+
+/**
+ * Set the number of product columns in the shop loop.
+ *
+ * @return int Number of columns.
+ * @since 0.1.0
+ */
+function wc_bootstrap_loop_columns(): int {
+    return 4;
+}
+add_filter( 'loop_shop_columns', 'wc_bootstrap_loop_columns' );
+
+/**
+ * Remove WooCommerce's default sidebar hook.
+ *
+ * The child theme's archive-product.php renders the sidebar inline within the
+ * Bootstrap grid layout, so the default woocommerce_sidebar hook must not render
+ * a second sidebar outside the layout.
+ *
+ * @since 0.1.0
+ */
+function wc_bootstrap_remove_default_sidebar(): void {
+    remove_action( 'woocommerce_sidebar', 'woocommerce_get_sidebar', 10 );
+}
+add_action( 'init', 'wc_bootstrap_remove_default_sidebar' );
+
+/**
+ * Prevent the parent theme from rendering product archives.
+ *
+ * The parent theme's TemplateController hooks template_redirect at priority 10
+ * and renders pages/archive.html.twig for all archives (then exits). For product
+ * archives, we need to render our own WooCommerce-specific Bootstrap layout instead.
+ * Returning false tells the parent theme to skip rendering for this request.
+ *
+ * @param bool $should_render Whether the parent theme should render.
+ * @return bool
+ *
+ * @since 0.1.0
+ */
+function wc_bootstrap_skip_parent_archive( bool $should_render ): bool {
+    if ( is_post_type_archive( 'product' ) || is_page( wc_get_page_id( 'shop' ) ) ) {
+        return false;
+    }
+    if ( function_exists( 'is_product_taxonomy' ) && is_product_taxonomy() ) {
+        return false;
+    }
+    return $should_render;
+}
+add_filter( 'wp_bootstrap_should_render_template', 'wc_bootstrap_skip_parent_archive' );
+
+/**
+ * Render product archive pages with Bootstrap 5 layout.
+ *
+ * Since the parent theme's TemplateController is blocked for product archives
+ * (via wp_bootstrap_should_render_template filter), we render the page ourselves
+ * at priority 11 using the parent theme's TwigService and page shell.
+ *
+ * The archive-product.php file provides the Bootstrap layout (sidebar + product
+ * grid) and is captured via output buffering, then injected into the parent
+ * theme's page template — the same pattern as wc_bootstrap_render_page().
+ *
+ * @since 0.1.0
+ */
+function wc_bootstrap_render_product_archive(): void {
+    $is_shop = is_post_type_archive( 'product' ) || is_page( wc_get_page_id( 'shop' ) );
+    $is_tax  = function_exists( 'is_product_taxonomy' ) && is_product_taxonomy();
+
+    if ( ! $is_shop && ! $is_tax ) {
+        return;
+    }
+
+    if ( ! class_exists( '\WPBootstrap\Twig\TwigService' )
+        || ! class_exists( '\WPBootstrap\Template\ContextBuilder' ) ) {
+        return;
+    }
+
+    // Capture WooCommerce archive content via output buffering.
+    ob_start();
+    include get_stylesheet_directory() . '/archive-product.php';
+    $content = ob_get_clean();
+
+    // Build parent theme context and inject archive content into page shell.
+    $context_builder = new \WPBootstrap\Template\ContextBuilder();
+    $theme_context   = $context_builder->build();
+    $twig            = \WPBootstrap\Twig\TwigService::getInstance();
+
+    $theme_context['post'] = array_merge(
+        $theme_context['post'] ?? [],
+        [
+            'content'   => $content,
+            'title'     => '',
+            'thumbnail' => '',
+        ]
+    );
+
+    echo $twig->render( 'pages/page.html.twig', $theme_context );
+    exit;
+}
+add_action( 'template_redirect', 'wc_bootstrap_render_product_archive', 11 );

inc/TemplateOverride.php

@@ -78,8 +78,17 @@ class TemplateOverride {
         }
 
         try {
-            $twig = TwigService::getInstance();
-            echo $twig->render( $twigTemplate, $args );
+            $twig    = TwigService::getInstance();
+            $context = $args;
+
+            // Inject the global $product into the Twig context.
+            // WooCommerce PHP templates access it via `global $product;` but Twig
+            // templates have isolated variable scopes and need it passed explicitly.
+            if ( ! isset( $context['product'] ) && ! empty( $GLOBALS['product'] ) ) {
+                $context['product'] = $GLOBALS['product'];
+            }
+
+            echo $twig->render( $twigTemplate, $context );
 
             // Buffer the upcoming PHP include so we can discard it.
             ob_start();

templates/archive-product.html.twig

@@ -16,7 +16,7 @@
  # @since 0.1.0
  #}
 
-{% extends "base.html.twig" %}
+{% extends "wc-base.html.twig" %}
 
 {% block breadcrumbs %}
     {{ do_action('woocommerce_before_main_content') }}

templates/components/pagination.html.twig

@@ -16,7 +16,7 @@
         <ul class="pagination justify-content-center">
             {# Previous button #}
             <li class="page-item{% if current_page <= 1 %} disabled{% endif %}">
-                <a class="page-link" href="?page={{ current_page - 1 }}" aria-label="{{ __('Previous') }}">
+                <a class="page-link" href="{{ fn('get_pagenum_link', current_page > 1 ? current_page - 1 : 1)|esc_url }}" aria-label="{{ __('Previous') }}">
                     <span aria-hidden="true">&laquo;</span>
                 </a>
             </li>
@@ -29,7 +29,7 @@
                     </li>
                 {% elseif i == 1 or i == max_pages or (i >= current_page - 2 and i <= current_page + 2) %}
                     <li class="page-item">
-                        <a class="page-link" href="?page={{ i }}">{{ i }}</a>
+                        <a class="page-link" href="{{ fn('get_pagenum_link', i)|esc_url }}">{{ i }}</a>
                     </li>
                 {% elseif i == current_page - 3 or i == current_page + 3 %}
                     <li class="page-item disabled">
@@ -40,7 +40,7 @@
 
             {# Next button #}
             <li class="page-item{% if current_page >= max_pages %} disabled{% endif %}">
-                <a class="page-link" href="?page={{ current_page + 1 }}" aria-label="{{ __('Next') }}">
+                <a class="page-link" href="{{ fn('get_pagenum_link', current_page + 1)|esc_url }}" aria-label="{{ __('Next') }}">
                     <span aria-hidden="true">&raquo;</span>
                 </a>
             </li>

templates/content-product.html.twig

@@ -2,17 +2,17 @@
  # Product Content in Loop (Bootstrap 5 Override)
  #
  # Renders a single product card within the shop loop grid.
- # Uses Bootstrap 5 card component with stretched-link.
+ # Uses Bootstrap 5 card component with WooCommerce hook output.
  #
- # Expected context:
- #   product - WC_Product object with:
- #     .name           - Product name
- #     .permalink      - Product URL
- #     .image          - Product thumbnail HTML
- #     .price_html     - Formatted price HTML
- #     .rating_html    - Star rating HTML
- #     .is_on_sale     - Whether product is on sale
- #     .add_to_cart    - Add-to-cart button context
+ # Rendered via the content-product.php bridge file (not TemplateOverride)
+ # because wc_get_template_part() does not fire the template_part hooks.
+ #
+ # Hook output structure:
+ #   woocommerce_before_shop_loop_item       → <a> link open
+ #   woocommerce_before_shop_loop_item_title → sale badge, product image
+ #   woocommerce_shop_loop_item_title        → <h2> product title
+ #   woocommerce_after_shop_loop_item_title  → star rating, price
+ #   woocommerce_after_shop_loop_item        → </a> link close, add-to-cart button
  #
  # WooCommerce PHP equivalent: content-product.php
  #

templates/global/breadcrumb.html.twig

@@ -2,7 +2,7 @@
  # Shop Breadcrumb (Bootstrap 5 Override)
  #
  # Replaces WooCommerce's breadcrumb with Bootstrap 5 breadcrumb component.
- # Skipped when parent theme is wrapping (base.html.twig handles breadcrumbs).
+ # Skipped when parent theme is wrapping (wc-base.html.twig handles breadcrumbs).
  #
  # Expected context (from WooCommerce woocommerce_breadcrumb()):
  #   breadcrumb  - Array of [label, url] tuples

templates/global/wrapper-start.html.twig

@@ -3,7 +3,7 @@
  #
  # Replaces WooCommerce's theme-specific wrapper divs with Bootstrap 5 layout.
  # When the parent theme wraps the page (_theme_wrapped), this outputs nothing
- # since base.html.twig already provides the container.
+ # since wc-base.html.twig already provides the container.
  #
  # WooCommerce PHP equivalent: global/wrapper-start.php
  #

templates/layouts/account.html.twig

@@ -7,7 +7,7 @@
  # @since 0.1.0
  #}
 
-{% extends "base.html.twig" %}
+{% extends "wc-base.html.twig" %}
 
 {% block content %}
     <div class="mb-4">

templates/layouts/archive.html.twig

@@ -8,7 +8,7 @@
  # @since 0.1.0
  #}
 
-{% extends "base.html.twig" %}
+{% extends "wc-base.html.twig" %}
 
 {% block content %}
     <div class="mb-4">

templates/layouts/form.html.twig

@@ -8,7 +8,7 @@
  # @since 0.1.0
  #}
 
-{% extends "base.html.twig" %}
+{% extends "wc-base.html.twig" %}
 
 {% block content %}
     <div class="row justify-content-center">

templates/layouts/page.html.twig

@@ -7,7 +7,7 @@
  # @since 0.1.0
  #}
 
-{% extends "base.html.twig" %}
+{% extends "wc-base.html.twig" %}
 
 {% block content %}
     <div class="mb-4">

templates/layouts/single.html.twig

@@ -9,7 +9,7 @@
  # @since 0.1.0
  #}
 
-{% extends "base.html.twig" %}
+{% extends "wc-base.html.twig" %}
 
 {% block content %}
     <article>

templates/loop/loop-start.html.twig

@@ -12,6 +12,6 @@
  # @since 0.1.0
  #}
 
-{% set cols = columns|default(3) %}
+{% set cols = columns|default(4) %}
 
-<div class="row row-cols-1 row-cols-sm-2 row-cols-md-{{ cols < 3 ? cols : 3 }} row-cols-lg-{{ cols }} g-4 products">
+<div class="row row-cols-1 row-cols-sm-2 row-cols-md-3 row-cols-lg-{{ cols }} g-4 products">

templates/loop/result-count.html.twig

@@ -27,7 +27,7 @@
         {% if total <= per_page|default(total) or total == 0 %}
             {{ _n('Showing the single result', 'Showing all %d results', total)|format(total) }}
         {% else %}
-            {{ __('Showing %1$d&ndash;%2$d of %3$d results')|format(first, last, total) }}
+            {{ __('Showing %1$d&ndash;%2$d of %3$d results')|format(first, last, total)|raw }}
         {% endif %}
     {% endif %}
 </p>

templates/myaccount/dashboard.html.twig

@@ -1,7 +1,8 @@
 {#
  # My Account Dashboard (Bootstrap 5 Override)
  #
- # Shows the welcome screen on the account dashboard.
+ # Shows a card-based dashboard with welcome greeting and
+ # quick action links to each account section.
  #
  # Expected context:
  #   current_user - WP_User object
@@ -12,28 +13,54 @@
  # @since 0.1.0
  #}
 
-<p>
-    {{ __('Hello %1$s (not %1$s? <a href="%2$s">Log out</a>)')|format(
-        '<strong>' ~ current_user.display_name|esc_html ~ '</strong>',
-        wc_logout_url()|esc_url
-    )|wp_kses_post }}
-</p>
+{% set quick_actions = [
+    { endpoint: 'orders',          icon: 'bi-bag',         label: __('Orders'),          desc: __('View and track your orders') },
+    { endpoint: 'edit-address',    icon: 'bi-geo-alt',     label: __('Addresses'),       desc: __('Manage billing & shipping') },
+    { endpoint: 'edit-account',    icon: 'bi-person-gear', label: __('Account details'), desc: __('Update name, email & password') },
+    { endpoint: 'downloads',       icon: 'bi-download',    label: __('Downloads'),       desc: __('Access purchased files') },
+    { endpoint: 'payment-methods', icon: 'bi-credit-card', label: __('Payment methods'), desc: __('Manage saved cards') },
+] %}
 
-<p>
-    {% if wc_shipping_enabled() %}
-        {{ __('From your account dashboard you can view your <a href="%1$s">recent orders</a>, manage your <a href="%2$s">shipping and billing addresses</a>, and <a href="%3$s">edit your password and account details</a>.')|format(
-            wc_get_endpoint_url('orders')|esc_url,
-            wc_get_endpoint_url('edit-address')|esc_url,
-            wc_get_endpoint_url('edit-account')|esc_url
-        )|wp_kses_post }}
-    {% else %}
-        {{ __('From your account dashboard you can view your <a href="%1$s">recent orders</a>, manage your <a href="%2$s">billing address</a>, and <a href="%3$s">edit your password and account details</a>.')|format(
-            wc_get_endpoint_url('orders')|esc_url,
-            wc_get_endpoint_url('edit-address')|esc_url,
-            wc_get_endpoint_url('edit-account')|esc_url
-        )|wp_kses_post }}
-    {% endif %}
-</p>
+<div class="card shadow-sm mb-4">
+    <div class="card-body d-flex align-items-center gap-3">
+        <div class="flex-shrink-0">
+            {{ get_avatar(current_user.ID, 64)|raw }}
+        </div>
+        <div class="flex-grow-1">
+            <h2 class="h5 mb-1">
+                {{ __('Hello, %s!')|format(current_user.display_name|esc_html) }}
+            </h2>
+            <p class="text-body-secondary mb-0">
+                {{ __('Not %s?')|format(current_user.display_name|esc_html) }}
+                <a href="{{ wc_logout_url()|esc_url }}">{{ __('Log out') }}</a>
+            </p>
+        </div>
+    </div>
+</div>
+
+<div class="row row-cols-1 row-cols-md-2 row-cols-xl-3 g-3 mb-4">
+    {% for action in quick_actions %}
+        <div class="col">
+            <a href="{{ wc_get_endpoint_url(action.endpoint)|esc_url }}"
+               class="card h-100 text-decoration-none shadow-sm">
+                <div class="card-body d-flex align-items-start gap-3">
+                    <div class="flex-shrink-0">
+                        <span class="d-inline-flex align-items-center justify-content-center
+                                     bg-primary-subtle text-primary rounded-3"
+                              style="width: 3rem; height: 3rem;"
+                              aria-hidden="true">
+                            <i class="bi {{ action.icon }} fs-4"></i>
+                        </span>
+                    </div>
+                    <div>
+                        <h3 class="h6 mb-1 text-body">{{ action.label }}</h3>
+                        <p class="text-body-secondary small mb-0">{{ action.desc }}</p>
+                    </div>
+                </div>
+            </a>
+        </div>
+    {% endfor %}
+</div>
 
 {{ do_action('woocommerce_account_dashboard') }}
 {{ do_action('woocommerce_before_my_account') }}

templates/myaccount/form-edit-account.html.twig

@@ -1,7 +1,8 @@
 {#
  # Edit Account Form (Bootstrap 5 Override)
  #
- # Account details editing form with Bootstrap form styling.
+ # Account details editing form with card-based sections
+ # for personal information and password change.
  #
  # Expected context:
  #   user - WP_User object
@@ -18,109 +19,125 @@
 
     {{ do_action('woocommerce_edit_account_form_start') }}
 
-    <div class="row g-3 mb-3">
-        <div class="col-sm-6">
-            <label for="account_first_name" class="form-label">
-                {{ __('First name') }}&nbsp;<span class="text-danger" aria-hidden="true">*</span>
-                <span class="visually-hidden">{{ __('Required') }}</span>
-            </label>
-            <input type="text"
-                   class="form-control"
-                   name="account_first_name"
-                   id="account_first_name"
-                   autocomplete="given-name"
-                   value="{{ user.first_name|esc_attr }}"
-                   required
-                   aria-required="true" />
+    <div class="card shadow-sm mb-4">
+        <div class="card-header">
+            <h2 class="h5 mb-0">
+                <i class="bi bi-person me-1" aria-hidden="true"></i>
+                {{ __('Personal information') }}
+            </h2>
         </div>
-        <div class="col-sm-6">
-            <label for="account_last_name" class="form-label">
-                {{ __('Last name') }}&nbsp;<span class="text-danger" aria-hidden="true">*</span>
-                <span class="visually-hidden">{{ __('Required') }}</span>
-            </label>
-            <input type="text"
-                   class="form-control"
-                   name="account_last_name"
-                   id="account_last_name"
-                   autocomplete="family-name"
-                   value="{{ user.last_name|esc_attr }}"
-                   required
-                   aria-required="true" />
+        <div class="card-body">
+            <div class="row g-3 mb-3">
+                <div class="col-sm-6">
+                    <label for="account_first_name" class="form-label">
+                        {{ __('First name') }}&nbsp;<span class="text-danger" aria-hidden="true">*</span>
+                        <span class="visually-hidden">{{ __('Required') }}</span>
+                    </label>
+                    <input type="text"
+                           class="form-control"
+                           name="account_first_name"
+                           id="account_first_name"
+                           autocomplete="given-name"
+                           value="{{ user.first_name|esc_attr }}"
+                           required
+                           aria-required="true" />
+                </div>
+                <div class="col-sm-6">
+                    <label for="account_last_name" class="form-label">
+                        {{ __('Last name') }}&nbsp;<span class="text-danger" aria-hidden="true">*</span>
+                        <span class="visually-hidden">{{ __('Required') }}</span>
+                    </label>
+                    <input type="text"
+                           class="form-control"
+                           name="account_last_name"
+                           id="account_last_name"
+                           autocomplete="family-name"
+                           value="{{ user.last_name|esc_attr }}"
+                           required
+                           aria-required="true" />
+                </div>
+            </div>
+
+            <div class="mb-3">
+                <label for="account_display_name" class="form-label">
+                    {{ __('Display name') }}&nbsp;<span class="text-danger" aria-hidden="true">*</span>
+                    <span class="visually-hidden">{{ __('Required') }}</span>
+                </label>
+                <input type="text"
+                       class="form-control"
+                       name="account_display_name"
+                       id="account_display_name"
+                       aria-describedby="account_display_name_description"
+                       value="{{ user.display_name|esc_attr }}"
+                       required
+                       aria-required="true" />
+                <div id="account_display_name_description" class="form-text">
+                    {{ __('This will be how your name will be displayed in the account section and in reviews') }}
+                </div>
+            </div>
+
+            <div class="mb-0">
+                <label for="account_email" class="form-label">
+                    {{ __('Email address') }}&nbsp;<span class="text-danger" aria-hidden="true">*</span>
+                    <span class="visually-hidden">{{ __('Required') }}</span>
+                </label>
+                <input type="email"
+                       class="form-control"
+                       name="account_email"
+                       id="account_email"
+                       autocomplete="email"
+                       value="{{ user.user_email|esc_attr }}"
+                       required
+                       aria-required="true" />
+            </div>
+
+            {{ do_action('woocommerce_edit_account_form_fields') }}
         </div>
     </div>
 
-    <div class="mb-3">
-        <label for="account_display_name" class="form-label">
-            {{ __('Display name') }}&nbsp;<span class="text-danger" aria-hidden="true">*</span>
-            <span class="visually-hidden">{{ __('Required') }}</span>
-        </label>
-        <input type="text"
-               class="form-control"
-               name="account_display_name"
-               id="account_display_name"
-               aria-describedby="account_display_name_description"
-               value="{{ user.display_name|esc_attr }}"
-               required
-               aria-required="true" />
-        <div id="account_display_name_description" class="form-text">
-            {{ __('This will be how your name will be displayed in the account section and in reviews') }}
+    <div class="card shadow-sm mb-4">
+        <div class="card-header">
+            <h2 class="h5 mb-0">
+                <i class="bi bi-shield-lock me-1" aria-hidden="true"></i>
+                {{ __('Password change') }}
+            </h2>
+        </div>
+        <div class="card-body">
+            <div class="mb-3">
+                <label for="password_current" class="form-label">
+                    {{ __('Current password (leave blank to leave unchanged)') }}
+                </label>
+                <input type="password"
+                       class="form-control"
+                       name="password_current"
+                       id="password_current"
+                       autocomplete="off" />
+            </div>
+
+            <div class="mb-3">
+                <label for="password_1" class="form-label">
+                    {{ __('New password (leave blank to leave unchanged)') }}
+                </label>
+                <input type="password"
+                       class="form-control"
+                       name="password_1"
+                       id="password_1"
+                       autocomplete="off" />
+            </div>
+
+            <div class="mb-0">
+                <label for="password_2" class="form-label">
+                    {{ __('Confirm new password') }}
+                </label>
+                <input type="password"
+                       class="form-control"
+                       name="password_2"
+                       id="password_2"
+                       autocomplete="off" />
+            </div>
         </div>
     </div>
 
-    <div class="mb-3">
-        <label for="account_email" class="form-label">
-            {{ __('Email address') }}&nbsp;<span class="text-danger" aria-hidden="true">*</span>
-            <span class="visually-hidden">{{ __('Required') }}</span>
-        </label>
-        <input type="email"
-               class="form-control"
-               name="account_email"
-               id="account_email"
-               autocomplete="email"
-               value="{{ user.user_email|esc_attr }}"
-               required
-               aria-required="true" />
-    </div>
-
-    {{ do_action('woocommerce_edit_account_form_fields') }}
-
-    <fieldset class="mb-3">
-        <legend class="h5 border-bottom pb-2 mb-3">{{ __('Password change') }}</legend>
-
-        <div class="mb-3">
-            <label for="password_current" class="form-label">
-                {{ __('Current password (leave blank to leave unchanged)') }}
-            </label>
-            <input type="password"
-                   class="form-control"
-                   name="password_current"
-                   id="password_current"
-                   autocomplete="off" />
-        </div>
-
-        <div class="mb-3">
-            <label for="password_1" class="form-label">
-                {{ __('New password (leave blank to leave unchanged)') }}
-            </label>
-            <input type="password"
-                   class="form-control"
-                   name="password_1"
-                   id="password_1"
-                   autocomplete="off" />
-        </div>
-
-        <div class="mb-3">
-            <label for="password_2" class="form-label">
-                {{ __('Confirm new password') }}
-            </label>
-            <input type="password"
-                   class="form-control"
-                   name="password_2"
-                   id="password_2"
-                   autocomplete="off" />
-        </div>
-    </fieldset>
-
     {{ do_action('woocommerce_edit_account_form') }}
 
     <div class="mt-3">

templates/myaccount/form-edit-address.html.twig

@@ -1,7 +1,8 @@
 {#
  # Edit Address Form (Bootstrap 5 Override)
  #
- # Address editing form with Bootstrap form styling.
+ # Address editing form wrapped in a Bootstrap card with
+ # contextual icon for billing/shipping.
  #
  # Expected context:
  #   load_address - Address type ('billing' or 'shipping'), or empty
@@ -14,36 +15,45 @@
  #}
 
 {% set page_title = load_address == 'billing' ? __('Billing address') : __('Shipping address') %}
+{% set address_icon = load_address == 'billing' ? 'bi-receipt' : 'bi-truck' %}
 
 {{ do_action('woocommerce_before_edit_account_address_form') }}
 
 {% if not load_address %}
     {% include 'myaccount/my-address.html.twig' %}
 {% else %}
-    <form method="post" novalidate>
-        <h2 class="h4 mb-4">{{ apply_filters('woocommerce_my_account_edit_address_title', page_title, load_address) }}</h2>
-
-        <div class="woocommerce-address-fields">
-            {{ do_action('woocommerce_before_edit_address_form_' ~ load_address) }}
-
-            <div class="woocommerce-address-fields__field-wrapper">
-                {% for key, field in address %}
-                    {{ woocommerce_form_field(key, field, wc_get_post_data_by_key(key, field.value)) }}
-                {% endfor %}
-            </div>
-
-            {{ do_action('woocommerce_after_edit_address_form_' ~ load_address) }}
-
-            <div class="mt-3">
-                <button type="submit" class="btn btn-primary" name="save_address" value="{{ __('Save address') }}">
-                    <i class="bi bi-check-lg me-1" aria-hidden="true"></i>
-                    {{ __('Save address') }}
-                </button>
-                {{ wp_nonce_field('woocommerce-edit_address', 'woocommerce-edit-address-nonce') }}
-                <input type="hidden" name="action" value="edit_address" />
-            </div>
+    <div class="card shadow-sm">
+        <div class="card-header">
+            <h2 class="h5 mb-0">
+                <i class="bi {{ address_icon }} me-1" aria-hidden="true"></i>
+                {{ apply_filters('woocommerce_my_account_edit_address_title', page_title, load_address) }}
+            </h2>
         </div>
-    </form>
+        <div class="card-body">
+            <form method="post" novalidate>
+                <div class="woocommerce-address-fields">
+                    {{ do_action('woocommerce_before_edit_address_form_' ~ load_address) }}
+
+                    <div class="woocommerce-address-fields__field-wrapper">
+                        {% for key, field in address %}
+                            {{ woocommerce_form_field(key, field, wc_get_post_data_by_key(key, field.value)) }}
+                        {% endfor %}
+                    </div>
+
+                    {{ do_action('woocommerce_after_edit_address_form_' ~ load_address) }}
+
+                    <div class="mt-3">
+                        <button type="submit" class="btn btn-primary" name="save_address" value="{{ __('Save address') }}">
+                            <i class="bi bi-check-lg me-1" aria-hidden="true"></i>
+                            {{ __('Save address') }}
+                        </button>
+                        {{ wp_nonce_field('woocommerce-edit_address', 'woocommerce-edit-address-nonce') }}
+                        <input type="hidden" name="action" value="edit_address" />
+                    </div>
+                </div>
+            </form>
+        </div>
+    </div>
 {% endif %}
 
 {{ do_action('woocommerce_after_edit_account_address_form') }}

templates/myaccount/form-lost-password.html.twig

@@ -1,7 +1,8 @@
 {#
  # Lost Password Form (Bootstrap 5 Override)
  #
- # Form to request a password reset email.
+ # Form to request a password reset email, wrapped in a
+ # Bootstrap card for visual consistency.
  #
  # WooCommerce PHP equivalent: myaccount/form-lost-password.php
  #
@@ -11,37 +12,47 @@
 
 {{ do_action('woocommerce_before_lost_password_form') }}
 
-<form method="post" class="woocommerce-ResetPassword lost_reset_password">
-
-    <p class="mb-3">
-        {{ apply_filters('woocommerce_lost_password_message', __('Lost your password? Please enter your username or email address. You will receive a link to create a new password via email.')) }}
-    </p>
-
-    <div class="mb-3">
-        <label for="user_login" class="form-label">
-            {{ __('Username or email') }}&nbsp;<span class="text-danger" aria-hidden="true">*</span>
-            <span class="visually-hidden">{{ __('Required') }}</span>
-        </label>
-        <input type="text"
-               class="form-control"
-               name="user_login"
-               id="user_login"
-               autocomplete="username"
-               required
-               aria-required="true" />
+<div class="card shadow-sm">
+    <div class="card-header">
+        <h2 class="h5 mb-0">
+            <i class="bi bi-key me-1" aria-hidden="true"></i>
+            {{ __('Lost your password?') }}
+        </h2>
     </div>
+    <div class="card-body">
+        <form method="post" class="woocommerce-ResetPassword lost_reset_password">
 
-    {{ do_action('woocommerce_lostpassword_form') }}
+            <p class="text-body-secondary mb-3">
+                {{ apply_filters('woocommerce_lost_password_message', __('Lost your password? Please enter your username or email address. You will receive a link to create a new password via email.')) }}
+            </p>
 
-    <div class="mt-3">
-        <input type="hidden" name="wc_reset_password" value="true" />
-        <button type="submit" class="btn btn-primary" value="{{ __('Reset password') }}">
-            {{ __('Reset password') }}
-        </button>
+            <div class="mb-3">
+                <label for="user_login" class="form-label">
+                    {{ __('Username or email') }}&nbsp;<span class="text-danger" aria-hidden="true">*</span>
+                    <span class="visually-hidden">{{ __('Required') }}</span>
+                </label>
+                <input type="text"
+                       class="form-control"
+                       name="user_login"
+                       id="user_login"
+                       autocomplete="username"
+                       required
+                       aria-required="true" />
+            </div>
+
+            {{ do_action('woocommerce_lostpassword_form') }}
+
+            <div class="mt-3">
+                <input type="hidden" name="wc_reset_password" value="true" />
+                <button type="submit" class="btn btn-primary" value="{{ __('Reset password') }}">
+                    {{ __('Reset password') }}
+                </button>
+            </div>
+
+            {{ wp_nonce_field('lost_password', 'woocommerce-lost-password-nonce') }}
+
+        </form>
     </div>
-
-    {{ wp_nonce_field('lost_password', 'woocommerce-lost-password-nonce') }}
-
-</form>
+</div>
 
 {{ do_action('woocommerce_after_lost_password_form') }}

templates/myaccount/form-reset-password.html.twig

@@ -1,7 +1,8 @@
 {#
  # Reset Password Form (Bootstrap 5 Override)
  #
- # Form to set a new password after clicking the reset link.
+ # Form to set a new password after clicking the reset link,
+ # wrapped in a Bootstrap card for visual consistency.
  #
  # Expected context:
  #   args - Array with 'key' and 'login' values
@@ -14,55 +15,65 @@
 
 {{ do_action('woocommerce_before_reset_password_form') }}
 
-<form method="post" class="woocommerce-ResetPassword lost_reset_password">
-
-    <p class="mb-3">
-        {{ apply_filters('woocommerce_reset_password_message', __('Enter a new password below.')) }}
-    </p>
-
-    <div class="row g-3 mb-3">
-        <div class="col-sm-6">
-            <label for="password_1" class="form-label">
-                {{ __('New password') }}&nbsp;<span class="text-danger" aria-hidden="true">*</span>
-                <span class="visually-hidden">{{ __('Required') }}</span>
-            </label>
-            <input type="password"
-                   class="form-control"
-                   name="password_1"
-                   id="password_1"
-                   autocomplete="new-password"
-                   required
-                   aria-required="true" />
-        </div>
-        <div class="col-sm-6">
-            <label for="password_2" class="form-label">
-                {{ __('Re-enter new password') }}&nbsp;<span class="text-danger" aria-hidden="true">*</span>
-                <span class="visually-hidden">{{ __('Required') }}</span>
-            </label>
-            <input type="password"
-                   class="form-control"
-                   name="password_2"
-                   id="password_2"
-                   autocomplete="new-password"
-                   required
-                   aria-required="true" />
-        </div>
+<div class="card shadow-sm">
+    <div class="card-header">
+        <h2 class="h5 mb-0">
+            <i class="bi bi-shield-lock me-1" aria-hidden="true"></i>
+            {{ __('Set new password') }}
+        </h2>
     </div>
+    <div class="card-body">
+        <form method="post" class="woocommerce-ResetPassword lost_reset_password">
 
-    <input type="hidden" name="reset_key" value="{{ args.key|esc_attr }}" />
-    <input type="hidden" name="reset_login" value="{{ args.login|esc_attr }}" />
+            <p class="text-body-secondary mb-3">
+                {{ apply_filters('woocommerce_reset_password_message', __('Enter a new password below.')) }}
+            </p>
 
-    {{ do_action('woocommerce_resetpassword_form') }}
+            <div class="row g-3 mb-3">
+                <div class="col-sm-6">
+                    <label for="password_1" class="form-label">
+                        {{ __('New password') }}&nbsp;<span class="text-danger" aria-hidden="true">*</span>
+                        <span class="visually-hidden">{{ __('Required') }}</span>
+                    </label>
+                    <input type="password"
+                           class="form-control"
+                           name="password_1"
+                           id="password_1"
+                           autocomplete="new-password"
+                           required
+                           aria-required="true" />
+                </div>
+                <div class="col-sm-6">
+                    <label for="password_2" class="form-label">
+                        {{ __('Re-enter new password') }}&nbsp;<span class="text-danger" aria-hidden="true">*</span>
+                        <span class="visually-hidden">{{ __('Required') }}</span>
+                    </label>
+                    <input type="password"
+                           class="form-control"
+                           name="password_2"
+                           id="password_2"
+                           autocomplete="new-password"
+                           required
+                           aria-required="true" />
+                </div>
+            </div>
 
-    <div class="mt-3">
-        <input type="hidden" name="wc_reset_password" value="true" />
-        <button type="submit" class="btn btn-primary" value="{{ __('Save') }}">
-            {{ __('Save') }}
-        </button>
+            <input type="hidden" name="reset_key" value="{{ args.key|esc_attr }}" />
+            <input type="hidden" name="reset_login" value="{{ args.login|esc_attr }}" />
+
+            {{ do_action('woocommerce_resetpassword_form') }}
+
+            <div class="mt-3">
+                <input type="hidden" name="wc_reset_password" value="true" />
+                <button type="submit" class="btn btn-primary" value="{{ __('Save') }}">
+                    {{ __('Save') }}
+                </button>
+            </div>
+
+            {{ wp_nonce_field('reset_password', 'woocommerce-reset-password-nonce') }}
+
+        </form>
     </div>
-
-    {{ wp_nonce_field('reset_password', 'woocommerce-reset-password-nonce') }}
-
-</form>
+</div>
 
 {{ do_action('woocommerce_after_reset_password_form') }}

templates/myaccount/lost-password-confirmation.html.twig

@@ -16,8 +16,13 @@
 
 {{ do_action('woocommerce_before_lost_password_confirmation_message') }}
 
-<p>
+<p class="text-body-secondary">
     {{ apply_filters('woocommerce_lost_password_confirmation_message', __('A password reset email has been sent to the email address on file for your account, but may take several minutes to show up in your inbox. Please wait at least 10 minutes before attempting another reset.')) }}
 </p>
 
+<a href="{{ wc_get_page_permalink('myaccount')|esc_url }}" class="btn btn-outline-primary">
+    <i class="bi bi-arrow-left me-1" aria-hidden="true"></i>
+    {{ __('Back to login') }}
+</a>
+
 {{ do_action('woocommerce_after_lost_password_confirmation_message') }}

templates/myaccount/my-account.html.twig

@@ -13,11 +13,11 @@
 {{ do_action('woocommerce_before_my_account') }}
 
 <div class="row g-4">
-    <div class="col-lg-3">
+    <div class="col-lg-auto">
         {% include 'myaccount/navigation.html.twig' %}
     </div>
 
-    <div class="col-lg-9">
+    <div class="col-lg">
         <div class="woocommerce-MyAccount-content">
             {{ do_action('woocommerce_account_content') }}
         </div>

templates/myaccount/navigation.html.twig

@@ -2,7 +2,8 @@
  # My Account Navigation (Bootstrap 5 Override)
  #
  # Renders the sidebar navigation for the My Account area
- # using Bootstrap list-group component.
+ # using Bootstrap list-group component with icons.
+ # Responsive: offcanvas on mobile, sticky sidebar on desktop.
  #
  # WooCommerce PHP equivalent: myaccount/navigation.php
  #
@@ -10,14 +11,53 @@
  # @since 0.1.0
  #}
 
-<nav class="woocommerce-MyAccount-navigation" aria-label="{{ __('Account navigation') }}">
-    <div class="list-group">
-        {% for endpoint, label in wc_get_account_menu_items() %}
-            <a href="{{ wc_get_account_endpoint_url(endpoint)|esc_url }}"
-               class="list-group-item list-group-item-action{% if wc_get_account_menu_item_classes(endpoint) matches '/is-active/' %} active{% endif %}"
-               {% if wc_get_account_menu_item_classes(endpoint) matches '/is-active/' %}aria-current="page"{% endif %}>
-                {{ label|esc_html }}
-            </a>
-        {% endfor %}
+{% set endpoint_icons = {
+    'dashboard':       'bi-speedometer2',
+    'orders':          'bi-bag',
+    'downloads':       'bi-download',
+    'edit-address':    'bi-geo-alt',
+    'payment-methods': 'bi-credit-card',
+    'edit-account':    'bi-person-gear',
+    'customer-logout': 'bi-box-arrow-right',
+} %}
+
+{{ do_action('woocommerce_before_account_navigation') }}
+
+<button class="btn btn-outline-secondary w-100 mb-3 d-lg-none"
+        type="button"
+        data-bs-toggle="offcanvas"
+        data-bs-target="#accountNav"
+        aria-controls="accountNav">
+    <i class="bi bi-list me-1" aria-hidden="true"></i>
+    {{ __('Account menu') }}
+</button>
+
+<div class="offcanvas-lg offcanvas-start" id="accountNav" tabindex="-1"
+     aria-labelledby="accountNavLabel">
+    <div class="offcanvas-header d-lg-none">
+        <h5 class="offcanvas-title" id="accountNavLabel">{{ __('Account menu') }}</h5>
+        <button type="button" class="btn-close" data-bs-dismiss="offcanvas"
+                data-bs-target="#accountNav" aria-label="{{ __('Close') }}"></button>
     </div>
-</nav>
+    <div class="offcanvas-body p-0">
+        <nav class="woocommerce-MyAccount-navigation position-sticky"
+             style="top: 5rem;"
+             aria-label="{{ __('Account navigation') }}">
+            <div class="list-group">
+                {% for endpoint, label in wc_get_account_menu_items() %}
+                    {% set is_active = wc_get_account_menu_item_classes(endpoint) matches '/is-active/' %}
+                    <a href="{{ wc_get_account_endpoint_url(endpoint)|esc_url }}"
+                       class="list-group-item list-group-item-action d-flex align-items-center{% if is_active %} active{% endif %}"
+                       {% if is_active %}aria-current="page"{% endif %}>
+                        {% if endpoint_icons[endpoint] is defined %}
+                            <i class="bi {{ endpoint_icons[endpoint] }} me-2" aria-hidden="true"></i>
+                        {% endif %}
+                        {{ label|esc_html }}
+                    </a>
+                {% endfor %}
+            </div>
+        </nav>
+    </div>
+</div>
+
+{{ do_action('woocommerce_after_account_navigation') }}

templates/myaccount/view-order.html.twig

@@ -1,7 +1,8 @@
 {#
  # View Order (Bootstrap 5 Override)
  #
- # Shows details of a specific order on the account page.
+ # Shows details of a specific order on the account page
+ # with summary card, status badge, and order notes.
  # HPOS compatible: uses WC_Order methods only.
  #
  # Expected context:
@@ -16,29 +17,60 @@
 
 {% set notes = order.get_customer_order_notes() %}
 
-<p>
-    {{ __('Order #%1$s was placed on %2$s and is currently %3$s.')|format(
-        '<mark class="order-number">' ~ order.get_order_number() ~ '</mark>',
-        '<mark class="order-date">' ~ wc_format_datetime(order.get_date_created()) ~ '</mark>',
-        '<mark class="order-status">' ~ wc_get_order_status_name(order.get_status()) ~ '</mark>'
-    )|wp_kses_post }}
-</p>
+<div class="card shadow-sm mb-4">
+    <div class="card-header d-flex justify-content-between align-items-center">
+        <h2 class="h5 mb-0">
+            {{ __('Order #%s')|format(order.get_order_number()) }}
+        </h2>
+        {% include 'components/status-badge.html.twig' with { status: order.get_status() } %}
+    </div>
+    <ul class="list-group list-group-flush">
+        <li class="list-group-item d-flex justify-content-between">
+            <span class="text-body-secondary">{{ __('Date') }}</span>
+            <time datetime="{{ order.get_date_created().date('c')|esc_attr }}">
+                {{ wc_format_datetime(order.get_date_created())|esc_html }}
+            </time>
+        </li>
+        <li class="list-group-item d-flex justify-content-between">
+            <span class="text-body-secondary">{{ __('Status') }}</span>
+            {% include 'components/status-badge.html.twig' with { status: order.get_status() } %}
+        </li>
+        <li class="list-group-item d-flex justify-content-between">
+            <span class="text-body-secondary">{{ __('Total') }}</span>
+            <strong>{{ order.get_formatted_order_total()|wp_kses_post }}</strong>
+        </li>
+        {% if order.get_payment_method_title() %}
+            <li class="list-group-item d-flex justify-content-between">
+                <span class="text-body-secondary">{{ __('Payment method') }}</span>
+                <span>{{ order.get_payment_method_title()|esc_html }}</span>
+            </li>
+        {% endif %}
+    </ul>
+</div>
 
 {% if notes %}
-    <h2 class="h5 mt-4 mb-3">{{ __('Order updates') }}</h2>
-    <div class="list-group mb-4">
-        {% for note in notes %}
-            <div class="list-group-item">
-                <div class="d-flex justify-content-between align-items-center mb-1">
-                    <small class="text-body-secondary">
-                        {{ date_i18n(__('l jS \\o\\f F Y, h:ia'), strtotime(note.comment_date)) }}
-                    </small>
+    <div class="card shadow-sm mb-4">
+        <div class="card-header">
+            <h3 class="h6 mb-0">
+                <i class="bi bi-chat-left-text me-1" aria-hidden="true"></i>
+                {{ __('Order updates') }}
+            </h3>
+        </div>
+        <div class="list-group list-group-flush">
+            {% for note in notes %}
+                <div class="list-group-item">
+                    <div class="d-flex justify-content-between align-items-center mb-1">
+                        <small class="text-body-secondary">
+                            <i class="bi bi-clock me-1" aria-hidden="true"></i>
+                            {{ date_i18n(__('l jS \\o\\f F Y, h:ia'), strtotime(note.comment_date)) }}
+                        </small>
+                    </div>
+                    <div class="mb-0">
+                        {{ wpautop(wptexturize(note.comment_content))|raw }}
+                    </div>
                 </div>
-                <div class="mb-0">
-                    {{ wpautop(wptexturize(note.comment_content))|raw }}
-                </div>
-            </div>
-        {% endfor %}
+            {% endfor %}
+        </div>
     </div>
 {% endif %}
 

templates/wc-base.html.twig

@@ -1,7 +1,8 @@
 {#
  # Base Template (Bootstrap 5 Override)
  #
- # Overrides the plugin's base.html.twig with Bootstrap 5 components.
+ # WooCommerce base layout (renamed from base.html.twig to avoid
+ # shadowing the parent theme's full page shell).
  # Provides the basic structure and block definitions.
  #
  # When _theme_wrapped is true, the parent theme already provides the page