Skip to main content

Product Grid Sections

Product Grid sections display your WooCommerce products anywhere on your site — featured products on the homepage, a category showcase on a landing page, bestsellers under a hero. This guide covers what the section shows, how to filter and order products, and how it differs from your WooCommerce shop pages.

What Are Product Grid Sections?​

A Product Grid is a standard Promptless section — eyebrow, heading, and intro content up top; outro and buttons below — with a grid of live WooCommerce product cards in the middle. Each card pulls directly from your product catalog: featured image, title, and optionally price, star rating, sale badge, and an add-to-cart button.

WooCommerce must be installed and active. Without it, the section type isn't available — there's no product data to show.

Product Grids are for merchandising inside your marketing pages, not for replacing your shop:

  • Homepage features — "Bestsellers" or "New arrivals" between your hero and your story
  • Category landing pages — a curated grid above long-form content that sells the category
  • Campaign pages — the three products a promotion is about, nothing else
  • Cross-sells in content — products relevant to a guide or comparison page

Your WooCommerce shop, category, and product pages keep doing catalog duty; Product Grids let individual products appear where your persuasion happens.

Choosing What to Show​

Category filter — Show the whole catalog or limit the grid to one product category. One grid, one category is the clean pattern; for multiple categories, use multiple grids with their own headings.

Products per page — How many products render (up to 100, default 6). Small curated numbers (3, 6, 9) look deliberate; large numbers belong on shop pages where visitors expect to browse.

Ordering — Sort by date, title, price, or menu order, ascending or descending. "Newest first" suits new-arrival grids; menu order gives you hand-curated control via WooCommerce's product sorting.

Card Display Options​

Each element of the product card toggles independently:

  • Price — on for anything shoppable; off when the grid is editorial ("our lineup") rather than transactional
  • Star rating — on when you have reviews worth showing; a row of empty stars is worse than no stars
  • Add-to-cart button — on for impulse-priced products; off for considered purchases where the card should lead to the product page instead
  • Sale badge — flags discounted products automatically

Image aspect ratio and styling controls match the rest of the design system, so product cards sit visually alongside your Post Grid and Features cards instead of looking imported from another plugin. Global settings — corner radius, card style, buttons, dark mode, smart colors — all apply.

Product Grid vs. Post Grid​

They're siblings with different sources: Post Grid shows posts and custom post types (with filtering, pagination, and display styles built for content); Product Grid shows WooCommerce products (with commerce affordances — price, cart, sale badges). If you're showcasing articles, events, or team-authored content, you want Post Grid. If money changes hands, you want Product Grid.

Design Tips​

  • Lead with your best imagery. Product photography quality dominates everything else in a grid. Consistent backgrounds and aspect ratios across products make even a default grid look designed.
  • Write the heading as a merchandising statement. "Bestsellers this month" beats "Products." The section's eyebrow/heading/content fields exist so the grid arrives with context.
  • Use the outro button for the catalog. A "Shop all" button below the grid catches visitors the curated selection didn't convert — without cluttering the grid itself.

Connector Support​

Product Grids deploy through the Promptless Connector like any other section. If WooCommerce isn't active on the site, the Connector reports that clearly instead of deploying a broken section.