WooCommerce Shortcodes: The Complete Guide to Displaying Products & Managing Your Store

Store customization is built upon WooCommerce shortcodes, where the shop owner can add dynamic content, category display, cart management and checkout, without the need to write even one line of custom code. These are the potent tools that can enhance the way you design and operate your WooCommerce website, regardless of whether you are an experienced e-commerce merchant or you are opening your very first online shop.

In this definitive guide, we’ll explore every WooCommerce shortcode, its attributes, real-world implementation strategies, and troubleshooting solutions, everything you need to master shortcode-based store management.

What Are WooCommerce Shortcodes?

WooCommerce shortcodes are small snippets of code wrapped in square brackets (like [shortcode]) that you can insert into WordPress pages, posts, or widgets to display dynamic WooCommerce content and functionality. When WordPress renders a page, it recognizes these shortcodes, executes the underlying code, and displays the corresponding content or functionality.

For example, the simple shortcode [woocommerce_cart] displays your entire shopping cart page on any WordPress page without requiring theme modifications or custom coding.

Why Shortcodes Matter

WooCommerce shortcodes abstract away technical complexity, enabling non-technical store owners to:

• Display products in customizable grids and layouts.
• Create dedicated cart and checkout pages.
• Implement product filters and search functionality.
• Build dynamic product collections (featured, sale, recent, top-rated)
• Enable customer account management and order tracking
• Add product-specific elements anywhere on their site

While the Gutenberg block editor has introduced visual block alternatives to many shortcodes, shortcodes remain relevant because they offer:

• Maximum flexibility – Combine multiple shortcodes with different attributes on a single page
• Lightweight implementation – No plugin dependencies for built-in shortcodes
• Legacy compatibility – Existing customizations continue working across updates
• Precise control – Attributes enable granular customization without visual builders

How WooCommerce Shortcodes Work

Every WooCommerce shortcode consists of two components:

Primary Body – Defines the core action or content to display

[woocommerce_cart]
[products]
[add_to_cart]

Optional Attributes/Parameters – Customize behavior and appearance

[products limit="8" columns="4" category="hoodies" orderby="popularity"]

In this example:

• limit=”8″ controls how many products display
• columns=”4″ sets the grid layout to four columns
• category=”hoodies” filters to only show the hoodies category
• orderby=”popularity” sorts products by sales volume

Attribute Naming Conventions

The names of attributes are in lower case with underscores. The strings should be enclosed in quotations. There are several values which are separated by a comma:

[products category="hoodies,sweatshirts" tag="sale,clearance"]

With the Gutenberg Block Editor (Recommended for Modern WordPress)

1. Open the page or post where you want to add the shortcode
2. Click the (+) Add Block button in the toolbar
3. Search for “Shortcode” in the block search field
4. Select the Shortcode block when it appears
5. Paste your shortcode into the provided field (e.g., [woocommerce_cart])
6. Preview the page to see how it renders
7. Publish or update the page

Benefit: Gutenberg provides a live preview as you edit, showing exactly what your shortcode will display.

With the Classic Editor (WordPress Legacy)

1. Open the Classic Editor on your page or post
2. Position your cursor where the shortcode should appear
3. Type or paste the shortcode directly into the content area
4. Publish or update the page
5. View the published page to verify the shortcode displays correctly

In WordPress Widgets

1. Go to Appearance > Widgets in your WordPress dashboard
2. Locate the area where you want to add the shortcode (sidebar, footer, header)
3. Add a Text widget to that area (or “Custom HTML” block widget)
4. Paste your shortcode into the widget
5. Save changes

The shortcode will now display in that widget area across your entire site.

Complete WooCommerce Shortcode Reference

Page/Structure Shortcodes

These fundamental shortcodes create essential store pages:

[woocommerce_cart]

When to use: Your main shopping cart page template

Block alternative: Cart block (in block-based store editor)

Shows the complete checkout form, including payment, shipping, and billing fields.

[woocommerce_checkout]

Supported attributes:

• order_review – Show/hide order review section
• terms – Display terms and conditions checkbox
• privacy_policy – Show privacy policy acceptance
• login_form – Display login form for returning customers

Example with customization:

[woocommerce_checkout terms="true" privacy_policy="true"]

When to use: Your dedicated checkout page

Block alternative: Checkout block

Displays the user account dashboard where customers manage addresses, view orders, update passwords, and manage account details.

[woocommerce_my_account]

When to use: Your “My Account” or customer dashboard page

Block alternative: Not available in block editor (as of 2026)

Shows an order tracking form where customers can find out the progress of their order without having to log in, and can input their order number and email address to view a tracking form.

[woocommerce_order_tracking]

When to use: Dedicated order tracking page or footer section

