Master WooCommerce Product Shortcode for Dynamic Product Displays

The world of e-commerce runs on flexibility. A successful online store must be able to change, adapt, and highlight specific products at a moment’s notice. While many store owners think this requires a developer, the truth is that a powerful, built-in tool in WooCommerce makes it easy: the WooCommerce product shortcode. This simple but versatile tool allows you to display products, create custom grids, and build dynamic pages without writing a single line of code.

This comprehensive guide will teach you how to master the [products] shortcode. You will learn to use its attributes to create stunning, custom product displays for any page, post, or widget area. Whether you are a beginner looking to add a few products to your homepage or an advanced user needing to build a complex, filterable landing page, this article is your complete reference.

The Fundamentals: Your Essential WooCommerce Shortcodes List

Before we dive into the [products] shortcode, let’s understand what shortcodes are and their role in WordPress. A shortcode is a small piece of code enclosed in square brackets, like [shortcode]. WordPress replaces it as a placeholder with dynamic content or functionality when the page is viewed. You can use shortcodes anywhere you can add text, including in the classic editor, Gutenberg blocks, and page builders like Elementor.

While our focus is on the [products] shortcode, WooCommerce comes with a complete WooCommerce shortcodes list for essential store pages. These shortcodes are usually placed on the pages WooCommerce creates automatically during setup:

• [woocommerce_cart] – Displays the cart page content.
• [woocommerce_checkout] – Shows the checkout form.
• [woocommerce_my_account] – Renders the customer’s account dashboard.
• [woocommerce_order_tracking] – Provides a form for customers to track their orders.

The [products] shortcode is the most versatile of them all. It is the key to displaying products on pages and posts other than the main shop page. Its basic structure is simply [products]. By itself, this shortcode will display a grid of your latest products. The real power, however, comes from its attributes.

Explore Further: How to Set Up a WP Shopping Cart for Seamless Online Sales

The Anatomy of the [products] Shortcode

The true flexibility of the WooCommerce product shortcode comes from its attributes. Attributes are parameters you add inside the square brackets to control what products are displayed and how they look. You can think of them as commands that give specific shortcode instructions.

Here is a quick look at the most common attributes you will use. This is your essential WooCommerce product shortcode list.

Attribute	Function	Possible Values
limit	Sets the number of products to display.	Any positive integer (e.g., 8, 12)
columns	Sets the number of columns in the grid.	1 to 6
orderby	Specifies how products are sorted.	date, title, id, popularity, rating, rand
order	Sets the sorting order.	ASC (Ascending) or DESC (Descending)
ids	Displays specific products by ID.	Comma-separated list of product IDs (e.g., "1,2,3")
skus	Displays specific products by SKU.	Comma-separated list of product SKUs (e.g., "hoodie-01,tee-02")
category	Filters by product category slug or ID.	Comma-separated list of category slugs (e.g., "clothing,accessories")
on_sale	Displays products that are currently on sale.	true
visibility	Filters by product visibility.	visible, catalog, search, featured
paginate	Enables pagination for a product list.	true
class	Adds a custom CSS class to the grid.	Any CSS class name (e.g., "my-custom-grid")

