How to Use WooCommerce Shortcodes in Shop, Pages, Posts

WooCommerce, a WP plugin, comes with several shortcodes.

If you are a WordPress user, you are most likely familiar with ‘shortcodes’. They are small bits of codes used for pulling predefined functions or content into WordPress posts and pages. Before shortcodes were introduced, we always had to type long codes to achieve certain functionalities.

WooCommerce is our focus in this post. The shortcodes are useful for displaying products in a grid format, and placing ‘cart buttons’ on your site, modifying your product layout, etc.

WooCommerce, most likely, has a shortcode for whatever you need to do. Knowing which shortcodes are available and how to use them will give better control over your store.

That’s the purpose of this article!

Content:

How to use WooCommerce shortcodes
Benefits of the shortcodes
How to Display Pages using Shortcodes
Displaying products using shortcodes
Product Category Shortcodes
Shortcode to display add to cart buttons and cart URL
Shortcodes Plugin
Sorting products by custom meta fields
Conclusion

How to Use WooCommerce Shortcodes in WordPress

WooCommerce shortcodes are easy to use – even if you have never written a line of code before. Copying and pasting them into your WP text editor is all there is to do.

For example, you may need to display products on a WordPress page. To do this, you only need to copy the products shortcode (more on this later), open the page where you want to display the products (in your WP editor), then paste the code.

But, if you use the new Gutenberg WordPress editor, simply find the Shortcode block and paste your shortcode into it.

Benefits of WooCommerce Shortcodes

Running a WooCommerce store is time-consuming, even for an expert. To save time, shortcodes come in handy. They simplify complex tasks.

Shortcodes also improve accuracy, cutting down mistakes associated with writing long codes.

How to Display WooCommerce Pages using Shortcodes

Upon installation, WooCommerce creates four (4) pages – user account, order tracking, cart, and checkout pages. However, if you did not permit this process during installation, you may create the WooCommerce pages with shortcodes.

Just insert the shortcodes correctly. And you are good to go.

Shortcode	Page	Content on page
[woocommerce_cart]	Cart page	This displays a customer’s cart content, coupon codes, and other cart content
[woocommerce_checkout]	Checkout page	Displays details for checking out
[woocommerce_my_account]	User account page	Customers can view and update personal information, billing address, and order details.
[woocommerce_order_tracking]	Order tracking page	Displays order tracking form

You can also combine two shortcodes on a page. For instance, combining ‘my accounts’ shortcode and ‘order tracking’ shortcode on a page isn’t a bad idea.

Displaying Products using Shortcodes

To display all your products, use this WooCommerce shortcode:

 [products]

So simple. Your customers can scan through every single item on your site and make a good choice. Furthermore, you can streamline your displayed items by using a product attribute.

The following sections will show you all there is to know about attributes.

How to Limit the Number of Products on a page – WooCommerce Shortcode

You can limit the number of products displayed on your site by simply adding the ‘limit’ attribute to the [products] shortcode. Like this:

[products limit="4"]

With the above WooCommerce shortcode, only four products will appear. See the result in this screenshot.

But, what if you need to display just one specific product on a page? It’s possible.

Displaying a Single Product by ID or SKU

[product id="307"]

This WooCommerce shortcode allows you to display a single product by ID (replace ‘307’ with your product ID).

To find the IDs of the products, open your product’s menu.

The IDs of each product becomes visible when your cursor hovers around the product. See the illustration in the screenshot below.

To know more about WordPress page and post ID, read our tutorial on how to find WP IDs.

You can also use the SKU of the product instead of the ID. Like this:

[product sku="w001"]

This shortcode will display the item with the specified SKU.

SKU stands for Stock-Keeping Unit, a unique number for identifying an item.

To display multiple products, simply list their IDs or SKUs and separate each with a comma. Like this:

[products ids="1, 2, 3, 4, 5"]

[products skus="w001, w003, w005, w009"]

Note that product, ID, and SKU are in plural form. You can go a step further to specify the layout of your WooCommerce products.

How to modify the layout of product display – WooCommerce Shortcodes

To set the number of columns, use this shortcode.

[products ids="401,402,403,404,382,384" columns="6"]

Feel free to experiment with any number of columns you want. You can further specify the order in which the products are arranged using the ‘orderby’ attribute.

[products ids="1,4,6,7,9,14" columns="6" orderby="id"]

This shortcode displays the products based on their ids (orderby=”id”). Additionally, instead of using product IDs, you can display products based on:

Date – sorts your products by dates they were published.
Popularity – use this to arrange products according to their popularity.
Title – this attribute sorts products using their titles.
Rating – sorts products by their ratings.

To arrange them in ascending or descending, use the ‘order’ attribute.

[products ids="1,4,6,7,9,14" columns="6" orderby="date" order="Desc"]

Note: To display the products in ascending order, replace Desc (descending) with ASC. Like this:

[products ids="1,4,6,7,9,14" columns="6" orderby="date" order="asc"]

To insert page numbers like the screenshot below, add pagination=”true” to the [ products ] shortcode.

[products limit="4" columns="4" paginate="true"]

Other shortcodes for sorting products

[recent_products per_page="5"] – For displaying recent products

[best_selling_products per_page="5"] – For displaying best selling products

[top_rated_products per_page="5"] – For top rated products.

[featured_products per_page="10" columns="5"] – lists products you have set as ‘featured’.

[related_products per_page="12"] – displays related products.

[product_categories number="0" parent="0"] – to show top level categories.

WooCommerce Shortcode to display an individual product page

An individual product page shows everything a customer needs to know about a product. The shortcode to use in this case is:

[product_page]

You can use any of these two attributes – product ID or SKU.

For instance, you can display a product’s page by using:

[product_page id="397"]

[product_page sku="w004"]

WooCommerce Product Category Shortcodes

[product_category category="women"]

This shortcode will list products in the specified category. See the result of the shortcode in this screenshot. Only the set of products in that “women” category are displayed.

You can use the ‘orderby’ attribute in ‘category’ shortcodes to order items based on their ids, title, date, etc.

Woocommerce Shortcode to display add to cart buttons and cart URL

[add_to_cart=”10″]

Use this shortcode when you need to insert an ‘add to cart’ button for a product. “10” represents the product’s ID or SKU (insert yours).

To show the price of the product right next to the ‘add to cart’ button. Use this:

[add_to_cart=”68″ show_price=”true”]

WooCommerce Shortcodes Plugin

The WordPress repository hosts many valuable plugins. These include the WooCommerce Shortcodes plugin which lets you add shortcodes to your site easily. It works perfectly with WordPress 3.9 or higher and WooCommerce 2.2 or higher.

To use the plugin, login to your WordPress dashboard and go to “Plugin >> Add New”. Then, Search for ‘WooCommerce shortcodes’ and install.

After activation, you’ll find a shortcode drop-down button on your page and post editor. Click on it to reveal the available options.

Finally, select your preferred option.

For example, to list products based on their IDs or SKUs. Click the WooCommerce shortcode button and go to List >>Products by ID or SKU.

Fill in your product IDs or SKU, separating each with a comma. Next, click OK

The plugin then generates a shortcode to list your products by IDs. Finally, save and publish your page.

WooCommerce Product Table Shortcode

Plugins are also useful when you need to use a product table. Woocommerce does not have an in-built product table shortcode, so the WooCommerce product table plugin proves helpful.

Install the plugin and use the [product_table] shortcode to embed a table on your site. This shortcode is flexible and can be customized using different attributes.

Sorting products by custom meta fields

To sort products by custom meta fields, add the following lines of codes to your theme’s functions.php file.

Read our guide on how to edit your themes folder via FTP, to know how to do this.

add_filter( ‘woocommerce_shortcode_products_query’, ‘woocommerce_shortcode_products_orderby’ );
function woocommerce_shortcode_products_orderby( $args )
{
$standard_array = array(‘menu_order’,’title’,’date’,’rand’,’id’);
if( isset( $args[‘orderby’] ) && !in_array( $args[‘orderby’], $standard_array ) ) {
$args[‘meta_key’] = $args[‘orderby’];
$args[‘orderby’] = ‘meta_value_num’;
}
return $args;
}

Conclusion – WooCommerce Shortcodes

Shortcodes are exceptionally useful. They help WordPress users do technical things effortlessly. We also love the fact that they are flexible. Simply adding an attribute to the [products] (or other) shortcodes makes them more functional.

You may also use the WooCommerce shortcodes plugin to ease the process some more.

As you improve your store, you should also improve your traffic and SEO. And our quick site checkup can help!

To get a full report on your site’s SEO, Performance, and security in 60 seconds. Only two steps are required – click this link and type in your site’s URL.

WooCommerce Shortcodes – How To Use in Your Shop, Pages, and Posts