WooCommerce ShortCodes And Their Usage: An Actionable Guide Of 2019

WooCommerce ShortCodes And Their Usage: An Actionable Guide Of 2019

WooCommerce is a WordPress plugin that works to migrate a WordPress website into an e-commerce store. For your knowledge, Shortcodes is not a WooCommerce feature, instead, they come with WordPress. Fast forward, WooCommerce shortcodes lets you add different functionality to your pages, post, sidebar, widget, etc. without writing any code. For example, in www.wpglobalsupport.com we have added a revolutioner slider by using a shortcode.

Using WooCommerce product shortcodes users can make their e-commerce store amazing and give the burst sales to their visitors.

Bending towards the point, we will show you what is WooCommerce page shortcodes and how to add it? So, keep reading the article.

What is WooCommerce Shortcodes?

To put it briefly, Woocommerce shortcodes are small pieces of texts/codes written within square brackets. These codes are then placed in your Woocommerce pages and templates to show certain values from the database.

In other words, WooCommerce shop page shortcodes act like shortcuts that work for you to call a specific function in a post or page. This feature provides us an easy way to add special content almost anywhere on the website. It does not require so much of technical coding knowledge. Because of this, shortcodes are very popular and interesting to work on.

Let us consider an example, elaborated as follows;

Here, we will add a YouTube video to your page or post using shortcode. You just have to add the mentioned below YouTube shortcode to their HTML of your page;

[youtube-video url=”XURL”]

Thereafter, you can see, the YouTube video has added to your post or page which also help your WooCommerce setup to look better.

Types of WooCommerce shortcodes

There are various types of WooCommerce cart shortcodes that can be increased the functionality of your WooCommerce store;

1. Simple shortcodes

As the name suggests, simple shortcodes is the simplest form of shortcodes. This form includes only a shortcode within square brackets. You can see the below screenshot as an example;

woocommerce simple shortcodes

However, simple shortcodes can also be used to add an image gallery to a post or page. But, there is no way to specify which gallery to add.

2. Shortcodes with parameters

WooCommerce cart shortcodes can have parameters using that you can specify ‘settings’ for the function they are being used for. To sort the images within the gallery being embedded you can specify parameters.

[gallery order=”DESC” orderby=”post_date”]

See the mentioned above shortcode. It has the parameters named ‘order‘ and ‘orderby‘. ‘order‘ has ‘DESC‘ value and ‘orderby‘ has ‘post_date‘. Means, all the images within the gallery will be sorted in descending order according to the date they were posted.

3. Shortcodes with content

To add some additional functionality you can use shortcodes to ‘wrap’ around content. For example, using given below WooCommerce caption shortcode you can display a captioned image:

<img src=”www.wpglobalsupport.com/image.jpg/” />Content

With some parameters:

<img src=”www.wpglobalsupport.com/image.jpg/” />Content

How do WooCommerce shortcodes work?

Shortcodes in WooCommerce are just shortcuts to programmed functions, nothing else. They work to apply the functions while loading a web page.

Come to the main point of the article – No, doubt, a lot of WooCommerce shortcodes are available in the market to add different functionality to their different shop pages. But the question is how you can add them in your WooCommerce store pages. Let’s see;

How to add WooCommerce shop page shortcodes to Pages?

The task is quite easy, means, you can manually add any shortcode to your WooCommerce page. But note that, you may use these shortcodes just to create e-commerce related pages.

Let’s see an example, here we will create a checkout page by using a simple shortcode.

To create a checkout page, very first, you need to create a new page which works as the template for our WooCommerce checkout page.

Further on – To create a new page, open your site dashboard and go to the Pages>>Add New. Here we name the title of the page – Checkout.

Thereafter, paste the illustrated below shortcode to the visual editor of the page. You can see the below screenshot.

[woocommerce_checkout] 

woocommerce checkout

Now, publish the page and view the checkout. Mind it, if you have an empty cart so your checkout page will also be empty.

Alternatively, you can add WooCommerce shortcodes, by using WooCommerce shortcodes plugin. This is one of the best options. Therefore, we recommend, install the WooCommerce shortcode plugin and add all the shortcodes to your post or page.

Further on this WooCommerce shortcode plugin comes with a dropdown button in which all shortcodes are included. Use according to their needs. You don’t need to remember a single shortcode and their parameters.

Hence, open your dashboard and go to the Plugin>>Add New, here search the plugin ‘WooCommerce shortcodes by WooTheme’, next, install & activate it.

woocommerce shortocdes plugin

After the activation process, in the WordPress text editor, you will see a tiny dropdown button.

shortcodes plugin, woocommerce,

Now you have successfully added a plugin on your store. You can add any shortcodes as per your requirements.

Coming back to the point, let’s begin with WooCommerce Shortcodes and their usage.

WooCommerce ShortCodes

1. CART 

woocommerce shortcode , wordpress support

Shortcode: [woocommerce_cart]

For your knowledge, WooCommerce creates a cart page to boost its shopping cart functionality.

WooCommerce cart shortcode is used on the cart page that displays the cart content such as item details, shipping, taxes, etc. Not only this but, it also shows the interface for coupon codes and some other cart-related features.

