Implement Phase 9 & reusable components; skip Phase 8 (emails)

Phase 8 (Emails) skipped: WooCommerce email rendering uses
wc_get_template_html() which bypasses the Twig pipeline entirely.
Email customization deferred to plugins or block email editor.

Phase 9 - Supplementary (7 templates):
- Brand description with thumbnail, taxonomy archive delegate
- Brands A-Z shortcode with alphabetical index navigation
- Single brand thumbnail shortcode
- REST API OAuth login and grant-access forms
- Back-in-stock notification form with email input

Reusable Components (6 templates):
- price: product price display with sale handling
- rating: star rating with Bootstrap Icons (filled/half/empty)
- address-card: billing/shipping address card with edit link
- status-badge: contextual order status badges
- quantity-input: +/- input group widget
- form-field: universal form field renderer (text/select/textarea/checkbox)

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

templates/auth/form-grant-access.html.twig

@@ -0,0 +1,72 @@
+{#
+ # REST API Auth Grant Access Form (Bootstrap 5 Override)
+ #
+ # Confirmation page for granting third-party app access via OAuth.
+ # Rendered outside the WordPress theme (standalone page).
+ #
+ # Expected context:
+ #   app_name     - Name of the requesting application
+ #   scope        - Access scope (read, write, read_write)
+ #   permissions  - Array of permission description strings
+ #   callback_url - Callback URL for the application
+ #   return_url   - URL to return to on deny
+ #   granted_url  - URL to redirect to on approve
+ #   logout_url   - URL to log out
+ #   user         - WP_User object of the logged-in user
+ #
+ # WooCommerce PHP equivalent: auth/form-grant-access.php
+ #
+ # @package WcBootstrap
+ # @since 0.1.0
+ #}
+
+{{ do_action('woocommerce_auth_page_header') }}
+
+<h1 class="h3 mb-4">
+    {{ __('%s would like to connect to your store')|format(app_name|esc_html) }}
+</h1>
+
+{{ wc_print_notices() }}
+
+<p class="mb-3">
+    {{ __('This will give "%1$s" %2$s access which will allow it to:')|format(
+        '<strong>' ~ app_name|esc_html ~ '</strong>',
+        '<strong>' ~ scope|esc_html ~ '</strong>'
+    )|wp_kses_post }}
+</p>
+
+<ul class="list-group mb-4">
+    {% for permission in permissions %}
+        <li class="list-group-item">
+            <i class="bi bi-check-lg text-success me-2" aria-hidden="true"></i>
+            {{ permission|esc_html }}
+        </li>
+    {% endfor %}
+</ul>
+
+<div class="alert alert-warning mb-4" role="alert">
+    <i class="bi bi-exclamation-triangle me-2" aria-hidden="true"></i>
+    {{ __('Approving will share credentials with %s. Do not proceed if this looks suspicious in any way.')|format(
+        '<strong>' ~ wp_parse_url(callback_url, constant('PHP_URL_HOST'))|esc_html ~ '</strong>'
+    )|wp_kses_post }}
+</div>
+
+<div class="d-flex align-items-center gap-3 mb-4 p-3 bg-body-tertiary rounded">
+    {{ get_avatar(user.ID, 48)|raw }}
+    <div>
+        <span class="fw-semibold">{{ __('Logged in as %s')|format(user.display_name|esc_html) }}</span>
+        <a href="{{ logout_url|esc_url }}" class="d-block small">{{ __('Logout') }}</a>
+    </div>
+</div>
+
+<div class="d-flex gap-2">
+    <a href="{{ granted_url|esc_url }}" class="btn btn-primary">
+        <i class="bi bi-check-lg me-1" aria-hidden="true"></i>
+        {{ __('Approve') }}
+    </a>
+    <a href="{{ return_url|esc_url }}" class="btn btn-outline-secondary">
+        {{ __('Deny') }}
+    </a>
+</div>
+
+{{ do_action('woocommerce_auth_page_footer') }}

templates/auth/form-login.html.twig

@@ -0,0 +1,69 @@
+{#
+ # REST API Auth Login Form (Bootstrap 5 Override)
+ #
+ # Login form for third-party app OAuth authentication.
+ # Rendered outside the WordPress theme (standalone page).
+ #
+ # Expected context:
+ #   app_name     - Name of the requesting application
+ #   return_url   - URL to return to on cancel
+ #   redirect_url - URL to redirect to after login
+ #
+ # WooCommerce PHP equivalent: auth/form-login.php
+ #
+ # @package WcBootstrap
+ # @since 0.1.0
+ #}
+
+{{ do_action('woocommerce_auth_page_header') }}
+
+<h1 class="h3 mb-4">
+    {{ __('%s would like to connect to your store')|format(app_name|esc_html) }}
+</h1>
+
+{{ wc_print_notices() }}
+
+<p class="mb-4">
+    {{ __('To connect to %1$s you need to be logged in. Log in to your store below, or <a href="%2$s">cancel and return to %1$s</a>')|format(app_name|esc_html, return_url|esc_url)|wp_kses_post }}
+</p>
+
+<form method="post" class="wc-auth-login">
+    <div class="mb-3">
+        <label for="username" class="form-label">
+            {{ __('Username or email address') }}&nbsp;<span class="text-danger" aria-hidden="true">*</span>
+            <span class="visually-hidden">{{ __('Required') }}</span>
+        </label>
+        <input type="text"
+               class="form-control"
+               name="username"
+               id="username"
+               required
+               aria-required="true" />
+    </div>
+
+    <div class="mb-3">
+        <label for="password" class="form-label">
+            {{ __('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"
+               id="password"
+               required
+               aria-required="true" />
+    </div>
+
+    <div class="mt-3">
+        {{ wp_nonce_field('woocommerce-login', 'woocommerce-login-nonce') }}
+        <button type="submit"
+                class="btn btn-primary btn-lg"
+                name="login"
+                value="{{ __('Login') }}">
+            {{ __('Login') }}
+        </button>
+        <input type="hidden" name="redirect" value="{{ redirect_url|esc_url }}" />
+    </div>
+</form>
+
+{{ do_action('woocommerce_auth_page_footer') }}

templates/brands/brand-description.html.twig

@@ -0,0 +1,29 @@
+{#
+ # Brand Description (Bootstrap 5 Override)
+ #
+ # Renders a brand's description with optional thumbnail.
+ #
+ # Expected context:
+ #   thumbnail - URL of brand thumbnail image (or empty)
+ #
+ # WooCommerce PHP equivalent: brands/brand-description.php
+ #
+ # @package WcBootstrap
+ # @since 0.1.0
+ #}
+
+{% set image_size = wc_get_image_size('shop_catalog') %}
+
+<div class="term-description brand-description d-flex gap-4 mb-4">
+    {% if thumbnail %}
+        <img src="{{ thumbnail|esc_url }}"
+             alt="{{ single_term_title('', false)|esc_attr }}"
+             class="rounded flex-shrink-0"
+             width="{{ image_size.width|esc_attr }}"
+             style="max-width: {{ image_size.width }}px; height: auto;" />
+    {% endif %}
+
+    <div class="text">
+        {{ term_description()|wptexturize|wpautop|do_shortcode }}
+    </div>
+</div>

templates/brands/shortcodes/brands-a-z.html.twig

@@ -0,0 +1,56 @@
+{#
+ # Brands A-Z Listing (Bootstrap 5 Override)
+ #
+ # Alphabetical index of product brands used by [product_brand_list] shortcode.
+ #
+ # Expected context:
+ #   index          - Array of index characters (A-Z, 0-9)
+ #   product_brands - Array keyed by character, each containing brand term objects
+ #   show_empty     - Whether to show empty index letters
+ #   show_top_links - Whether to show "Top" links after each section
+ #
+ # WooCommerce PHP equivalent: brands/shortcodes/brands-a-z.php
+ #
+ # @package WcBootstrap
+ # @since 0.1.0
+ #}
+
+<div id="brands_a_z">
+    <nav class="mb-4" aria-label="{{ __('Brand index') }}">
+        <ul class="list-inline brands_index">
+            {% for i in index %}
+                {% if product_brands[i] is defined %}
+                    <li class="list-inline-item">
+                        <a href="#brands-{{ i|esc_attr }}" class="btn btn-sm btn-outline-primary">{{ i|esc_html }}</a>
+                    </li>
+                {% elseif show_empty %}
+                    <li class="list-inline-item">
+                        <span class="btn btn-sm btn-outline-secondary disabled">{{ i|esc_html }}</span>
+                    </li>
+                {% endif %}
+            {% endfor %}
+        </ul>
+    </nav>
+
+    {% for i in index %}
+        {% if product_brands[i] is defined %}
+            <h3 id="brands-{{ i|esc_attr }}" class="h5 border-bottom pb-2 mt-4 mb-3">{{ i|esc_html }}</h3>
+
+            <ul class="list-unstyled brands row row-cols-1 row-cols-sm-2 row-cols-md-3 g-2 mb-3">
+                {% for brand in product_brands[i] %}
+                    <li class="col">
+                        <a href="{{ get_term_link(brand.slug, 'product_brand')|esc_url }}">
+                            {{ brand.name|esc_html }}
+                        </a>
+                    </li>
+                {% endfor %}
+            </ul>
+
+            {% if show_top_links %}
+                <a class="btn btn-sm btn-link" href="#brands_a_z">
+                    <i class="bi bi-arrow-up me-1" aria-hidden="true"></i>{{ __('Top') }}
+                </a>
+            {% endif %}
+        {% endif %}
+    {% endfor %}
+</div>

templates/brands/shortcodes/single-brand.html.twig

@@ -0,0 +1,24 @@
+{#
+ # Single Brand Thumbnail (Bootstrap 5 Override)
+ #
+ # Renders a single brand image link, used by [product_brand] shortcode.
+ #
+ # Expected context:
+ #   term      - WP_Term object for the brand
+ #   thumbnail - URL to brand thumbnail image
+ #   class     - CSS class for the image
+ #   width     - Image width
+ #   height    - Image height
+ #
+ # WooCommerce PHP equivalent: brands/shortcodes/single-brand.php
+ #
+ # @package WcBootstrap
+ # @since 0.1.0
+ #}
+
+<a href="{{ get_term_link(term, 'product_brand')|esc_url }}" class="d-inline-block">
+    <img src="{{ thumbnail|esc_url }}"
+         alt="{{ term.name|esc_attr }}"
+         class="{{ class|esc_attr }}"
+         style="width: {{ width|esc_attr }}; height: {{ height|esc_attr }};" />
+</a>

templates/brands/taxonomy-product_brand.html.twig

@@ -0,0 +1,12 @@
+{#
+ # Brand Taxonomy Archive (Bootstrap 5 Override)
+ #
+ # Delegates to the standard archive-product template.
+ #
+ # WooCommerce PHP equivalent: brands/taxonomy-product_brand.php
+ #
+ # @package WcBootstrap
+ # @since 0.1.0
+ #}
+
+{% include 'archive-product.html.twig' %}

templates/components/address-card.html.twig

@@ -0,0 +1,58 @@
+{#
+ # Address Card Component (Bootstrap 5)
+ #
+ # Reusable address display card with optional edit link.
+ #
+ # Expected context:
+ #   title      - Card header title (e.g., "Billing address")
+ #   address    - Formatted address HTML string
+ #   phone      - Phone number (optional)
+ #   email      - Email address (optional)
+ #   edit_url   - URL to edit this address (optional)
+ #
+ # Usage:
+ #   {% include 'components/address-card.html.twig' with {
+ #       title: 'Billing address',
+ #       address: order.get_formatted_billing_address(),
+ #       phone: order.get_billing_phone(),
+ #       email: order.get_billing_email(),
+ #       edit_url: wc_get_endpoint_url('edit-address', 'billing')
+ #   } %}
+ #
+ # @package WcBootstrap
+ # @since 0.1.0
+ #}
+
+<div class="card h-100">
+    <div class="card-header d-flex justify-content-between align-items-center">
+        <h3 class="h6 mb-0">{{ title|esc_html }}</h3>
+        {% if edit_url is defined and edit_url %}
+            <a href="{{ edit_url|esc_url }}" class="btn btn-sm btn-outline-primary">
+                <i class="bi bi-pencil me-1" aria-hidden="true"></i>{{ __('Edit') }}
+            </a>
+        {% endif %}
+    </div>
+    <div class="card-body">
+        <address class="mb-0" style="font-style: normal; line-height: 1.6;">
+            {% if address %}
+                {{ address|wp_kses_post }}
+            {% else %}
+                <span class="text-body-secondary">{{ __('N/A') }}</span>
+            {% endif %}
+
+            {% if phone is defined and phone %}
+                <p class="mt-2 mb-0">
+                    <i class="bi bi-telephone me-1" aria-hidden="true"></i>
+                    {{ phone|esc_html }}
+                </p>
+            {% endif %}
+
+            {% if email is defined and email %}
+                <p class="mt-1 mb-0">
+                    <i class="bi bi-envelope me-1" aria-hidden="true"></i>
+                    {{ email|esc_html }}
+                </p>
+            {% endif %}
+        </address>
+    </div>
+</div>

templates/components/form-field.html.twig

@@ -0,0 +1,114 @@
+{#
+ # Form Field Component (Bootstrap 5)
+ #
+ # Reusable form field wrapper with label, input, and validation.
+ # Renders different input types based on the field configuration.
+ #
+ # Expected context:
+ #   field_key  - Field name/key
+ #   field      - Field configuration array with:
+ #     .type        - Input type (text, email, password, tel, select, textarea, checkbox, radio)
+ #     .label       - Field label
+ #     .required    - Whether field is required (boolean)
+ #     .placeholder - Placeholder text (optional)
+ #     .options     - Array of options for select/radio (optional)
+ #     .value       - Current value (optional)
+ #     .description - Help text (optional)
+ #     .class       - Additional CSS classes (optional)
+ #
+ # Usage:
+ #   {% include 'components/form-field.html.twig' with {
+ #       field_key: 'billing_email',
+ #       field: { type: 'email', label: 'Email', required: true }
+ #   } %}
+ #
+ # @package WcBootstrap
+ # @since 0.1.0
+ #}
+
+{% set field_type = field.type|default('text') %}
+{% set field_id = field_key|replace({'_': '-', '[': '-', ']': ''}) %}
+{% set is_required = field.required|default(false) %}
+
+{% if field_type == 'checkbox' %}
+    <div class="form-check mb-3">
+        <input type="checkbox"
+               class="form-check-input {{ field.class|default('') }}"
+               name="{{ field_key|esc_attr }}"
+               id="{{ field_id|esc_attr }}"
+               value="1"
+               {% if field.value|default(false) %}checked{% endif %}
+               {% if is_required %}required aria-required="true"{% endif %} />
+        <label class="form-check-label" for="{{ field_id|esc_attr }}">
+            {{ field.label }}
+            {% if is_required %}<span class="text-danger" aria-hidden="true">*</span>{% endif %}
+        </label>
+    </div>
+{% elseif field_type == 'textarea' %}
+    <div class="mb-3">
+        <label for="{{ field_id|esc_attr }}" class="form-label">
+            {{ field.label }}
+            {% if is_required %}
+                &nbsp;<span class="text-danger" aria-hidden="true">*</span>
+                <span class="visually-hidden">{{ __('Required') }}</span>
+            {% endif %}
+        </label>
+        <textarea class="form-control {{ field.class|default('') }}"
+                  name="{{ field_key|esc_attr }}"
+                  id="{{ field_id|esc_attr }}"
+                  rows="{{ field.rows|default(3) }}"
+                  {% if field.placeholder is defined %}placeholder="{{ field.placeholder|esc_attr }}"{% endif %}
+                  {% if is_required %}required aria-required="true"{% endif %}>{{ field.value|default('')|esc_html }}</textarea>
+        {% if field.description is defined and field.description %}
+            <div class="form-text">{{ field.description }}</div>
+        {% endif %}
+    </div>
+{% elseif field_type == 'select' %}
+    <div class="mb-3">
+        <label for="{{ field_id|esc_attr }}" class="form-label">
+            {{ field.label }}
+            {% if is_required %}
+                &nbsp;<span class="text-danger" aria-hidden="true">*</span>
+                <span class="visually-hidden">{{ __('Required') }}</span>
+            {% endif %}
+        </label>
+        <select class="form-select {{ field.class|default('') }}"
+                name="{{ field_key|esc_attr }}"
+                id="{{ field_id|esc_attr }}"
+                {% if is_required %}required aria-required="true"{% endif %}>
+            {% if field.placeholder is defined %}
+                <option value="">{{ field.placeholder|esc_html }}</option>
+            {% endif %}
+            {% for option_value, option_label in field.options|default({}) %}
+                <option value="{{ option_value|esc_attr }}"
+                        {% if field.value|default('') == option_value %}selected{% endif %}>
+                    {{ option_label|esc_html }}
+                </option>
+            {% endfor %}
+        </select>
+        {% if field.description is defined and field.description %}
+            <div class="form-text">{{ field.description }}</div>
+        {% endif %}
+    </div>
+{% else %}
+    <div class="mb-3">
+        <label for="{{ field_id|esc_attr }}" class="form-label">
+            {{ field.label }}
+            {% if is_required %}
+                &nbsp;<span class="text-danger" aria-hidden="true">*</span>
+                <span class="visually-hidden">{{ __('Required') }}</span>
+            {% endif %}
+        </label>
+        <input type="{{ field_type|esc_attr }}"
+               class="form-control {{ field.class|default('') }}"
+               name="{{ field_key|esc_attr }}"
+               id="{{ field_id|esc_attr }}"
+               value="{{ field.value|default('')|esc_attr }}"
+               {% if field.placeholder is defined %}placeholder="{{ field.placeholder|esc_attr }}"{% endif %}
+               {% if field.autocomplete is defined %}autocomplete="{{ field.autocomplete|esc_attr }}"{% endif %}
+               {% if is_required %}required aria-required="true"{% endif %} />
+        {% if field.description is defined and field.description %}
+            <div class="form-text">{{ field.description }}</div>
+        {% endif %}
+    </div>
+{% endif %}

templates/components/price.html.twig

@@ -0,0 +1,20 @@
+{#
+ # Price Component (Bootstrap 5)
+ #
+ # Reusable price display with sale/regular price handling.
+ #
+ # Expected context:
+ #   product - WC_Product object
+ #
+ # Usage:
+ #   {% include 'components/price.html.twig' with { product: product } %}
+ #
+ # @package WcBootstrap
+ # @since 0.1.0
+ #}
+
+{% if product.get_price_html() %}
+    <span class="price">
+        {{ product.get_price_html()|raw }}
+    </span>
+{% endif %}

templates/components/quantity-input.html.twig

@@ -0,0 +1,52 @@
+{#
+ # Quantity Input Component (Bootstrap 5)
+ #
+ # Reusable quantity input with +/- buttons using Bootstrap input-group.
+ # Works with the quantity.js script for increment/decrement.
+ #
+ # Expected context:
+ #   input_name  - Input name attribute (default: 'quantity')
+ #   input_id    - Input id attribute (optional)
+ #   input_value - Current quantity value (default: 1)
+ #   min_value   - Minimum quantity (default: 1)
+ #   max_value   - Maximum quantity (default: '')
+ #   step        - Step increment (default: 1)
+ #   classes     - Additional CSS classes (optional)
+ #
+ # Usage:
+ #   {% include 'components/quantity-input.html.twig' with {
+ #       input_name: 'quantity',
+ #       input_value: 1,
+ #       min_value: 1,
+ #       max_value: product.get_max_purchase_quantity()
+ #   } %}
+ #
+ # @package WcBootstrap
+ # @since 0.1.0
+ #}
+
+{% set qty_name = input_name|default('quantity') %}
+{% set qty_id = input_id|default('quantity_' ~ random()) %}
+{% set qty_value = input_value|default(1) %}
+{% set qty_min = min_value|default(1) %}
+{% set qty_max = max_value|default('') %}
+{% set qty_step = step|default(1) %}
+
+<div class="quantity input-group input-group-sm {{ classes|default('') }}" style="max-width: 140px;">
+    <button type="button" class="btn btn-outline-secondary qty-minus" aria-label="{{ __('Decrease quantity') }}">
+        <i class="bi bi-dash" aria-hidden="true"></i>
+    </button>
+    <input type="number"
+           class="form-control text-center"
+           name="{{ qty_name|esc_attr }}"
+           id="{{ qty_id|esc_attr }}"
+           value="{{ qty_value|esc_attr }}"
+           min="{{ qty_min|esc_attr }}"
+           {% if qty_max %}max="{{ qty_max|esc_attr }}"{% endif %}
+           step="{{ qty_step|esc_attr }}"
+           inputmode="numeric"
+           aria-label="{{ __('Quantity') }}" />
+    <button type="button" class="btn btn-outline-secondary qty-plus" aria-label="{{ __('Increase quantity') }}">
+        <i class="bi bi-plus" aria-hidden="true"></i>
+    </button>
+</div>

templates/components/rating.html.twig

@@ -0,0 +1,37 @@
+{#
+ # Rating Component (Bootstrap 5)
+ #
+ # Reusable star rating display using Bootstrap Icons.
+ #
+ # Expected context:
+ #   rating       - Numeric rating (0-5)
+ #   review_count - Number of reviews (optional, for display)
+ #
+ # Usage:
+ #   {% include 'components/rating.html.twig' with { rating: 4.5, review_count: 12 } %}
+ #
+ # @package WcBootstrap
+ # @since 0.1.0
+ #}
+
+{% if rating is defined and rating > 0 %}
+    <div class="wc-star-rating d-inline-flex align-items-center gap-1"
+         role="img"
+         aria-label="{{ __('%s out of 5')|format(rating) }}">
+        {% for i in 1..5 %}
+            {% if rating >= i %}
+                <i class="bi bi-star-fill text-warning" aria-hidden="true"></i>
+            {% elseif rating >= (i - 0.5) %}
+                <i class="bi bi-star-half text-warning" aria-hidden="true"></i>
+            {% else %}
+                <i class="bi bi-star text-warning" aria-hidden="true"></i>
+            {% endif %}
+        {% endfor %}
+
+        {% if review_count is defined and review_count > 0 %}
+            <small class="text-body-secondary ms-1">
+                ({{ review_count }})
+            </small>
+        {% endif %}
+    </div>
+{% endif %}

templates/components/status-badge.html.twig

@@ -0,0 +1,30 @@
+{#
+ # Status Badge Component (Bootstrap 5)
+ #
+ # Reusable order/payment status badge with contextual colors.
+ #
+ # Expected context:
+ #   status - Status slug (e.g., 'completed', 'processing', 'on-hold', 'cancelled', 'failed', 'refunded', 'pending')
+ #   label  - Display label (optional, defaults to status name via wc_get_order_status_name)
+ #
+ # Usage:
+ #   {% include 'components/status-badge.html.twig' with { status: order.get_status() } %}
+ #   {% include 'components/status-badge.html.twig' with { status: 'completed', label: 'Done' } %}
+ #
+ # @package WcBootstrap
+ # @since 0.1.0
+ #}
+
+{% set display_label = label|default(wc_get_order_status_name(status)) %}
+
+{% if status == 'completed' %}
+    <span class="badge text-bg-success">{{ display_label|esc_html }}</span>
+{% elseif status == 'processing' %}
+    <span class="badge text-bg-primary">{{ display_label|esc_html }}</span>
+{% elseif status == 'on-hold' or status == 'pending' %}
+    <span class="badge text-bg-warning">{{ display_label|esc_html }}</span>
+{% elseif status == 'cancelled' or status == 'failed' or status == 'refunded' %}
+    <span class="badge text-bg-danger">{{ display_label|esc_html }}</span>
+{% else %}
+    <span class="badge text-bg-secondary">{{ display_label|esc_html }}</span>
+{% endif %}

templates/single-product/back-in-stock-form.html.twig

@@ -0,0 +1,65 @@
+{#
+ # Back in Stock Form (Bootstrap 5 Override)
+ #
+ # Notification signup form shown on out-of-stock product pages.
+ #
+ # Expected context:
+ #   product_id       - Product ID
+ #   is_visible       - Whether the form is visible (not hidden)
+ #   show_email_field - Whether to show the email input
+ #   show_checkbox    - Whether to show the privacy opt-in checkbox
+ #   button_class     - CSS class for the submit button
+ #
+ # WooCommerce PHP equivalent: single-product/back-in-stock-form.php
+ #
+ # @package WcBootstrap
+ # @since 0.1.0
+ #}
+
+<div class="wc_bis_form card{% if not is_visible %} d-none{% endif %} mt-3"
+     data-bis-product-id="{{ product_id }}">
+    <div class="card-body">
+        <h3 id="wc_bis_form_heading_{{ product_id }}" class="h6 mb-3">
+            {{ __('Want to be notified when this product is back in stock?') }}
+        </h3>
+
+        <form method="post" novalidate aria-labelledby="wc_bis_form_heading_{{ product_id }}">
+            <div class="d-flex gap-2 mb-3">
+                {% if show_email_field %}
+                    <label for="wc_bis_email_{{ product_id }}" class="visually-hidden">
+                        {{ __('Email address to be notified when this product is back in stock') }}
+                    </label>
+                    <input type="email"
+                           name="wc_bis_email"
+                           class="form-control"
+                           placeholder="{{ __('Enter your e-mail') }}"
+                           id="wc_bis_email_{{ product_id }}"
+                           required
+                           aria-required="true" />
+                {% endif %}
+
+                <button type="submit"
+                        name="wc_bis_register"
+                        class="btn btn-primary flex-shrink-0">
+                    <i class="bi bi-bell me-1" aria-hidden="true"></i>
+                    {{ __('Notify me') }}
+                </button>
+            </div>
+
+            {% if show_checkbox %}
+                <div class="form-check">
+                    <input type="checkbox"
+                           class="form-check-input"
+                           name="wc_bis_opt_in"
+                           id="wc_bis_opt_in_{{ product_id }}" />
+                    <label class="form-check-label small" for="wc_bis_opt_in_{{ product_id }}">
+                        {{ wc_replace_policy_page_link_placeholders(wc_get_privacy_policy_text('registration'))|wp_kses_post }}
+                    </label>
+                </div>
+            {% endif %}
+
+            {{ wp_nonce_field('wc_bis_signup', 'wc_bis_nonce') }}
+            <input type="hidden" name="wc_bis_product_id" value="{{ product_id }}" />
+        </form>
+    </div>
+</div>