These small snippets of code are the key to unlocking a fully custom store layout, allowing you to build unique landing pages, create targeted “buy now” links, and display products anywhere on your site. This guide will walk you through every WooCommerce shortcode, from the basic page setup to advanced product displays and styling, giving you the power to build a better, more effective online store.

Key Takeaways

  • What Shortcodes Are: Simple, bracket-enclosed commands (e.g., [products]) that WordPress replaces with dynamic content, like a product grid or a cart.
  • Why They Matter: Shortcodes give you the freedom to place any store element (products, buttons, categories) on any page, post, or widget, breaking free from default page templates.
  • The Powerhouse Shortcode: The [products] shortcode is the most versatile. You can combine its attributes to show recent, featured, on-sale, or best-selling products from specific categories.
  • How to Use Them: In the WordPress block editor, use the dedicated “Shortcode” block. In the Classic Editor or Elementor, you can paste them directly into a Text Editor or use Elementor’s “Shortcode” widget for a live preview.
  • Shortcodes vs. Builders: Shortcodes offer great flexibility. However, a dedicated WooCommerce Builder, like the one in Elementor Pro, replaces most shortcodes with visual, drag-and-drop widgets, offering a more intuitive and code-free design experience.

What Are WooCommerce Shortcodes?

A WooCommerce shortcode is a small, reusable snippet of code, wrapped in square brackets, that performs a specific function. When WordPress renders a page, it finds these brackets, executes the code, and replaces the shortcode with the content it’s supposed to display.

For example, typing [woocommerce_cart] on a blank page tells WordPress, “Insert the full, functioning shopping cart here.”

This system allows you to build a custom homepage featuring your newest products, write a blog post with “Add to Cart” buttons for specific items, or even create a dedicated landing page for a single product category.

How to Add WooCommerce Shortcodes to Your Site

Before we explore the list, let’s cover the three primary ways to add shortcodes to your WordPress site.

1. In the Gutenberg (Block) Editor

This is the standard, modern WordPress editor and the easiest method.

  1. Edit the page or post where you want to add the shortcode.
  2. Click the plus icon (+) to add a new block.
  3. In the search bar, type “Shortcode” and select the Shortcode block.
  4. Paste your shortcode directly into the text field (e.g., [products limit=”4″ columns=”4″]).
  5. Click Update or Publish. You can preview the page to see your shortcode in action.

2. In the Classic Editor

If you’re using the older WordPress editor, the process is even more direct.

  1. Edit the page or post.
  2. In the main content editor (in either the “Visual” or “Text” tab), paste your shortcode on its own line.
  3. For best results, ensure it’s not formatted as code or preformatted text.
  4. Click Update or Publish.

3. In the Elementor Editor

As an Elementor expert, this is my preferred method for integrating shortcodes into a custom layout. While Elementor Pro replaces most of these with dedicated WooCommerce widgets, you can still use any shortcode with the free version.

  1. In the Elementor editor, search for the “Shortcode” widget in the left-hand panel.
  2. Drag the Shortcode widget onto your page.
  3. A settings field will appear in the panel. Paste your shortcode into this field.
  4. The major advantage here is that Elementor will often render the shortcode live in the editor, so you can see exactly what you’re building without constantly previewing the page.

The Core Page Shortcodes (Essential for Setup)

When you first install WooCommerce, it automatically creates several key pages for you (Cart, Checkout, My Account). These pages work by using one simple shortcode on each. If you ever need to recreate these pages, these are the shortcodes you’ll use.

Note: You should only have one of each of these shortcodes on your site. They generally don’t accept any attributes.

[woocommerce_cart]

  • What it does: Displays the full shopping cart content. It shows products added to the cart, quantity updaters, a coupon field, and the “Proceed to Checkout” button.
  • Where to use it: On your “Cart” page.

[woocommerce_checkout]

  • What it does: Displays the entire checkout process. This includes the billing and shipping address forms, order review, and payment gateway options.
  • Where to use it: On your “Checkout” page.

[woocommerce_my_account]

  • What it does: Displays the customer’s “My Account” dashboard. For logged-in users, it shows past orders, downloadable products, and address details. For logged-out users, it shows a login and registration form.
  • Where to use it: On your “My Account” page.

[woocommerce_order_tracking]

  • What it does: Renders a simple form where a customer can enter their order ID and billing email to see the status of an order without logging in.
  • Where to use it: This is optional. You can create a new page named “Order Tracking” and add this shortcode to it, then link to it from your site’s footer.

The [products] Shortcode: Your Store’s Powerhouse

This is the shortcode you will use most often. As of WooCommerce 3.2, the [products] shortcode replaced many older ones (like [featured_products], [sale_products], etc.). Now, you use one shortcode and modify it with attributes to get the exact display you want.