Block alternative: Not available

Shows WooCommerce messages (such as product added to cart messages) on other non-WooCommerce pages where they are not expected to display.

[shop_messages]

Use case: Display shop notifications on custom pages or blog posts

The Powerhouse Shortcode

The most flexible shortcode for displaying product grids. Supports extensive attributes for filtering, sorting, and layout control.

[products]

Common attributes:

Attribute	Values	Example
limit	Number of products	limit=”12″
columns	Grid columns (1-6)	columns=”4″
orderby	date, title, price, popularity, rating	orderby=”popularity”
order	ASC, DESC	order=”DESC”
category	Category slug/ID	category=”hoodies”
tag	Product tag	tag=”summer”
ids	Specific product IDs	ids=”1,2,3″
sku	Product SKUs	skus=”SKU001,SKU002″
attribute	Product attribute	attribute=”color”
terms	Attribute values	terms=”blue,red”

Real-world examples:

Display 8 hoodies from the hoodies category in 4 columns:

[products limit="8" columns="4" category="hoodies"]

Show products with specific IDs, sorted by newest first:

[products ids="101,102,103" orderby="date" order="DESC" columns="3"]

Display all blue products with attribute filtering:

[products columns="3" attribute="color" terms="blue" orderby="date"]

Product Category:

Displays products from a specific category in a grid layout. Similar to [products] but pre-filtered to a single category.

[product_category category="bags"]

Common attributes:

Attribute	Purpose	Example
category	Category slug	category=”bags”
per_page	Products per page	per_page=”12″
columns	Grid columns	columns=”4″
orderby	Sort order	orderby=”date”
order	ASC or DESC	order=”DESC”

Example:

[product_category category="bags" per_page="8" columns="4" orderby="popularity"]

Product Categories

Displays your product categories as a grid of category boxes rather than individual products.

[product_categories ids="27"]

Attributes:

Attribute	Purpose	Example
ids	Specific category IDs	ids=”1,2,3″
number	Number of categories	number=”6″
columns	Grid columns	columns=”4″
orderby	Sort by name or date	orderby=”name”
order	ASC or DESC	order=”ASC”
hide_empty	Hide categories with no products	hide_empty=”1″
parent	Only show parent categories	parent=”0″

Product Page

Displays a complete single product page (with full details, reviews, add-to-cart button) for a specific product anywhere on your site.

[product_page id="123"]

Or by SKU:

[product_page sku="SUMMER-TSHIRT-L"]

Use this to feature individual products on your homepage, landing pages, or special offer pages.

Featured Products

Automatically displays products you’ve marked as “Featured” in WooCommerce.

[featured_products per_page="6" columns="4"]

To mark products as featured:

1. Go to Products in your dashboard
2. Edit a product
3. Scroll to the Product Data section
4. Check the “Featured Product” checkbox
5. Update the product

Sale Products

Displays products currently on sale (products with a sale price lower than the regular price).

[sale_products per_page="12" columns="4" orderby="date" order="DESC"]

Attributes:

• per_page – Number of sale products to display
• columns – Grid layout columns
• orderby – Sort by date, title, price, or popularity
• order – ASC (ascending) or DESC (descending)

Displays the latest items to be added to your store, which is ideal in the “New Arrivals” sections.

[recent_products per_page="6" columns="3"]

Displays your top-performing products based on sales volume.

[best_selling_products per_page="8" columns="4"]

Shows products with the highest average customer ratings and reviews.

[top_rated_products per_page="8" columns="4" orderby="rating"]

Related Products

Displays products related to the current product being viewed. Use on custom product pages.

[related_products per_page="6" columns="3"]

Add to Cart Shortcodes:

Add to Cart

Creates an “Add to Cart” button for a specific product that can be placed anywhere on your site.

[add_to_cart id="123"]

Or by SKU:

[add_to_cart sku="PRODUCT-SKU"]

Use cases:

• Featured product sections on homepage
• Blog posts reviewing products
• Email marketing links
• Social media content
• Landing pages for specific products

Add to Cart URL:

Generates the direct URL to add a product to the cart (useful for email links or custom buttons).

[add_to_cart_url id="123"]

Or:

[add_to_cart_url sku="PRODUCT-SKU"]

Returns something like: https://yoursite.com/?add-to-cart=123

Cart Display Shortcodes

WooCommerce Cart Total

Displays the current shopping cart total.

[woocommerce_cart_total class="my-cart-total" before="Total: "]

Attributes:

• class – CSS class for styling
• before – Text to display before the total
• after – Text to display after the total

Woocommerce Cart Coupon:

Shows a coupon code input box for customers to apply discount codes.