Arguments: There is no one parameter or argument available for this shortcodes.  

2. Checkout

woocommerce checkout shortcode (1)

[Image source File: www.cloudways.com]

Shortcode: [woocommerce_checkout]

The WooCommerce checkout page gives the checkout functionality to your customers.

This particular shortcode is used for displaying the checkout process on the checkout page of your online store. 

In other words, we can say, WooCommerce checkout shortcode display all the checkout information – which a user collects during checkout like shipping info, billing info, payment method, etc. For this shortcode use the Full-Width page template.

Arguments: This shortcode does not accept any parameter.

3. Order Tracking Form

woocommerce shortcodes, wordpress

Shortcode: [woocommerce_order_tracking]

WooCommerce order tracking shortcode is used to display Order Tracking page. It also allows users to check the status of an order by entering the required details like order id, billing email, etc.

The best tweet about page shortcodes is – you can combine them to create a better page for the visitors of your WooCommerce store.

Let’s consider with the help of an example;

To combine My Account shortcode with Order Tracking shortcode will provide a better user experience. Doing this users can check their order status and history of an order from the same page.

Additionally, this order tracking form page is not created by default. This is an optional, according to requirements you can create manually that allows users to check the status of an order. However, the customer will have to enter their order details in order tracking form to check the order status.

Argument: It does not accept any argument/parameter.

Tip: Use the full-width page or Shop Sidebar template with this shortcode.

4. My Account

woocommerce my account shortcode

Shortcode: [woocommerce_my_account]

WooCommerce My Account shortcode displays ‘my account’ section featuring options for the customer to view its placed orders or update any of its personal information such as shipping info, billing info, and account password from the My Account page. The number of orders can be specified manually. 

Note that, with each & every page you can use combined shortcodes. For instance, you can combine a form page with Order Tracking [woocommerce_order_tracking] and My Account [woocommerce_my_account] on one page.

Argument: This WooCommerce shortcode accepts parameter;

array(
     'current_user' => ''
 )
[woocommerce_my_account]
Current user argument is automatically set using get_user_by( ‘id’, get_current_user_id() ).

Tip: By default, it’s set to 15 (use -1 to display all orders.)

Some Special WooCommerce Pages

Listed below shortcodes can be used to create custom shop pages such as featured products, top-rated products, best selling products, etc.

5. WooCommerce cart/Product price shortcode

Shortcode: [add_to_cart id=”19”]

WooCommerce cart and product price shortcode used to display the picture and prices of a product with ‘Add to Cart button‘. Using this shortcode the product has to be specified by its own ID and SKU.

Further on, as you will press the Cart/Price button, you have to enter your product ID and SKU. Once you entered, it will generate the shortcode as we have shown above –  [add_to_cart id=”19″ sku=”19″].

Let’s see an example;

Here in this example, we are adding a new page and shortcode for cart/price button. See the below screenshot;

Woocommerce shortcodes

Thereafter, as you click on the price/cart, you will see a pop-up on your screen, now add your ID that you want to display.

WooCommerce shortcode

Now press the Ok button, thereafter, it will generate a shortcode as shown in below screenshot;

Woocommerce cart price shortcode

Now press the publish button, thereafter, you will be able to see that your shortcode is successfully generated. See the below screenshot;

woocommerce cart or price shortcode

Now come back to the point!

6. Multiple Product shortcode

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

Using the above shortcode, you can also add multiple products similar to the previous example we have mentioned above. With this shortcode, you can also use the given below parameters or arguments;

order=” “, columns=” “, orderby=” “

[product ids=”1,2,3″ orderby=”date” columns=”3″ order=”desc”] – this given shortcode provides output six product in 3 columns that will be ordered by date in descending order. Note that you also use title for ordering and “ASC” for ascending.

7. Product Category

Shortcode: [product_category category=”one”]  

The product categories shortcode is used for the categories section and lets you add product category loop and output. Means to say, using WooCommerce product category shortcode you can add product categories loop and output.

Listed below are some attributes to this shortcode which you can apply;

  • ‘number’ => ’null’, – shortcode used to show the number of categories.
  • ‘orderby’ => ‘name’, – use this shortcode to display the order, whereas name and date are both valid options.
  • ‘order’ => ‘ASC’, – use this shortcode to represent how product categories are ordered, “ASC” or “DESC”.
  • ‘columns’ => ‘4’, – use this shortcode to represent the number of columns in which categories are organized.
  • ‘hide_empty’ => ‘1’, – use this shortcode to represent SET to 1 to HIDE categories with no products to show.
  • ‘parent’ => ‘’, – use this shortcode to represent SET to 0 for showing only top level categories.
  • ‘ids’ => ‘’, – use this shortcode to represent that IDs can be set to only output specified results.

8. Product categories by slug

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

Product categories by slug is the same as the product categories that we have mentioned above, just the difference is – It lets you add all your products within the defined category. Further on with this shortcode, you can also be adjusted with per_page=”” and columns=”” parameters.

9. Featured product

Shortcode: [featured_products per_page=”14″ columns=”6″ orderby=”date” order=”ASC”]

