A shop is a comparison exercise. A single column makes the shopper remember what they saw two scrolls ago, which is the fastest way to lose a sale.
A grid puts products side by side so they can be compared at a glance, and it is the Product Listing block’s default layout.
Before You Start
- Edition: Pro — the Product Listing block needs Nexter Blocks Pro.
- Block to enable: Product Listing, switched on under Nexter > Blocks in your WordPress dashboard.
- WooCommerce active, with published products. The block reads your real catalogue, so an empty store renders an empty listing.
Steps
- Select your Product Listing block.
- Leave the layout on grid, which is the default.
- Set the columns for desktop, tablet and phone.
- Set how many products to show.
- Publish and check all three widths.
How It Behaves
The layout and the column widths are written onto each product card.
- Measured on a published page: the wrapper rendered
data-layout="grid"and each card rendered withtpgb-col-6 tpgb-col-lg-3 tpgb-col-md-4 tpgb-col-sm-6, which is four across on desktop, three on tablet and two on phone. - Columns are widths on a twelve-column grid, so 3 gives four across and 4 gives three across.
- Every card carries its own data. Measured on a published page, each product renders as an
articlewhose classes include its category (product_cat-...), its tags (product_tag-...), its stock state (instockoroutofstock) and whether it is on sale. - Card height follows the tallest card in the row, so long product names leave space under shorter ones.
- Measured with Nexter Blocks Pro deactivated: the block renders nothing at all — no wrapper, no products, no prices. This is a Pro-only block.
Limitations
- Pro only — measured with Nexter Blocks Pro deactivated, nothing renders.
- Too many columns makes products unshoppable. Four across on a phone leaves images too small to judge.
- Product images of different shapes look untidy in a grid, which is a catalogue problem rather than a block one. Consistent image ratios fix it.
- Long product names break the alignment by pushing one card taller than its neighbours.
- Set the phone value explicitly, or the desktop width is inherited.
Troubleshooting
I asked for four columns and got three
The number is a width on a twelve-column grid. Use 3 for four across, 4 for three across.
The cards are different heights
Product names and price formats vary. Shorten names, or accept it and keep the card padding even.
Images look inconsistent
Your product images have different aspect ratios. Standardise them in the media library.
It is unusable on mobile
Set the phone breakpoint to 12, which is one product across, or 6 for two.