[woocommerce_cart_coupon class="my-coupon-box" placeholder="Enter coupon code"]

Attributes:

• class – CSS class for styling
• placeholder – Input field placeholder text

woocommerce cart contents count

Displays the number of items currently in the shopping cart.

The number of items in your cart: [woocommerce_cart_contents_count]

Returns: “The number of items in your cart: 3”

Use on: Header carts, sidebar widgets, checkout pages

Search and Filter Shortcodes (Premium)

WooCommerce offers premium search and filtering features for $59/year:

woocommerce product search:

Live product search that updates results as customers type.

[woocommerce_product_search]

WooCommerce Product Filter

General product filtering interface with multiple filter types available:

• [woocommerce_product_filter] – Main filter container
• [woocommerce_product_filter_category] – Category filter
• [woocommerce_product_filter_price] – Price range filter
• [woocommerce_product_filter_attribute] – Product attribute filter
• [woocommerce_product_filter_tag] – Product tag filter

Advanced Shortcode Combinations

Combine multiple shortcodes on single pages to create sophisticated layouts:

Homepage Layout Example

<h2>Featured Products</h2>

[featured_products per_page="4" columns="4"]

<h2>On Sale Now</h2>

[sale_products per_page="8" columns="4"]

<h2>New Arrivals</h2>

[recent_products per_page="6" columns="3"]

<h2>Top Rated</h2>

[top_rated_products per_page="4" columns="4"]

Category Landing Page

[product_categories ids="1,2,3" columns="3" number="3"]

<h2>Category Products</h2>

[product_category category="shoes" per_page="12" columns="4"]

<h2>On Sale in This Category</h2>

[products limit="6" columns="3" category="shoes" on_sale="true"]

WooCommerce Shortcodes vs. Block Editor

Aspect	Shortcodes	Gutenberg Blocks
Ease of use	Text-based, requires remembering attributes	Visual drag-and-drop interface
Customization	Extensive attribute options	Visual controls (more limited)
Learning curve	Steeper initially	Gentler for beginners
Live preview	Requires page refresh or Elementor	Live preview in editor
Flexibility	Highly flexible	Constrained by a block design
Browser compatibility	Works everywhere	Requires modern editor support
Plugin support	Many third-party plugins extend	Newer blocks are still being developed
Nested content	Limited	Better supported in blocks

Recommendation: Simple implementations (a featured products section) should be done using blocks. Shortcodes are used when you want to have more specific control and to integrate several types of content on the same page.

Popular Third-Party Plugin Shortcodes

Beyond built-in WooCommerce shortcodes, popular plugins extend functionality:

Plugin	Shortcode	Function
WooCommerce Product Add-Ons	[product_addons]	Display product add-on options
WooCommerce Subscriptions	[woocommerce_subscription]	Show subscription plans
WooCommerce Bookings	[woocommerce_bookings]	Display booking options
WooCommerce Memberships	[woocommerce_memberships]	Show exclusive member content
WooCommerce Wishlist	[woocommerce_wishlist]	User wishlist management
WooCommerce Gift Cards	[woo_gift_cards]	Gift card purchase interface

WooCommerce Shortcode Attributes Reference

Product Display Attributes

limit – Number of products (default: -1 for all)

[products limit="12"]

columns – Grid layout columns (1-6, default: 3)

[products columns="4"]

orderby – Sort products:

• date – Newest first
• title – Alphabetical
• price – Lowest price first
• popularity – Most sold
• rating – Highest rated
• rand – Random order

[products orderby="popularity"]

Order – Sort direction:

• ASC – Ascending
• DESC – Descending

[products order="DESC"]

Category – Filter by category slug:

[products category="electronics"]

For multiple categories:

[products category="electronics,accessories" cat_operator="AND"]

Use cat_operator=”OR” to show products from either category.

Tag – Filter by product tag:

[products tag="summer"]

Multiple tags:

[products tag="summer,sale" tag_operator="OR"]

IDs – Display specific product IDs:

[products ids="101,105,110"]

skus – Display by SKU:

[products skus="SKU001,SKU002,SKU003"]

Attribute – Filter by product attribute:

[products attribute="color" terms="blue"]

Multiple attribute values:

[products attribute="color" terms="blue,red" terms_operator="OR"]

Troubleshooting WooCommerce Shortcodes

Shortcode Not Displaying

Cause: Missing or incorrect square brackets

Solution: Ensure shortcodes use square brackets: [products], not <products> or {products}

Shortcode will not display Error

Cause: Incorrect attribute formatting

Solutions:

• Use quotation marks around all values: [products limit=”6″]
• Use lowercase attribute names: orderby, not OrderBy
• Separate attributes with spaces: [products limit=”6″ columns=”3″]

