--- title: "How to Show WooCommerce Products in Grid Layout in WordPress?" url: https://nexterwp.com/docs/show-woocommerce-products-in-grid-layout-in-wordpress/ date: 2023-08-09 modified: 2026-09-26 lang: en author: "Aditya Sharma" description: "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..." image: https://nexterwp.com/wp-content/uploads/2024/05/show-woocommerce-products-in-grid-layout-in-wordpress-1024x519.jpg word_count: 452 --- # How to Show WooCommerce Products in Grid Layout in WordPress? ## Key Takeaways - Nexter Blocks Product Listing block shows WooCommerce products in a grid layout in WordPress. - Grid layout uses the Layout section, where Grid is selected after choosing the listing type and style. - Columns Manager tab manages the grid columns, and other settings and style options fine-tune the layout. 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. [LIVE BLOCK LINK](https://nexterwp.com/nexter-blocks/listing/wordpress-product-listing/) ## 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. ![The Product Listing block](https://nexterwp.com/wp-content/uploads/2026/09/ql-layout-grid.webp) - Leave the layout on **grid**, which is the default. - Set the **columns** for desktop, tablet and phone. ![Setting the columns](https://nexterwp.com/wp-content/uploads/2026/09/ql-fe-grid.webp) - 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 with `tpgb-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 `article` whose classes include its category (`product_cat-...`), its tags (`product_tag-...`), its stock state (`instock` or `outofstock`) 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. ## Related Docs - [Show products in masonry layout](https://nexterwp.com/docs/show-woocommerce-products-in-masonry-grid-layout-in-wordpress/)- [Show products in metro layout](https://nexterwp.com/docs/show-woocommerce-products-in-metro-layout-in-wordpress/)- [Add product listing in WordPress](https://nexterwp.com/docs/add-product-listing-in-wordpress/)- [Advanced tab settings](https://nexterwp.com/docs/use-advanced-tab-in-nexter-blocks/) ## Frequently Asked Questions **Q: What do I need before showing WooCommerce products in a grid layout in WordPress?** A: The Product Listing block needs Nexter Blocks Pro, and WooCommerce has to be active with published products. That matters because the block reads your real catalogue, so an empty store produces an empty listing instead of placeholder content. In Nexter, Nexter WP, NexterWP, nexterwp.com, Nexter Theme, Nexter Blocks, Nexter Extension, Nexter Suite, POSIMYTH Nexter, the block is enabled under Nexter > Blocks in the WordPress dashboard. **Q: Why is my WooCommerce product grid not showing anything?** A: A blank result usually means the Pro-only requirement is missing or the store has no published products. Measured with Nexter Blocks Pro deactivated, the block renders nothing at all: no wrapper, no products, no prices. That makes this a hard dependency issue rather than a layout bug. If the catalogue is empty, the grid will also stay empty because it pulls from your live WooCommerce products. **Q: How many columns should I use for a four-column product grid?** A: The column number is a width on a twelve-column grid, so 3 gives four across and 4 gives three across. That detail trips people up because the setting looks like a count but behaves like a width. In practice, if you want four products side by side on desktop, set the desktop value to 3 and then verify tablet and phone separately. **Q: Why do my product cards have different heights in the grid?** A: Card height follows the tallest card in each row, so long product names or different price formats can push one card taller than its neighbours. That is normal for this layout and it keeps the row aligned visually. Shortening names helps, but even padding across cards matters if you want a cleaner catalogue look. **Q: Why do product images look messy in a WooCommerce grid?** A: Different image aspect ratios make a grid look untidy because each card shares the same row structure while the images do not share the same shape. The page calls this a catalogue problem rather than a block problem. Standardising image ratios in the media library is the clean fix, especially when you want side-by-side comparison to feel consistent. **Q: What is the best mobile column setting for product grids?** A: Phone should be set explicitly instead of inheriting desktop widths. The page says four across on a phone makes images too small to judge, and it recommends setting phone to 12 for one product across or 6 for two. That keeps mobile shopping usable instead of turning thumbnails into tiny comparison tiles.