WooCommerce featured product shortcode is used to add your favorite product in your webpage. Just you will have to open your dashboard and go to Product>>Products, thereafter you will see a given below icon;

featured product

Now, press the icon button if you want to add featured products. See the screenshot we have mentioned below:

Woocommerce product shortcode

Now this will look like this;

featured product shortcode

10. Recent Products

Shortcode: [recent_product per_page=”15” columns=”3”]

WooCommerce recent products shortcode is used to display the products that you have recently added.

Although the shop page template does this by default, if you want a specially formatted different landing page which sets apart from the main shop index, you can definitely use this shortcode.

Further, you can also add the shortcode to your post or page in case you want to see the result after.

woocommerce shortcode, recent products, wordpress

Tip: Use full-width page or Shop Sidebar template with this shortcode.

Note: The ‘per_page’ attribute means how many products you want to show on the page and the same goes for the columns attribute deciding in how many columns should the products be listed. And this may vary from person to person according to their personal choices.

11. Best Selling Products

Shortcode: [best_selling_products per_page=”14″ columns=”6″ orderby=”date” order=”ASC”]

WooCommerce best selling product shortcode displays the list of best selling products of your WooCommerce store. You can also customize product limit and columns.

best selling products, woocommerce shortcodes

Tip: Use the full-width page or Shop Sidebar template with this shortcode.

12. Top-Rated Products

Shortcode: [top_rated_products per_page=”14″ columns=”6″ orderby=”date” order=”ASC”].

Using this shortcode, you can enable the list of top rated products for the customers to go through other quality stuff.

Further on this shortcode may be more helpful to show your best product if you use review and rating – inbuilt feature of WooCommerce.

woocommerce shortcode, top rated products, wordpress

Tip: Use the full-width page or Shop Sidebar template with this shortcode.

13. Related Product

Shortcode: [related_products per_page=”14″].

As the name suggests, WooCommerce related product shortcode used to display you all the similar product list.

14. Sale product

Shortcode: [sale_products per_page=”14″ columns=”6″ orderby=”date” order=”ASC”]

Using this shortcode you can add products currently on sale.

sale product

15. Add to Cart

WooCommerce Add to cart shortcode display you the price and add to cart button of a single product by ID. Illustrated below the add to cart shortcode;

array(

‘id’ => ’99’,

‘style’ => ‘border:4px solid #ccc; padding: 12px;’,

‘sku’ => ‘FOO’

‘style’ => ‘TRUE’

‘class’ => ‘CSS-CLASS’

)

[add_to_cart id=”70″]

16. Add to cart URL

Shortcode: [add_to_cart_url id=”70”] – This shortcode also enables to show the URL on the add to cart button of a single product. You can also specify the product by ID. See the below screenshot; 

array(
‘id’ => ’99’,
‘sku’ => ‘FOO’
)
[add_to_cart_url id=”70″]

17. Order Tracking

You will get order tracking id in the confirmation email and on the receipt you receive.

woocommerce order tracking

18. Coupon Shortcodes

There are many plugins available for coupon shortcodes which can influence the customers for better sales results.

These are very customizable as they provide a set of conditional shortcodes, in which you can set options as you want. It also helps in displaying the based on coupons’ availability.

You can also choose whether the customer wants to select a coupon or not, it simplifies this by allowing display specific content. And the same way you can also display the content based on the validity of the coupon.

coupon code shortcode, woocommerce shortcodes

Some available shortcodes are – [coupon_is_applied], [coupon_is_not_applied], [coupon_is_valid], [coupon_is_not_applied].

To add some other information to coupon codes use these shortcodes like [coupon_code], [coupon_description] and [coupon_discount].

19. Product search field shortcode

Shortcode: [woocommerce_product_search]

By using the search field shortcode, you can insert live search and live filtering facilities to your post and page.

20. Live Product Filter Shortcodes

There is the option of ‘filtration’. By using the given below shortcode you can also customize;

[woocommerce_product_filter] – allow you to show a live Product Search Filter.

[woocommerce_product_filter] – this will show you a live Product Attribute Filter.

[woocommerce_product_filter_category] – this enables you to show a live Product Category Filter.

[woocommerce_product_filter_price] – this enables you to show a live Product Price Filter.

[woocommerce_product_filter_tag] – it displays you a live Product Tag Filter.

21. Troubleshooting Shortcodes

In case the display looks incorrect instead of correctly posting your shortcodes, make sure that you did not embed the shortcode between <pre> tags.

This is a common issue, to remove these tags, edit the page, and click the Text tab as shown in the image above.

Conclusion

So that was all about shortcodes, a great way to enhance your online store with these easily structured ShortCodes. In starting you may feel a bit of complication in using but later on it will become interesting and will be helpful for your shop.

With this goodbye for now! Hope this article has helped you in understanding Shortcodes in Woocommerce and its usage.

If you are still facing problem then you also have another option of getting help from our WooCommerce Support Team. Without any wastage of your precious time, you will get the best support by our WordPress Experts. Dial +1-844-275-0975 (Toll-Free).

Read More blogs:



Leave a Reply

Call Now