` wrappers and Bootstrap `collapse` divs; level indentation via inline `padding-left`
+- `assets/css/wc-bootstrap.css` — Replaced primary-colored active background with subtle tertiary background, left accent border, and semibold text; removed unused `.category-tree-link` rules
+- `style.css` — Version bump 0.1.7 → 0.1.8
+
### 2026-03-29 — v0.1.7 Add Product Category Tree Sidebar
**Scope:** Added a hierarchical product category tree sidebar to archive/shop and single product pages, with collapsible sub-levels up to 3 levels deep.
diff --git a/assets/css/wc-bootstrap.css b/assets/css/wc-bootstrap.css
index 48b5b4f..bff3595 100644
--- a/assets/css/wc-bootstrap.css
+++ b/assets/css/wc-bootstrap.css
@@ -648,6 +648,7 @@ header.sticky-top.is-stuck {
/* ==========================================================================
Category Tree Sidebar
Hierarchical product category navigation with collapsible sub-levels.
+ Uses Bootstrap list-group-item-action with subtle active styling.
========================================================================== */
.category-tree {
@@ -658,24 +659,17 @@ header.sticky-top.is-stuck {
background-color: transparent;
}
-.category-tree-link {
- color: var(--bs-body-color);
- transition: background-color 0.15s ease, color 0.15s ease;
-}
-
-.category-tree-link:hover {
+/* Subtle active state: fw-semibold + left accent border instead of
+ full primary background, keeping the look understated. */
+.category-tree .list-group-item.active {
background-color: var(--bs-tertiary-bg);
color: var(--bs-body-color);
+ border-left: 3px solid var(--bs-primary);
+ font-weight: 600;
}
-.category-tree-link.active {
- background-color: var(--bs-primary);
- color: #fff;
-}
-
-.category-tree-link.active .badge {
- background-color: rgba(255, 255, 255, 0.2) !important;
- color: #fff !important;
+.category-tree .list-group-item.active small {
+ color: var(--bs-body-secondary) !important;
}
/* Rotate chevron icon when collapsed/expanded */
@@ -686,8 +680,3 @@ header.sticky-top.is-stuck {
.category-tree-toggle[aria-expanded="false"] .bi {
transform: rotate(-90deg);
}
-
-/* Nested list indentation */
-.category-tree .list-group-flush .list-group-flush {
- padding-left: 0.75rem;
-}
diff --git a/style.css b/style.css
index d9e13de..95ebc11 100644
--- a/style.css
+++ b/style.css
@@ -7,7 +7,7 @@ Description: A Bootstrap 5 child theme for WP Bootstrap that overrides all WooCo
Requires at least: 6.7
Tested up to: 6.7
Requires PHP: 8.3
-Version: 0.1.7
+Version: 0.1.8
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Template: wp-bootstrap
diff --git a/templates/global/category-tree-node.html.twig b/templates/global/category-tree-node.html.twig
index 8295c5c..c1e76d1 100644
--- a/templates/global/category-tree-node.html.twig
+++ b/templates/global/category-tree-node.html.twig
@@ -1,8 +1,8 @@
{#
# Single Category Tree Node (recursive)
#
- # Renders one category with optional collapsible children.
- # Included recursively by category-tree.html.twig.
+ # Renders one category as a list-group-item-action link with optional
+ # collapsible nested list for children. Included recursively.
#
# Expected context:
# node - Category node from wc_bootstrap_get_category_tree()
@@ -12,22 +12,24 @@
# @since 0.1.7
#}
-
+{% set has_children = node.children is not empty %}
+{% set is_open = node.is_active or node.is_ancestor %}
+
+
- {% if node.children is not empty %}
-
+ {% if has_children %}
+
{% for child in node.children %}
{% include 'global/category-tree-node.html.twig' with { node: child, level: level + 1 } only %}
{% endfor %}
-
+
{% endif %}
-
+
diff --git a/templates/global/category-tree.html.twig b/templates/global/category-tree.html.twig
index 773a985..e99a18a 100644
--- a/templates/global/category-tree.html.twig
+++ b/templates/global/category-tree.html.twig
@@ -1,13 +1,13 @@
{#
# Product Category Tree (Bootstrap 5)
#
- # Renders a hierarchical product category navigation with collapsible
- # sub-levels, up to 3 levels deep. Uses Bootstrap 5 list-group and
- # collapse components for responsive tree navigation.
+ # Renders a hierarchical product category navigation using Bootstrap
+ # list-group with nested sub-lists and action links.
#
# Expected context:
- # categories - Hierarchical array from wc_bootstrap_get_category_tree()
- # shop_url - URL to the main shop page
+ # categories - Hierarchical array from wc_bootstrap_get_category_tree()
+ # shop_url - URL to the main shop page
+ # current_cat - Term ID of the currently viewed category (0 = shop page)
#
# @package WcBootstrap
# @since 0.1.7
@@ -19,16 +19,14 @@
{{ __('Categories', 'wc-bootstrap') }}
-