Shortcode Appears as Text Instead of Displaying Content

Causes:

1. Shortcode block not used in Gutenberg (using text block instead)
2. <pre> tags wrapping the shortcode
3. Plugin or theme conflict

Solutions:

1. Use the proper “Shortcode” block in the Gutenberg editor
2. Remove any <pre> HTML tags around shortcodes
3. Disable plugins one by one to identify conflicts

WooCommerce Elements Not Showing (Style Issues)

Cause: Custom CSS hides WooCommerce elements

Solution: Check custom CSS files for rules like:

.woocommerce ul.products { display: none; }

Remove or modify conflicting CSS rules.

Shortcodes Work on Some Pages But Not Others

Cause: Conditional PHP functions or page-specific hooks

Solution:

1. Switch to the default WordPress theme (like Twenty Twenty-Three)
2. If shortcodes work with the default theme, the issue is theme-related
3. Contact the theme developer for compatibility

Third-Party Shortcodes Not Working

Cause: Plugin not activated or PHP version incompatible

Solutions:

1. Verify the plugin is active in the Plugins page
2. Check PHP version compatibility (go to Tools > Site Health)
3. Ensure the plugin is updated to the latest version
4. Look for conflicting plugins by deactivating all except WooCommerce

Best Practices for Using WooCommerce Shortcodes

1. Use descriptive page titles

Name cart page “Shopping Cart”, not “Cart”, to help with SEO and user navigation.

2. Test before publishing

Always preview shortcodes before publishing pages to ensure correct display and functionality.

3. Combine complementary shortcodes

Create rich pages with multiple related shortcodes:

• Homepage: Featured + Sale + Recent products
• Sale page: Sale products + Related categories
• Category page: Category products + Filters

4. Limit displayed products

Too many products on one page slows load time. Use limit and columns attributes strategically:

[products limit="12" columns="4"]  <!-- Better than limit="100" -->

5. Use appropriate category/tag filters

Filter products intentionally rather than displaying everything:

[products limit="20" category="mens-clothing" tag="summer"]

6. Add contextual text

Include descriptive headings and text around shortcodes for context:

<h2>Recently Added to Our Store</h2>
[recent_products per_page="6" columns="3"]
<p>Check out what's new! These products were just added to our collection.</p>

7. Organize checkout pages

Keep checkout pages clean and focused:

[woocommerce_checkout]

Don’t add product recommendations or excessive images that distract from checkout completion.

SEO Considerations for Shortcodes

Page Titles and Meta Descriptions

Even though shortcodes display products dynamically, write unique meta descriptions for pages featuring shortcodes:

Title: “Premium Leather Handbags | MyStore“

Description: “Browse our collection of handcrafted leather handbags. Free shipping on orders over $100.”

Structured Data

WooCommerce will add schema product markups automatically to all products which are presented using shortcodes, enhancing SEO and the presence of rich snippets.

URL Structure

Ensure pages containing product shortcodes use SEO-friendly URLs:

• ✅ yoursite.com/shop/mens-clothing/
• ❌ yoursite.com/?page_id=123

Page Speed

Shortcodes displaying many products can slow page load. Optimize by:

• Using a limit to control product count
• Implementing lazy loading
• Using a CDN for product images
• Enabling WordPress caching

Advanced Customization with Custom Shortcodes

To support advanced functionality which is not provided by shortcodes, developers have the ability to develop their own shortcodes with the WooCommerce API:

// Display current product stock status

function display_product_stock() {
    global $product;
    if( !is_product() ) return;
    return $product->get_stock_status();
}

add_shortcode( 'product_stock_status', 'display_product_stock' );

Then use: [product_stock_status]

Migration from Shortcodes to Blocks

As WooCommerce shifts toward block-based store editing, you can gradually transition:

1. New pages – Use Gutenberg blocks for new store pages
2. Existing pages – Keep shortcodes functional (still supported)
3. Gradual migration – Update pages when convenient
4. Backward compatibility – Shortcodes won’t break when blocks are added

The shortcode block in Gutenberg allows embedding legacy shortcodes while using modern editor features for everything else.

Conclusion

WooCommerce shortcodes are indispensable tools for building flexible, dynamic online stores without custom coding. From simple product displays to complex multi-shortcode layouts, these powerful snippets give you precise control over your store’s presentation and functionality.

Your WooCommerce store full potential awaits. Deploy these shortcodes strategically, test thoroughly, and watch your store become a finely-tuned sales machine.

About the writer

Hassan Tahir wrote this article, drawing on his experience to clarify WordPress concepts and enhance developer understanding. Through his work, he aims to help both beginners and professionals refine their skills and tackle WordPress projects with greater confidence.