Remember always to use straight quotes (") around your attribute values. A common mistake is using curly quotes, which will break the shortcode.

Also Read: How to Fix WooCommerce Products Not Showing on Shop Page: Quick Solutions

Mastering Product Selection: Practical and Advanced Shortcode Use Cases

Now, look at real-world WooCommerce product shortcode examples and learn how to use them effectively. These examples help you create dynamic, custom product sections on any page.

Displaying Featured Products

The WooCommerce featured products shortcode is a great way to showcase your best-selling or promoted items on the homepage. You must first mark products as “featured” in the WooCommerce dashboard to use it. Go to “Products,” hover over an item, and click the star icon. The star will turn blue, indicating the product is featured.

Shortcode: [products visibility="featured"]

This shortcode displays all products you have marked as featured. You can combine it with other attributes to refine the display.

Example: Display 8 featured products in a 4-column grid, sorted randomly. [products visibility="featured" limit="8" columns="4" orderby="rand"]

Specific Products by ID or SKU

Sometimes you must display one or two specific products, perhaps in a blog post or landing page. This is where the WooCommerce product ID shortcode comes in handy. You can use the ids attribute with a comma-separated list of product IDs.

Shortcode: [products ids="12, 35, 78"]

You can also use product SKUs, which can be easier to remember.

Shortcode: [products skus="shirt-01, pants-02"]

How to find IDs and SKUs: In your WordPress dashboard, navigate to WooCommerce → Products. The product ID appears in a small column next to the product name. You can also hover over the product title to see the ID in the URL. The SKU is on the product’s edit page under the “Product data” section.

Filtering by Category

The WooCommerce product category shortcode is one of the most powerful attributes. It allows you to create sections dedicated to a specific product type, like a “New T-Shirts” section or an “Accessories” page.

Shortcode: [products category="t-shirts"]

To find a category’s slug, go to WooCommerce → Products → Categories. The slug is a URL-friendly name for the category.

Example: Display 9 products from the “hoodies” and “t-shirts” categories in 3 columns. [products category="hoodies, t-shirts" limit="9" columns="3"]

Displaying On-Sale and Best-Selling Products

Creating a dedicated page for sales is a great marketing strategy. You can easily do this with a shortcode.

Shortcode for On-Sale: [products on_sale="true"]

Similarly, you can showcase your top-performing products.

Shortcode for Best-Selling: [products best_selling="true"]

Combining Filters for Custom Displays

The real magic happens when you combine multiple attributes. This allows you to create precise and engaging product grids.

Example: Display the 12 most popular, on-sale products from the “clothing” category in 4 columns. [products category="clothing" on_sale="true" orderby="popularity" limit="12" columns="4"]

This detailed control allows you to create a unique shopping experience that keeps customers engaged.

Advanced Display Options: Pagination, Sorting, and Custom Styling

The WooCommerce product shortcode selects products and controls their appearance and behavior on a page.

Pagination for Large Product Lists

You need pagination for pages with many products to avoid long load times and a poor user experience. The paginate attribute handles this perfectly.

Shortcode: [products paginate="true" per_page="12"]

The per_page attribute works with paginate to specify how many items appear on each page. This is a crucial element of the WooCommerce product shortcode with pagination functionality.

Sorting and Ordering

You can dictate the order of your products using the orderby and order attributes.

• orderby="price": Sorts products by their price.
• orderby="rating": Sorts by average customer rating.
• orderby="popularity": Sorts by the number of purchases.
• orderby="rand": Shuffles the products randomly on each page load.

The order The attribute dictates the direction of the sort. order="ASC" for ascending (e.g., low to high price) and order="DESC" for descending (e.g., high to low price).

Example: Show 10 products sorted by highest rating first. [products limit="10" orderby="rating" order="DESC"]

Custom Styling with Classes

For designers or developers, the class attribute is a powerful tool for WooCommerce product shortcode customization. It lets you add a unique CSS class to the product grid’s wrapper. This allows you to apply custom styling to your shortcode output without affecting other product grids on your site.

Shortcode: [products class="hero-products"]

Then, in your custom CSS, you can target this class: .hero-products .product { background-color: #f5f5f5; border: 1px solid #ccc; }

Compatibility Tips

The WooCommerce product shortcode works with the classic editor, the Gutenberg block editor (using a dedicated “Shortcode” block), and most major page builders. It is also designed to be responsive, meaning it will adjust to different screen sizes. However, always test your shortcodes on desktop and mobile to ensure they display correctly.

Strategic Use Cases: Where and Why to Use Product Shortcodes

Knowing the syntax is one thing; using it strategically is another. Here are some ideas for improving your store using the WooCommerce product shortcode.

• Homepage: Create dedicated sections for “New Arrivals,” “Best Sellers,” and “On Sale” items to guide visitors to your most essential products immediately.

• Blog Posts: Embed a single product or a small product grid within a blog post. If you write a blog post about styling a new jacket, use a shortcode to display that specific jacket and other complementary products directly below the post.

• Category Landing Pages: Create custom landing pages for a specific category. You can add unique copy and then use a shortcode to display only the products from that category.

• Marketing Landing Pages: For a new campaign, you can create a landing page that features products with a specific tag or from a new collection, using a tailored WooCommerce product shortcode to drive conversions.

Read More: How to Add a Tip Option in WooCommerce Checkout Page

Troubleshooting and Optimization Best Practices

Even with a simple tool like a shortcode, issues can arise. Here’s how to solve common problems and ensure your site performs well.

• Check for Typos: A missing bracket, a typo in an attribute name, or incorrect quotes can cause the shortcode to display as plain text. Double-check your code.

• Find IDs and Slugs: Ensure you use the correct product IDs, SKUs, and category slugs. The easiest way to verify these is in the WordPress dashboard.

• Caching and Performance: Displaying too many products with a single shortcode can slow down your site. Use the limit and paginate attributes to control the number of products. Use a good caching plugin to speed up page load times.

• Advanced Needs: If you need dynamic filtering, AJAX pagination, or other complex features, you might need a dedicated plugin. Tools like WooCommerce Product Table or WooCommerce Product Filters can significantly extend the shortcode’s functionality.

Conclusion: Your Toolkit for Dynamic WooCommerce Product Displays

The WooCommerce product shortcode is a game-changer for store owners. It provides a simple yet powerful way to create dynamic, engaging, and highly customized product displays across your website. By mastering the [products] shortcode and its attributes, you can transform your static pages into compelling merchandising tools.

Start with the basics, like a featured product section on your homepage, and then experiment with more advanced combinations to build unique landing pages and strategically embed products in your blog content. This shortcode allows you to create a professional and user-friendly online store without touching any code. Bookmark this guide, and start building better product displays today!

FAQs About WooCommerce Product Shortcode