WooCommerce shortcodes are like magic wands for your online store – simple snippets of code that pack powerful functionality.
Whether you want to display products beautifully, create custom layouts, or streamline your checkout process, shortcodes make it happen without having to learn complex code.
As of the latest data, WooCommerce powering over 8 million online stores worldwide and capturing nearly 39% of the eCommerce platform market share in 2024.
So, mastering WooCommerce shortcodes has become essential for WooCommerce store owners and developers.
In this comprehensive guide, we’ll explore everything you need to know about WooCommerce shortcodes – from basic implementation to advanced customization techniques.
You’ll learn how to transform your store’s appearance and enhance user experience with shortcodes.
By the end of this guide, you’ll know to confidently use shortcodes to create the exact store layout and functionality you imagine.
Whether you’re a store owner looking to make quick customizations or a developer seeking to extend WooCommerce’s capabilities, this guide will serve as your go-to resource for leveraging the full power of WooCommerce shortcodes.
What Are WooCommerce Shortcodes and Why Should You Use Them? #
WooCommerce shortcodes are snippets of code enclosed in square brackets (e.g., [woocommerce_cart]) that allow you to display store elements anywhere on your WooCommerce site.
The core WooCommerce plugin comes with many built-in shortcodes that can help customize your store’s appearance and functionality.
These shortcodes provide a flexible way to add WooCommerce features to any page or post without requiring technical expertise or touching any PHP code.
Shortcodes help bridge the gap between basic and advanced store customization, from showcasing products to creating custom checkout experiences.
Benefits of Using Shortcodes, Basic Syntax, and Structure #
WooCommerce shortcodes offer a simple, efficient way to customize your store without the need for advanced coding.
The basic syntax of a shortcode is simple, consisting of text enclosed in square brackets (e.g., [products] or [woocommerce_cart]). These shortcodes allow you to display dynamic content such as product listings or shopping carts.
Using shortcodes in WooCommerce, you can quickly add these elements to your pages, posts, and widgets, simplifying your workflow and saving time.
Additionally, shortcodes are highly customizable with parameters (Also known as attributes), allowing you to adjust their parameters to meet your specific design and functionality needs, all while enhancing user experience.
Recommended Blogs for You:
👉 How to Build an eCommerce Website from Scratch
👉 How to Start an Online Apparel Business in 2024
👉 What are Upselling and Cross-Selling? A Simple Guide to Increasing Your Average Order Value
👉 9 Ways to Encourage Returning Customers for Sustainable Business Growth
Essential WooCommerce Shortcodes for Store Pages #
There are several WooCommerce shortcodes that every store owner should know to enhance their site’s functionality and improve the shopping experience.
Some of the most popular and useful WooCommerce shortcodes include:
- [woocommerce_cart]: Displays the shopping cart page, allowing customers to view their selected items and proceed to checkout.
- [woocommerce_checkout]: Shows the checkout page, where customers can fill in their billing, shipping, and payment details to complete their purchase.
- [woocommerce_my_account]: Displays the user account page, enabling customers to manage their personal information, track orders, and update their preferences.
- [products]: Displays a grid or list of products, which can be filtered by category, tag, or other attributes, making it easy to showcase products in an organized way.
- [product_page id=”123″]: Displays a specific product page by its ID, showing detailed information like price, description, and customer reviews.
List of Default WooCommerce Shortcodes #
The table below provides an overview of the shortcodes available in WooCommerce. Each item includes a brief description.
| Shortcode | Description |
| [woocommerce_cart] | Displays the cart page. |
| [woocommerce_checkout] | Displays the checkout page. |
| [woocommerce_my_account] | Displays the user account page. |
| [woocommerce_order_tracking] | Displays the order tracking form; has attributes. |
| [product_page] | Displays a full single product page by ID or SKU. |
| [products] | Displays products by specific parameters; has attributes. |
| [product_category] | Displays products in a specified category; has attributes. |
| [product_categories] | Displays product categories; has attributes. |
| [add_to_cart] | Displays an add to cart button for a product; has attributes. |
| [add_to_cart_url] | Gets the URL of an add-to-cart button for a product; has attributes. |
| [shop_messages] | Displays shop messages on non-WooCommerce posts or pages. |
WooCommerce Store Page Shortcodes #
WooCommerce page shortcodes are essential for displaying dynamic content like the cart, checkout, user accounts, and order tracking.
They simplify page management and enable customized layouts for a smooth shopping experience.
For instance, the [woocommerce_cart] shortcode shows the cart page, while [woocommerce_checkout] generates the checkout page.
Here’s a breakdown of some key WooCommerce page shortcodes:
[woocommerce_cart] #
The [woocommerce_cart] shortcode displays the cart page, which allows customers to review their selected products, adjust quantities, apply discount codes, and proceed to checkout.
This shortcode is invaluable for creating customized cart pages.
For example, [woocommerce_cart] will dynamically generate the cart content, with live updates based on customer actions, ensuring a smooth and interactive shopping experience.
[woocommerce_checkout] #
Use the [woocommerce_checkout] shortcode to display the checkout page, where customers enter their billing, shipping, and payment information to complete their purchases.
Example: [woocommerce_checkout] will automatically generate a fully functional checkout form, simplifying the process for customers.
This shortcode is vital for ensuring a smooth and efficient checkout experience, with real-time updates to order details and customer information.
[woocommerce_my_account] #
The [woocommerce_my_account] shortcode generates the user account page, enabling customers to log in, view order history, manage their addresses, and update their account details.
Example: [woocommerce_my_account] displays a user login form if the customer is not logged in.
It offers a secure, user-friendly way to manage personal data, promoting repeat business and building customer loyalty.
[woocommerce_order_tracking] #
The [woocommerce_order_tracking] shortcode displays an order tracking form, allowing customers to track their orders by entering the order ID and email address.
Example: [woocommerce_order_tracking] will generate a form where customers can quickly access the status of their orders.
This shortcode helps reduce customer inquiries and enhances the overall shopping experience by providing quick and easy access to order details.
These WooCommerce page shortcodes make it easy to customize your store’s pages and provide a seamless, user-friendly experience for customers at every stage of their journey.
WooCommerce Product Display Shortcodes #
Product display shortcodes in WooCommerce allow you to showcase your products in a variety of formats across your site.
These shortcodes offer flexibility and customization, enabling you to create dynamic, visually appealing product listings with minimal effort.
Whether you’re displaying a single product, featuring best-sellers, or showcasing discounted items, WooCommerce product shortcodes are the key to enhancing your store’s product pages.
Product shortcodes are also customizable, so you can customize their output using various parameters such as limit, columns, and orderby.
Here’s how you can use them:
Single Product Display #
To display a specific product, use the [product_page id=”123″] shortcode. This shortcode shows all the details of a product based on its ID, including the description, price, and reviews.
Example: [product_page id=”123″] will display the product with ID 123 on your page, showcasing its full information.
Multiple Products Display #
The [products] shortcode allows you to display multiple products on a page.
You can filter products by category, tag, or SKU, and control the layout.
For example, [products limit=”5″ columns=”3″ category=”face-wash”] will display 5 products from the “t-shirts” category in a 3-column grid.
This shortcode is perfect for creating category pages or highlighting featured collections.
Featured Products #
Use the [featured_products] shortcode to display products marked as featured in your store.
For instance, [featured_products per_page=”6″ columns=”3″] will show 6 featured products in a 3-column layout.
This shortcode is perfect for creating category pages or highlighting featured collections.
Sale Products #
The [sale_products] shortcode displays products that are currently on sale.
For example, use [sale_products per_page=”6″ columns=”3″] to show 6 sale products in a 3-column grid.
This shortcode is ideal for creating a dedicated sale section on your site.
Recent Products #
The [recent_products] shortcode displays products that were recently added to your store.
For example, [recent_products per_page=”4″ columns=”4″] will show 4 recently added products in a 4-column layout.
This shortcode helps keep your site fresh and up-to-date by showcasing the latest inventory.
Best-selling Products #
The [best_selling_products] shortcode showcases your most popular products.
Use it to build trust with new customers by promoting items that have been proven to sell well.
For example: [best_selling_products per_page=”5″ columns=”3″] will display the top 5 best-selling products in a 3-column format.
Top-rated Products #
The [top_rated_products] shortcode highlights your highest-rated products based on customer reviews.
For example, [top_rated_products per_page=”4″ columns=”4″] will display the top 4 products with the highest ratings in a 4-column layout.
This is a great way to guide customers towards products they are likely to love.
Related Products #
The [related_products] shortcode is used to show products similar to the one a customer is currently viewing.
Example: [related_products per_page=”3″ columns=”3″] will display 3 related products beneath the current product.
This shortcode is perfect for cross-selling and increasing average order value.
Product Category Display Shortcodes #
The [product_categories] shortcode lets you display product categories on any page.
For example, [product_categories number=”8″ columns=”3″ orderby=”name” order=”ASC”] will display 8 product categories in a 4-column grid, sorted alphabetically.
You can customize the output with parameters like number, orderby, and columns, giving you full control over how your categories are displayed.
How to Add a Shortcode in WooCommerce #
Adding WooCommerce shortcodes to your WordPress site is simple, whether you’re using the Gutenberg editor or the classic editor. Here’s a step-by-step guide to inserting shortcodes in both methods:
Using the Shortcode Block in the Gutenberg Editor (Method 1) #
Open the Page or Post: In your WordPress dashboard, navigate to the page or post where you want to insert the shortcode.
Add a Shortcode Block: Click the “+” button to add a new block.
Insert the Shortcode: Select the Shortcode block, and it will appear in your editor.
Paste the desired WooCommerce shortcode (e.g., [woocommerce_cart]) inside the block.
Save the Page: After inserting the shortcode, click “Update” or “Publish” to save your changes.
Using the Classic Editor (Method 2) #
Open the Post or Page: Navigate to the page or post where you’d like to display the WooCommerce shortcode.
Insert the Shortcode: In the classic editor, place your cursor in the content area where you want the shortcode to appear.
Simply type or paste the WooCommerce shortcode (e.g., [add_to_cart id=”99″]) directly into the content editor.
Save Your Changes: Once you’ve added the shortcode, click “Update” or “Publish” to save the changes to your page or post.
How to Troubleshoot WooCommerce Shortcodes #
When troubleshooting WooCommerce shortcodes, the first step is to check for syntax errors.
Ensure there are no missing or extra brackets, as incorrect syntax can prevent shortcodes from rendering.
Next, ensure that WooCommerce and all related plugins are up-to-date, as outdated versions may cause compatibility issues.
If shortcodes are still not displaying properly, try deactivating other plugins and switching to a default theme like Storefront to check for conflicts.
Additionally, clear your browser cache to ensure you’re seeing the most recent changes. If the problem persists, verify that you’re using the shortcodes in supported areas like pages, posts, or widgets.
For continuous issues, consult WooCommerce documentation or reach out to a WooCommerce expert for personalized help.
Shortcode Customization Options: Parameters and Attributes #
WooCommerce shortcodes offer a wide range of parameters and attributes that provide flexibility in displaying products and content on your store.
These parameters allow you to control everything from the number of products shown to how they are arranged and sorted.
Common Parameters #
- Limit: Controls how many products are displayed. For example, [products limit=”6″] will show six products. It’s useful for limiting product display, especially on homepage sliders or promotional sections.
- Columns: Specifies how many columns of products you want to display. For example, [products columns=”3″] will arrange products in a three-column grid. This helps in organizing your product layout.
Customization Options #
- Class: Adds a custom CSS class to the product listing. For instance, [products class=”featured-products”] allows you to target these products with custom CSS styles, providing greater design flexibility.
- Visibility: Controls the visibility of products, allowing you to display only products that are visible in the catalog, search results, or both. Example: [products visibility=”visible”].
Sorting and Ordering #
- Orderby: Determines how products are sorted. You can choose from multiple options like title, date, id, popularity, rand (random), and rating. For example, [products orderby=”popularity”] sorts the products by their number of sales.
- Order: Works in conjunction with the orderby parameter, allowing you to specify whether the order is ascending (ASC) or descending (DESC). For example, [products orderby=”date” order=”DESC”] displays products starting with the most recent.
Pagination #
- Paginate: When dealing with large product sets, pagination helps split content into multiple pages. For example, [products limit=”9″ paginate=”true”] will display 9 products per page and add navigation controls for customers to browse further.
- Pages: Defines the number of pages in pagination. This can help in limiting the number of products loaded at once, improving site performance and user experience.
Layout Controls #
- Category: Displays products from a specific category. For example, [products category=”t-shirts”] shows only products from the “t-shirts” category.
- Tag: Filters products by tags. For example, [products tag=”summer”] will show products tagged as “summer.” Combining category and tag allows you to narrow down product selection.
- Attribute and Terms: These are used to filter products based on attributes like size, color, or material. For example, [products attribute=”color” terms=”red”] shows products with the color red. You can use terms_operator to refine your search to include or exclude certain attributes.
Alternative Way to Use Shortcodes: WooCommerce Blocks with ShopLentor #
While WooCommerce shortcodes are undeniably powerful, they often require users to manually define attributes and parameters to customize their functionality. This process can be time-consuming and demands a good understanding of the available options.
That’s where ShopLentor comes in – a game-changing WooCommerce builder plugin that offers 80+ specialized Gutenberg blocks that take the hassle out of customization and transform how you build your online store.
Think of it as shortcodes with a visual interface, making store customization as simple as drag-and-drop.
ShopLentor’s blocks cover every aspect of your WooCommerce store, from product displays to checkout optimization:
Product Display Blocks: Create stunning product showcases with advanced layouts like Product Grid, Product Curvy, Category Grid, and more.
Single Product Blocks: Customize product pages with dedicated blocks for product titles, descriptions, pricing, image galleries, and more.
Checkout Page Blocks: Build seamless checkout flows with specialized blocks for billing forms, payment methods, order reviews, and other essential elements.
Account Management: Create user-friendly account areas with login, registration, Dashboard blocks, and more.
What sets ShopLentor apart is its visual editing experience. Unlike shortcodes, where you need to learn and input specific attributes, ShopLentor blocks empower you to:
- Drag and Drop: Simply add blocks to your pages or posts and position them as desired.
- Customize Visually: Adjust settings in an intuitive interface, seeing real-time previews of your changes.
- Save Time: No need to memorize or experiment with shortcode attributes—just point, click, and customize.
Additionally, with features like Multi-Currency support, Popup Builder, and QR Code generation, you’re getting functionality that goes well beyond basic WooCommerce capabilities.
For store owners who prefer a more visual approach to customization, ShopLentor’s blocks offer the perfect balance of power and simplicity.
Why memorize shortcode parameters when you can simply point, click, and customize?
Explore 80+ WooCommerce Blocks
ShopLentor- WooCommerce Builder for Elementor & Gutenberg
A versatile page builder to build modern and excellent online stores with more than 100k+ Active Installations.
Frequently Asked Questions #
How do I add WooCommerce shortcodes to my pages? #
To add WooCommerce shortcodes to your pages, simply edit the page or post in WordPress. Use the Gutenberg block editor by adding a “Shortcode” block and pasting the shortcode, like [products].
Alternatively, if you’re using the Classic Editor, paste the shortcode directly into the content area where you want it to appear. Once saved, the shortcode will dynamically display the corresponding WooCommerce content on your page.
What’s the difference between [products] and [product_page] shortcodes? #
The [products] shortcode is used to display a list or grid of multiple products, allowing you to filter by category, tag, or SKU.
For example, [products limit=”5″ columns=”3″] displays five products in three columns.
On the other hand, the [product_page] shortcode displays a single product’s page by its ID or SKU.
For example, [product_page id=”123″] shows the product with ID 123, displaying detailed product information and the add-to-cart button.
Can I use multiple shortcodes on the same page? #
Yes, you can use multiple WooCommerce shortcodes on the same page. This allows you to display different types of content, such as product grids, shopping carts, and checkout forms, all within one page.
For example, you could combine [products] to show a grid of products and [woocommerce_cart] to display the cart.
Just ensure that each shortcode is placed in the correct area of your page and that the content does not conflict.
Why aren’t my WooCommerce shortcodes working? #
If WooCommerce shortcodes aren’t working, first check for syntax errors and ensure there are no missing or extra brackets. Make sure that WooCommerce and all plugins are up-to-date.
If issues persist, try disabling other plugins or switching to the default WordPress theme to rule out conflicts.
Additionally, ensure that shortcodes are placed in areas that support them, such as posts, pages, or widgets.
Where can I find all available WooCommerce shortcodes?
You can find a list of all available WooCommerce shortcodes in the official WooCommerce documentation or within your WordPress dashboard under WooCommerce > Settings > Shortcodes.
These resources provide detailed explanations of each shortcode, along with examples and usage guidelines, helping you leverage shortcodes to customize your store efficiently.
Conclusion #
In conclusion, WooCommerce shortcodes are powerful tools that make customizing your online store easy and efficient.
Whether you’re displaying products, managing the cart, or enhancing the user experience with advanced sorting and pagination, shortcodes offer endless possibilities for tailoring your store.
By mastering these shortcodes and their attributes, you can create a seamless shopping experience for your customers while maintaining full control over your store’s layout and functionality.
Experiment with different shortcodes today and elevate your WooCommerce store to the next level!