Skip to content

Fix product grids with 2, 4, 5 or 6 columns dropping a column - #36

Merged
jasperf merged 1 commit into
mainfrom
fix/product-grid-columns-4
Oct 3, 2026
Merged

jasperf merged 1 commit into
mainfrom
fix/product-grid-columns-4

Conversation

@jasperf

@jasperf jasperf commented Oct 3, 2026

Copy link
Copy Markdown
Contributor

Problem

assets/css/woocommerce.css replaces the gap on woocommerce/product-template and rewrites the grid track formula to match, but only for columns-3 (the comment says it is the only variant the theme's own templates use). Every other columns-N keeps WooCommerce's formula, which assumes WooCommerce's own 20px gap. With the theme's wider gap each track comes out wider than 1/N of the row and auto-fill fits one column fewer.

Found while building store sections for Aludra: a product collection set to four columns with four products rendered 3 + 1.

Fix

Add the matching rule for columns-2, -4, -5 and -6, same shape as the existing columns-3 rule. N columns share N - 1 gaps, so each track gives up (N - 1) / N of one gap. The 150px floor is the block's own and still folds the grid to two columns on a phone. The theme's templates are all three-column and are unaffected. Version 1.18.4.

Testing

On the Aviendha demo subsite with a four-product collection at columns-4:

  • Desktop: four products across (274px each); before, 3 + 1.
  • Mobile (390px): two columns (157px each).
  • /shop/ archive (three columns): unchanged.

CSS only; no templates or patterns changed.

@jasperf
jasperf merged commit 9b90a77 into main Oct 3, 2026
2 checks passed
@jasperf
jasperf deleted the fix/product-grid-columns-4 branch October 3, 2026 08:51
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant