WooCommerce Shortcodes

WooCommerce Shortcodes

WooCommerce 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 comes with several shortcodes. If you need to display products in a grid format or place ‘cart buttons’ on your site   – WooCommerce has a shortcode for it.

As a WooCommerce user, 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 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 certain page. To do this, you simply have to copy the products shortcode (more on this later), open the page you want it to appear in your WP editor, and paste the code.

And 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. It cuts down on 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. If you did not permit this process during installation, you may create the WooCommerce pages with shortcodes.

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 shortcode:

[products]

So simple. Your customers can scan through every single item on your site and make a good choice. However, 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 displayed on a page

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 shortcode, only four products will appear. See the result in this screenshot.

WooCommerce Shortcode to limit the number of products displayed

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

Displaying a single product by ID or SKU

[product id="307"]

 This shortcode lets you 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.

How to find a product's ID - WooCommerce Shortcodes

Note: To know more about WordPress page and post ID, read our resource on WP IDs.

You can also use the SKU of the product instead of 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. 

Shortcode to display a specific product - WooCommerce Shortcodes

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

To set the number of columns, use this shortcode.

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

How to modify the layout of product display

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”). 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"]

Store with page numbers - WooCommerce Shortcodes

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.

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"]

or

[product_page sku="w004"]

Shortcode to display product's page 

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. 

Shortcode to display a Product category

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

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” page. Search for ‘WooCommerce shortcodes’ and install.

How to install WooCommerce Shortcodes Plugin

After activation, you’ll find a shortcode button in your page and post editor. Click on it.

Using WooCommerce Shortcodes plugin

There are a number of available options in the drop-down. Select your preferred option.

using the WooCommerce Shortcodes Plugin

For example let’s get the shortcode for listing products by ID or SKU. To do this, click the woocommerce shortcode button and go to List >>Products by ID or SKU.

Listing products by SKU or ID

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

WooCommerce Shortcodes Plugin

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

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

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.

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

You can 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.

More Resources: