Commit 96d32422bb6 for woocommerce
commit 96d32422bb6aacd4bdbfa76ab388ae2245012a0a
Author: Albert Juhé Lluveras <contact@albertjuhe.com>
Date: Fri Jul 10 16:45:24 2026 +0200
Fix :where() selectors in Brands shortcode (#66497)
* Fix :where() selectors in Brands shortcode
* Add changelog
* Make sure right margin reset is applied
* Fix one last :where() selector not wrapping the whole :where()
* Move :before and :after outside :where()
diff --git a/plugins/woocommerce/changelog/fix-brand-thumbnails-where-selectors b/plugins/woocommerce/changelog/fix-brand-thumbnails-where-selectors
new file mode 100644
index 00000000000..9b3ffb11b06
--- /dev/null
+++ b/plugins/woocommerce/changelog/fix-brand-thumbnails-where-selectors
@@ -0,0 +1,4 @@
+Significance: patch
+Type: fix
+
+Fix :where() selectors in Brands shortcode
diff --git a/plugins/woocommerce/client/legacy/css/brands.scss b/plugins/woocommerce/client/legacy/css/brands.scss
index 143715ae5d4..88be0891c73 100644
--- a/plugins/woocommerce/client/legacy/css/brands.scss
+++ b/plugins/woocommerce/client/legacy/css/brands.scss
@@ -33,14 +33,14 @@ ul.brand-thumbnails,
}
ul.brand-thumbnails:before,
-:where(.brand-thumbnails-description):before {
+:where(.brand-thumbnails-description)::before {
clear: both;
content: "";
display: table;
}
ul.brand-thumbnails:after,
-:where(.brand-thumbnails-description):after {
+:where(.brand-thumbnails-description)::after {
clear: both;
content: "";
display: table;
@@ -59,13 +59,11 @@ ul.brand-thumbnails.fluid-columns li {
}
ul.brand-thumbnails:not(.fluid-columns) li.first,
-:where(.brand-thumbnails-description) li.first {
+:where(.brand-thumbnails-description li.first) {
clear: both;
}
-ul.brand-thumbnails:not(.fluid-columns) li.last,
-:where(.brand-thumbnails-description) li.last,
-:where(.brand-thumbnails-description.columns-1) li {
+ul.brand-thumbnails:not(.fluid-columns) li.last {
margin-right: 0;
}
@@ -123,7 +121,7 @@ ul.brand-thumbnails.columns-6 li {
}
/* Brand thumbnails description */
-:where(.brand-thumbnails-description) li {
+:where(.brand-thumbnails-description li) {
float: left;
margin: 0 2% 1em 0;
padding: 0;
@@ -131,12 +129,17 @@ ul.brand-thumbnails.columns-6 li {
text-align: center;
}
-:where(.brand-thumbnails-description) li .term-thumbnail img {
+:where(.brand-thumbnails-description li.last),
+:where(.brand-thumbnails-description.columns-1 li) {
+ margin-right: 0;
+}
+
+:where(.brand-thumbnails-description li .term-thumbnail img) {
width: 100%;
display: inline;
}
-:where(.brand-thumbnails-description) li .term-description {
+:where(.brand-thumbnails-description li .term-description) {
margin-top: 1em;
text-align: left;
}