Base shortcode: [products]

By default, this will display a paginated grid of your standard products, just like your main shop page. But its true power comes from adding attributes.

Key [products] Attributes

You can mix and match these attributes to create highly specific queries.

  • limit: The number of products to display.
    • Example: [products limit=”3″] (shows 3 products)
  • columns: The number of columns in the grid.
    • Example: [products limit=”4″ columns=”4″] (shows 4 products in a single row)
  • orderby: How to sort the products.
    • date: Newest products first.
    • popularity: Based on number of sales.
    • rating: Based on average product rating.
    • title: Alphabetical order by title.
    • rand: Random order (great for homepages).
    • Example: [products limit=”3″ orderby=”popularity”]
  • order: The sort direction.
    • ASC: Ascending order.
    • DESC: Descending order (default).
  • paginate: Set to true to display pagination.
    • Example: [products limit=”12″ columns=”4″ paginate=”true”]

Special [products] Attributes (Boolean)

These attributes are used to display specific product groups. Set them to true to activate them.

  • on_sale: Shows only products that are currently on sale.
    • Example: [products limit=”4″ columns=”4″ on_sale=”true”]
  • best_selling: Shows your best-selling products (based on sales).
    • Example: [products limit=”3″ orderby=”popularity” best_selling=”true”]
  • top_rated: Shows only your top-rated products.
    • Example: [products limit=”3″ top_rated=”true”]
  • featured: Shows products you have marked as “Featured” (the star icon in the product list).
    • Example: [products limit=”8″ columns=”4″ featured=”true”]
  • recent: This is a an alias for orderby=”date” order=”DESC”.

Content [products] Attributes (for Filtering)

  • ids: Display specific products by their ID.
    • Example: [products ids=”25, 30, 15″]
  • skus: Display specific products by their SKU.
    • Example: [products skus=”logo-tee, hoodie-blue”]
  • category: Display products from a specific category (use the category slug).
    • Example: [products limit=”4″ category=”clothing”]
  • tag: Display products with a specific tag (use the tag slug).
  • visibility: Control which products are shown.
    • visible: (Default) Products visible in shop and search.
    • catalog: Products visible in shop, but not search.
    • search: Products visible in search, but not shop.
    • hidden: Products are hidden and only accessible via direct URL.
    • featured: Shows products marked as “Featured”.

Putting It All Together: [products] Recipes

  • Show 4 new arrivals in a single row: [products limit=”4″ columns=”4″ orderby=”date”]
  • Show a grid of 8 best-selling hoodies: [products limit=”8″ columns=”4″ best_selling=”true” category=”hoodies”]
  • Show a random selection of 3 on-sale items: [products limit=”3″ columns=”3″ on_sale=”true” orderby=”rand”]
  • Show two specific products side-by-side: [products ids=”42, 55″ columns=”2″]

Product Category Shortcodes

These shortcodes display your categories, not the products inside them. This is perfect for homepages or landing pages to help customers navigate your store.

[product_categories]

  • What it does: Displays all your product categories in a grid, usually with the category image, title, and product count.
  • Key Attributes:
    • number: The total number of categories to display.
    • columns: The number of columns for the grid (default is 4).
    • orderby: How to sort the categories (name, slug, id, menu_order).
    • order: ASC or DESC.
    • parent: Set to a category ID to show only its subcategories. Set to 0 to show only top-level categories.
    • ids: Specify which category IDs to display.
  • Example: To show 3 top-level categories: [product_categories number=”3″ columns=”3″ parent=”0″]

[product_category]

  • What it does: Displays the products from a single, specified category. This is essentially a shortcut for the [products] shortcode.
  • Key Attributes:
    • category: The category slug (required).
    • per_page: How many products to show.
    • columns: The number of columns.
    • orderby: date, popularity, etc.
  • Example: To show the 6 newest products from the “Music” category: [product_category category=”music” per_page=”6″ columns=”3″ orderby=”date”]

Action & Utility Shortcodes

These shortcodes handle specific actions or display smaller pieces of information. They are incredibly useful for custom landing pages and blog posts.

[add_to_cart]

  • What it does: Displays the price and “Add to Cart” button for a single product.
  • Key Attributes:
    • id: The product ID (required).
    • sku: The product SKU (you can use this instead of id).
    • show_price: Set to true (default) or false.
    • class: Add a custom CSS class for styling.
  • Example: [add_to_cart id=”42″]

This is perfect for a blog post reviewing a product. You can write your review and place this button right at the bottom.

