A Comprehensive Guide To Use WooCommerce Shortcodes

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.

4 Replies to “A Comprehensive Guide To Use WooCommerce Shortcodes”

Leave a Reply