A Comprehensive Guide To Use WooCommerce Shortcodes

WooCommerce comes with several shortcodes that can be used to add a various type of functionality to your post, pages, widget, sidebar, etc without any type to write a code. In this article, I made a complete list to cover the shortcodes included with WooCommerce and their usage so that new/advanced users can take full benefits from WooCommerce.

WooCommerce Shortcodes for Pages:

Pages Shortcodes

There are 4 Page shortcodes available in WooCommerce.

1. Cart: WooCommerce creates a Cart page for its shopping cart functionality. This is the cart shortcode:

[woocommerce_cart]

This shortcode is used to display cart content and the interface for coupon codes and other cart-related elements. There are no parameters for this shortcode.

Cart Shortcodes

2. Checkout: Check out page shows the checkout functionality for your customers. This is the Checkout pages:

[woocommerce_checkout]

There are no parameters available for it. It shows all the information which will be collected from a user during checkout such as billing info, shipping info, payment method etc.

Checkout Shortcodes

3. My Account: This shortcode displays the dashboard to the logged-in customers. This is the My Account pages:

[woocommerce_my_account]

In My Account Pages a customer can view their past orders, downloads, and update their personal details such as billing info, shipping info, account password.

My Account Shortcodes

4. Order Tracking: This shortcode will display the Order Tracking page.

[woocommerce_order_tracking]

You can combine My Account shortcode with Order Tracking will result in a better user experience as the user can check their order history and check the status of an order from the same page.Order tracking Shortcodes

WooCommerce Product Shortcodes:

Single Product

The Product shortcode shoes a single product by either SKU or product ID.

[product id=”99″ 

[product sku=”F00″

Multiple Products

This WooCommerce shortcode allows you to show multiple products by ID or SKU. Use this shortcode:

[products ids=”1, 2, 3, 4, 5″]

You can also use the following arguments: order=” “, columns=” “, orderby=” “.

This shortcode:

[products ids=”1, 2, 3″ orderby=”date” columns=”3″ order=”desc”],

will output six products in 3 columns ordered by date in descending order.

Product Categories

Product Categories shortcode will display the product categories that you have created in the Woocommerce product categories section.

Arguments:

  • number – Displays the number of products returned.
  • orderby – What to order the results by.
  • order – Order the results in asc or desc order.
  • columns –  How many columns to show the categories in.
  • hide_empty – Set to 1 to hide categories with no products.
  • parent – Set to 0 to only display top level categories
  • ids – Show certain categories

[product_categories ids=”22, 34, 44, 65, 55” columns=”3″ hide_empty=”1″ parent=”0″]

Product Category by Slug

This is similar to product categories but this allows you to add all your products within the defined category and can be adjusted with the per_page=”” and columns=”” parameters. Here is the shortcode:

[product_category category=”” per_page=”16″ columns=”3″ orderby=”date” order=”desc”]

Recent Products

You can use this WooCommerce shortcode to list a set of recent products.

Arguments:

  • per_page – How many products to show per page.
  • columns –  How many columns to show the products in.
  • orderby – What to order the results by.
  • order – Order the results in asc or desc order.

Shortcode:

[recent_products per_page=”12″ columns=”4″ orderby=”date” order=”asc”]

Featured Product

You can use this WooCommerce shortcode to display products that have been set as “featured” in WooCommerce.

Arguments:

  • per_page – how many products to show per page.
  • columns – The number of columns to put the products in.
  • orderby – You can order the results by title, date, etc.
  • order – Display the results ordered descending or ascending.

Shortcode:

[featured_products per_page=”12″ columns=”3″ orderby=”date” order=”asc”]

Sale Product

Sale products allow you to add products currently on sale.

Arguments:

  • per_page – How many products to show per page.
  • columns –  How many columns to show the products in.
  • orderby – What to order the results by.
  • order – Order the results in asc or desc order.

Shortcode:

[sale_products per_page=”12″ columns=”4″ orderby=”date” order=”desc”]

Best Selling Products

If you want to show your best selling product, you need to use this shortcode:

[best_selling_products per_page=”12″ columns=”4″ orderby=”date” order=”asc”]

Top Rated Product

If you use the reviews and ratings feature built into WooCommerce, you can use this shortcode for displaying your best products. Here is the shortcode:

[top_rated_products per_page=”12″ columns=”4″ orderby=”date” order=”asc”]

Related Product

This WooCommerce shortcode shows all of your top-rated products.You need to use this shortcode for it:

[related_products per_page=”12″]

Add to Cart

This shortcode allows you to show the price and add to cart button of a single product by ID. The shortcode is look like the following:

[add_to_cart id=“99”]

Add to Cart URL

This shortcode prints the URL on the add to cart button of a single product by ID. Here is the shortcode:

[add_to_cart_url id=“99”]

Product Attribute

This WooCommerce shortcode lists products by attributes.

[product_attribute attribute=”color” filter=”black”]

Product Search Field

WooCommerce product search allows you to insert live search and live filtering facilities inside pages and posts. The shortcode is following:

[woocommerce_product_search]

Live Product Filter Shortcode

You can customize the live product by using the following live product filter shortcodes:

[woocommerce_product_filter] — This will allow you to shows a live Product Search Filter.

[woocommerce_product_filter_attribute] — This will allow you to shows a live Product Attribute Filter.

[woocommerce_product_filter_category] — This will allow you to shows a live Product Category Filter.

[woocommerce_product_filter_price] — This will allow you to shows a live Product Price Filter.

[woocommerce_product_filter_tag] — This will allow you to shows a live Product Tag Filter.

Display notifications on non WooCommerce pages:

Sometimes you need to display notifications on certain pages other than the default WooCommerce pages. [shop_messages] will help you get this done.

When WooCommerce Shortcodes Are Not Working / Troubleshooting of Shortcodes:

Sometimes it may happen that you paste a shortcode correctly but it will display error. If you face this issue, you need to check your code and remove the <pre> and </pre> tags surrounding the shortcode:

Shortcodes troubleshooting

To remove this tags go to your text editor and remove it.

Related Articles: Shortcodes included with WooCommerce

Conclusion

That’s all. I hope you will encounter no issues while using these shortcodes on your WooCommerce Store and hopefully this tutorial will help you to customize your online store.

One thought on “A Comprehensive Guide To Use WooCommerce Shortcodes”

Leave a Reply