A Perfect Guide To Add WooCommerce Shortcodes

Why Shortcodes?

WooCommerce is a flexible plugin for you to sell products on your website. One of the reasons why WooCommerce is great is because of its use of shortcodes. WooCommerce Shortcodes are those small snippets which allow you to call certain functions to several pages on your site.

In this post, you will see different WooCommerce shortcodes, what they do and how to use them.

WooCommerce Shortcodes Plugin

First off, you can get these shortcodes to your site through the shortcodes plugin You can use WooCommerce Shortcodes plugin if the version of your WordPress is anything from version 3.9 to the most recent, or if the version of your WooCommerce is from 2.2 to the most recent.

When you install the plugin and need to add any WooCommerce product to a respective page, you simply fill the required parameters and the plugin generates the shortcodes from your TinyMCE editor.

However, if you do not want an additional plugin (which may have a small impact on your server) then learning how to use the code manually is a great choice, and this post will do just that.

Page Shortcode

To use WooCommerce, you must have four basic pages created on your site which allow visitors to perform certain actions, like add to cart, checkout or make payment or manage their account. By default, these pages are automatically created and the shortcodes added automatically, but in cases where they are not added, the guide below will teach you how to do it.

The following are the most important shortcodes in WordPress and how to use them

[woocommerce_cart] – This shortcode is used to display the cart page

[woocommerce_checkout] – This shortcode shows your checkout page

[woocommerce_order_tracking] – The order tracking code allows for orders to be tracked

[woocommerce_my_account] – This is the page where your WooCommerce users manage their account page

In cases where the respective pages where these codes are used are not created by default, you can create a page, give it a corresponding name and add the code to it, of course with the parenthesis, for example:

Create a new page and add [woocommerce_cart] to the page, that’s all. That page becomes the cart page of your WooCommerce store.

After installing WooCommerce, or when you create the pages manually by yourself, do not forget to point to these pages in the WooCommerce setting section.

That’s not all, you can find below, more codes which you can apply to your site for more functionality.

Product Shortcodes

NB: You can edit the values of columns. For instance, in the code below, the column has a value of “4”, which means the bestselling products will be rendered in 4 columns.

  • Best-selling product:

[best_selling_products per_page=”12″ columns=”4″ orderby=”date” order=”ASC”]: When you add this shortcode to any page, your best selling products are automatically rendered.

  • Top rated product

[top_rated_products per_page=”12″ columns=”4″ orderby=”date” order=”ASC”]: This code adds your top rated products to your page.

  • Related product:

[related_products per_page=”12″]: This code call other related products to the page you add it. You can change the value to whatever number you like.

Add To Cart Shortcode

When writing a blog post or page on your site, you may mention a product and want to add a button which allows your audience add that product to their cart, you can use this add to cart

  • Add to cart:

Code, [add_to_cart id=”99″]. Copy the code below to add it into your editor. (NB: the value 99 is the product ID, remember to change it to the specific product ID you want in your eCommerce store.

[add_to_cart id=”99″]

Similarly, you can use this code to add the product by URL

[add_to_cart_url id=”99″]

Product Search Shortcode

If you want to add the button to easily make searching products in your store, then this code is what you need

  • Product search:

[woocommerce_product_search]

Product Filters Shortcode

It is not all the products you have on your site that concerns certain people, this makes product filter important. To add certain filters, select from the codes below.

  • Product filters:

[woocommerce_product_filter]: This code allows your audience to filter product according to their preference.

[woocommerce_product_filter_attribute]: This code allows you to filter products according to their attribute.

[woocommerce_product_filter_category]: This code allows you to filter product according to their categories.

[woocommerce_product_filter_price]: this is perfect if you want to filter products by price.

[woocommerce_product_filter_tag]: you may want similar products by tags, this is what you need.

These codes are sure to improve your WooCommerce user experience.

Leave a Comment

Your email address will not be published. Required fields are marked *