[add_to_cart_url]

  • What it does: This shortcode is different. It doesn’t create a button, it just outputs the URL that, when clicked, will add the product to the cart.
  • Why this is useful: This is a secret weapon for marketing. You can use this URL in your own custom-designed buttons, in email marketing campaigns, or on social media.
  • Key Attributes:
    • id: The product ID (required).
    • sku: The product SKU.
  • Example: [add_to_cart_url id=”42″]
  • Pro Tip: You can also manually create these URLs. The format is: httpsyourstore.com/cart/?add-to-cart=42&quantity=1 This link will add product ID 42 to the cart and redirect the user to the cart page. This is extremely powerful for “Buy Now” links in emails.

[related_products]

  • What it does: Displays the “Related Products” for a specific item. This shortcode is only designed to work on a single product page.
  • Key Attributes:
    • limit: The number of products to show (default is 4).
    • columns: The number of columns.
  • Note: This shortcode queries the current product being viewed, so it won’t work on a regular page or blog post.

[shop_messages]

  • What it does: This is a simple but crucial utility. If you use an [add_to_cart] shortcode on a custom page, the customer won’t see the “Product has been added to your cart” notification. This shortcode displays that notification area.
  • How to use it: On any custom page where you have an “Add to Cart” button, add the [shop_messages] shortcode near the top of the page.

Product Filter Shortcodes (Premium)

You may see references to shortcodes like [woocommerce_product_filter], [woocommerce_product_filter_price], or [woocommerce_product_filter_tag].

Important: These are not part of the free WooCommerce plugin. They are part of a premium extension called WooCommerce Product Search. They are very powerful for building custom shop pages with live, AJAX-powered filtering, but they do require purchasing the extension.

Planning Your Store with Modern Tools

Building a complex store layout with shortcodes requires a clear plan. Before you start, you should map out your customer’s entire journey. A great way to do this is with a tool like the Elementor AI Site Planner, which can help you generate a complete sitemap and wireframe for your store. This ensures you know exactly which pages you need to build and where your shortcodes will go.

Watch: Get Started with Elementor’s AI Site Planner https://www.youtube.com/watch?v=cmx5_uThbrM&pp=0gcJCcYJAYcqIYzv 

Once you have your plan, you can use Elementor AI to help write the compelling copy and product descriptions that will surround your shortcode-driven product grids.

Watch: How to Use Elementor AI in Your Website https://www.youtube.com/watch?v=gvuy5vSKJMg 

Customizing Shortcodes: The Shortcode vs. Builder Debate

Shortcodes are a classic WordPress tool, but they represent a middle-ground in customization. As web creation expert Itamar Haim notes, “The strategic choice for a web creator often comes down to control vs. convenience. Hand-coding gives you total control but is slow. All-in-one builders are fast but can be restrictive. Shortcodes are the classic middle-ground, giving you flexible, modular control without needing to be a PHP developer. You get to decide where things go.”

This flexibility is their greatest strength. However, it also comes with a learning curve. You have to memorize attributes, and styling them requires CSS.

This is where a modern tool like the Elementor Pro WooCommerce Builder comes in. It replaces the need for shortcodes. Instead of [products category=”clothing”], you drag in a “Products” widget and select the category from a visual dropdown menu. Instead of [woocommerce_cart], you use the “Cart” widget and style every button and field visually.

Watch: How to Create a WooCommerce Website with Elementor https://www.youtube.com/watch?v=QKd7d6LueH4 

For professionals, the choice is clear:

  • Use Shortcodes for quick additions, use within blog posts, or when you’re on a budget with the free version of Elementor.
  • Use Elementor Pro when you need to design your entire store from the ground up—including the header, footer, product, and shop pages—without touching a line of code.

How to Style WooCommerce Shortcodes with CSS

By default, your shortcode’s output will be styled by your WordPress theme. But what if you want to make changes? The best way is with CSS.

You can add custom CSS in your WordPress “Appearance > Customize > Additional CSS” panel, or in Elementor’s “Advanced > Custom CSS” tab for a specific widget.

Method 1: Target Default WooCommerce Classes

WooCommerce wraps all its content in specific CSS classes.

To style the [products] grid: The grid is an unordered list (<ul>) with the class .products. Each item is a list item (<li>) with the class .product.

/* Change the product grid item border */

ul.products li.product {

  border: 1px solid #e0e0e0;

  border-radius: 8px;

}

/* Change the product title color */

ul.products li.product h3 {

  color: #555;

  font-size: 18px;

}

/* Style the sale badge */

ul.products li.product .onsale {

  background-color: #ff4500;

  border-radius: 50%;

}

To style the [add_to_cart] button: This button has the class .add_to_cart_button.

/* Customize the [add_to_cart] button */

.woocommerce a.add_to_cart_button {

  background-color: #007bff;

  color: #ffffff;

  border-radius: 5px;

  padding: 10px 15px;

}

/* Change the hover color */

.woocommerce a.add_to_cart_button:hover {

  background-color: #0056b3;

}

Method 2: Add Your Own Custom Class

This is a cleaner, more targeted approach. Many shortcodes, including [products] and [add_to_cart], accept a class attribute.

  1. In your shortcode, add the class attribute: [products limit=”3″ columns=”3″ class=”homepage-deals”]
  2. In your CSS, style that specific class:

/* Style only our new product grid */

.homepage-deals li.product {

  box-shadow: 0 4px 12px rgba(0,0,0,0.05);

  border: none;

}

.homepage-deals .woocommerce-loop-product__title {

  color: #2a2a2a;

}

This way, your styles only apply to that specific shortcode instance, not every product grid on your site.

Performance and Accessibility

Two final, critical points:

  1. Performance: Shortcodes are database queries. If you put [products limit=”20″ orderby=”popularity”] on your homepage, you’re making your server work hard on every page load. Ensure your site is on a high-performance platform, like Elementor Hosting, which is optimized for WordPress and WooCommerce. A powerful host will ensure your shortcode-driven pages load quickly.
    Watch: Meet Elementor Hosting https://www.youtube.com/watch?v=sK7KajMZcmA 
  2. Accessibility: Building custom pages means you’re responsible for their accessibility. Ensure your colors have proper contrast and that your pages are navigable. It’s a vital part of web creation. Tools like Ally by Elementor can help you scan your pages (including those built with shortcodes) to find and fix accessibility issues.
    Watch: Introducing Ally, the New Web Accessibility Plugin by Elementor https://www.youtube.com/watch?v=-2ig5D348vo 

Common Troubleshooting

  • Shortcode Shows as Plain Text (e.g., [products]) This is the most common issue. It means WordPress isn’t “seeing” the shortcode.
    • Fix: Make sure you haven’t wrapped it in <pre> or <code> tags. In the Classic Editor, check the “Text” tab to see if it’s surrounded by extra HTML. In Gutenberg, ensure you are using the “Shortcode” block, not a “Paragraph” or “Code” block.
  • Products Aren’t Showing Up
    • Fix: Double-check your attributes. The most common error is using a category name instead of a category slug. Also, check the product’s visibility settings in the “Edit Product” screen.
  • Styling (CSS) Isn’t Working
    • Fix: Your theme’s CSS is likely more specific and overriding yours. Try making your CSS selector more specific (e.g., .woocommerce ul.products li.product) or add !important as a last resort (e.g., background-color: #007bff !important;).

Frequently Asked Questions (FAQ)

1. What is the difference between a shortcode and a block? A shortcode is a text-based command (e.g., [products]). A block is a visual component in the Gutenberg editor. Many WooCommerce extensions now offer blocks (e.g., “Products by Category” block) which are more user-friendly as they provide visual controls instead of text attributes.

2. How do I find a product’s ID? Go to Products > All Products in your WordPress dashboard. Hover over the product you need, and the Product ID will appear directly below the product name.

3. How do I find a category’s slug? Go to Products > Categories. The “Slug” is listed in a column next to the category name. This is the text you must use for the category attribute.

4. Can I put a shortcode in a widget? Yes. In the classic widget editor (Appearance > Widgets), drag a “Text” widget into your sidebar or footer and paste the shortcode inside. In the new block-based widget editor, add a “Shortcode” block.

5. Can I use multiple [products] shortcodes on the same page? Absolutely. This is a great way to build a homepage: one shortcode for “New Arrivals,” another for “On Sale,” and a third for “Best Sellers,” all on one page.

6. Why did my [featured_products] shortcode break? WooCommerce updated its shortcodes in version 3.2. Older shortcodes like [featured_products], [sale_products], and [best_selling_products] are now deprecated. You must replace them with the new [products] shortcode, using attributes like featured=”true”, on_sale=”true”, or best_selling=”true”.

7. Can I create my own custom shortcode? Yes, but it requires PHP. You can add a custom function to your theme’s functions.php file using the add_shortcode() function to register your own shortcodes.

8. Do shortcodes slow down my site? They can. Every [products] shortcode is a new query to your database. A page with 5-6 complex shortcodes will load slower than a simple text page. This is why caching and high-quality hosting, like Elementor Hosting, are essential for a fast WooCommerce store.

9. Can I use shortcodes to build my entire store? You can, but it’s not the most efficient way. You’re better off using your theme’s default layouts or, for maximum control, using a full theme builder solution like Elementor Pro to visually design your templates.

10. Where can I find a list of all Elementor products? You can find all of Elementor’s solutions, from the AI Site Planner to the Image Optimizer and Elementor Hosting, on the main Elementor website.