How to Display WooCommerce Products with Shortcodes and Blocks

One shortcode does most of it:

[products limit="8" columns="4" orderby="date" order="DESC"]

Everything else is an attribute on that. The legacy shortcodes still work, but they are all expressible here and this is the one still being developed.

The attributes worth knowing

Use slugs, not names, for category and tag. A category displayed as "Men's Shoes" is probably mens-shoes, and the wrong value produces an empty grid with no error.

Recipes

Featured products on the homepage:

[products limit="4" columns="4" visibility="featured"]

Everything in one category, paginated:

[products category="mens-shoes" limit="12" columns="3" paginate="true"]

Current sale items, cheapest first:

[products on_sale="true" limit="8" columns="4" orderby="price" order="ASC"]

Best sellers:

[products best_selling="true" limit="6" columns="3"]

A hand-picked selection:

[products ids="42,57,91" columns="3"]

A single product, with its add-to-cart form:

[product_page id="42"]

Just an add-to-cart button, for use inside body copy:

[add_to_cart id="42" style="" show_price="true"]

The store pages themselves also rely on shortcodes on classic setups: [woocommerce_cart], [woocommerce_checkout], [woocommerce_my_account]. If one of those pages is blank, the first thing to check is whether its shortcode is still in the page — a common casualty of a page rebuild, and one of the causes in WooCommerce products not showing.

The block equivalents

In the block editor, the same listings exist as blocks — products by category, best sellers, on sale, hand-picked, and a full products grid with filters. They offer the same options through the sidebar, with a live preview.

Use blocks when you are building a page visually and want to see the result. Use shortcodes when the listing has to live in a widget, a template, a page-builder text element, or content you want to move between sites without carrying block markup.

For stores using the Cart and Checkout blocks rather than the shortcode pages, be aware that some extensions only hook the classic versions — worth checking before switching, and a factor when coupons behave differently on one and not the other.

Styling the output

The grid uses WooCommerce's own classes, so theme styles apply automatically. To target one listing, add a class:

[products category="sale" columns="4" class="homepage-sale"]

.homepage-sale .woocommerce-loop-product__title {
    font-size: 1rem;
}

Put the CSS where it survives updates, per how to add custom CSS to WordPress.

Column counts are a grid setting, not a responsive one — the theme decides how columns collapse on mobile. Check the result at phone width, since four columns on desktop can become an unreadable two-across grid on a small screen.

Performance note

A product grid runs a query, and several grids on one page run several. On a large catalogue:

• avoid limit="-1", which loads the entire catalogue;
• prefer paginate="true" over enormous limits;
• be careful with orderby="rand", which is expensive and defeats caching;
• keep the number of separate grids on one page small.

Page caching absorbs most of this for anonymous visitors, but the homepage of a store with six product grids is still noticeably slower to generate — the wider method is in how to speed up a WordPress site.