magdev 9917105951 Implement Phase 3: single product page templates (Bootstrap 5)
Add 21 Twig template overrides for the single product page:

Product layout:
- product-image: gallery with thumbnail strip, img-fluid rounded
- title: h1 entry-title
- price: fs-3 fw-bold with sale del/ins markup
- short-description: lead text-body-secondary
- meta: dl row with SKU, categories, tags
- rating: Bootstrap Icon stars with half-star, review count link
- stock: badge (bg-success/bg-danger/bg-warning) per status
- sale-flash: badge bg-danger fs-6
- share: hook-only wrapper
- product-attributes: table-sm table-striped

Related/upsells:
- related, up-sells: section with product loop grid

Tabs:
- tabs: nav-tabs + tab-content with fade transitions
- description: tab-pane with prose content
- additional-information: tab-pane with attributes hook

Add to cart (4 product types + variation JS):
- simple: input-group quantity + btn-primary btn-lg
- variable: form-select per attribute + variation display
- grouped: table-borderless with quantity per child product
- external: btn-outline-primary with external link icon
- variation: Underscore.js script templates (Bootstrap-styled)
- variation-add-to-cart-button: quantity + submit with hidden fields

CSS additions: gallery thumbnail hover, variation selector spacing.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-02-28 10:28:13 +01:00

WooCommerce Bootstrap

A WordPress child theme of WP Bootstrap that overrides all WooCommerce plugin templates with Bootstrap 5 structures and styling.

Requirements

Installation

  1. Install and activate the parent theme wp-bootstrap
  2. Install and activate the woocommerce plugin
  3. Upload wc-bootstrap to wp-content/themes/
  4. Run composer install in the theme directory
  5. Activate the theme in WordPress Admin > Appearance > Themes

What This Theme Does

The WooCommerce plugin ships with its own Twig templates using custom CSS classes. This child theme overrides those templates to use Bootstrap 5 components, ensuring visual consistency with the WP Bootstrap parent theme.

Key Features

  • Bootstrap 5 markup for all plugin templates
  • Responsive design inheriting WP Bootstrap's grid system
  • Dark mode support via WP Bootstrap's theme toggle
  • Translation-ready

Development

Directory Structure

wc-bootstrap/
├── assets/css/          # Custom CSS overrides
├── assets/js/           # Custom JavaScript
├── inc/                 # PHP classes (PSR-4)
├── languages/           # Translation files
├── templates/           # Bootstrap 5 Twig template overrides
├── composer.json
├── functions.php
└── style.css

Building Translations

for po in languages/wc-bootstrap-*.po; do msgfmt -o "${po%.po}.mo" "$po"; done

Releases

Releases are automated via Gitea Actions. Push a tag matching vX.X.X to trigger a release build.

git tag -a v0.1.0 -m "Version 0.1.0 - Initial release"
git push origin v0.1.0

License

GPL-2.0-or-later

Author

Marco Grätsch - https://src.bundespruefstelle.ch/magdev

Description
WooCommerce Bootstrap 5 base theme
Readme 947 KiB
Languages
Twig 70.7%
PHP 19.5%
CSS 7.2%
JavaScript 1.1%
Dockerfile 0.9%
Other 0.6%