Shortcodes in WooCommerce are one of the effective tools that help store owners use them to customize and improve their stores. With these codes, the store owner can add many features, functions, and sections to their WooCommerce store pages without the need for much programming experience.
That’s why we’ve prepared this article in which we’ll introduce you to the concept of WooCommerce shortcodes and how to use them. We’ll also provide you with a list of the most important of these codes that help you customize your store pages more effectively.
What are shortcodes in WooCommerce and why use them?
Short codes are short snippets of code that are written between brackets like this [short code] in one of the page editor components in order to perform a function or change the way the page is displayed or the place it is placed in. You can also use them to create dynamic content that changes according to the user’s interaction with it.
When you install WooCommerce on your WordPress site, the basic functions and pages of the online store are created by default, but you can rebuild them using shortcodes in order to customize them to suit your ideas or to add additional features that WooCommerce does not provide by default. In addition, using shortcodes gives you greater control over the content displayed within the store pages.
For example, you can use WooCommerce shortcodes to display best-selling or new products at the top of the home page or anywhere else, you can also use them to display the shopping cart page on another page instead of relying on the default page only, or to add a form to track an order on a page, in addition to many other uses.
How to use short code
Using shortcodes does not require any programming experience. All you have to do to add a function or section using shortcodes is go to the desired location (page, post, or sidebar) and then paste the code into the shortcode component.
For example, let’s say you want to display the shopping cart page on another page of the store. To do this, go to the page where you want to display the shopping cart and open it in order to edit it. Then, look for a component called ( short code ) and add it to the page.
Then paste the shortcode into the component you created and click ( Publish ) or ( Update ) in order to add the code’s functionality or content to the selected page or post.
In our example, the page will appear within the store like this.
Note: More than one shortcode can be placed on the same page, and then the content of the two shortcodes will be displayed or their function will be executed on the same page and in the order in which they are placed.
The most important shortcodes for WooCommerce
Below we will list the most important WooCommerce shortcodes that you can use to create your store pages and functions, but it is worth noting that when using these codes, the default content of the code used is displayed.
For example, the default content in WooCommerce for the shopping cart page is to display the products added to the shopping cart and their value, then transfer the customer to the order completion page. The default content of the order completion page code is the fields that enable the customer to pay and complete the purchase process.
The appearance of the page or section you create using shortcodes will also vary depending on the template you use in your store.
1. Shopping cart page code
The short code for the shopping cart is:
[woocommerce_cart]This code is used to add shopping cart page features to any page you want. Through it, the contents of the customer’s shopping cart are displayed on the page where this code is located, and the shopping cart page that is created using it appears in this form.
2. Payment page code and order completion
The shortcode for the order completion page is:
[woocommerce_checkout]When this code is used on a page or somewhere, a form is displayed to complete the order that includes all the fields necessary for the customer to complete the purchase process. The form that is created using it appears in this form. If you want to customize these fields in an advanced way, you can go to our article ( Explanation of checkout fields and customizing them in WooCommerce ) in which we explained what is related to that.
Note: You must specify the order completion page where you put the order completion code in the WooCommerce settings in order to be redirected to it after the shopping cart.
3. User account page code
The short code for my account page is:
[woocommerce_my_account]Through this code, you can create a My Account section or My Account page that enables users to manage their orders and modify their personal data. You can customize this page in an advanced way, as we explained in our article ( Customizing the Personal Account Page (My Account) in WooCommerce ).
4. Order tracking code
The short code for the order tracking function is:
[woocommerce_order-tracking]This code is used to add a form for the order tracking feature within a page, and you can integrate it with the My Account page or another suitable page to improve the user experience, and you can add it on a separate page, and the order tracking form created using it appears like this.
5. Product offer code
The shortcode to display a product is:
[product_page sku="xxx"]Replace xxx with the product code (SKU).
Through this code, you will be able to display any product you want on any page of the store. This code is useful if you want to display a product on a page other than the store page, for example, in an article that talks about a product. When you use this code, the product page appears completely as in the picture.
Read also: How to customize your WooCommerce product page to increase your sales .
6. Modern Products Code
The shortcode to view new products is:
[recent_products limit="x"]With this code, you will be able to display the newly added products to your store on a page or somewhere, but you must modify the x in the code to the number of new products you want to display, and the page created using it will appear like this if the number of displayed products is 4.
7. Featured Products Code
The short code for featured products is:
[featured_products limit="x"]This code allows you to display featured products in your store somewhere on the store pages, but you must modify the x in the code to the number of featured products you want to display before pasting the code. Featured products are products that are manually selected by you from the products page in the backend.
8. Best Selling Products Code
The short code for the best selling products is:
[featured_products limit="x"]This code is used to display the best-selling products in your store on a page. All you have to do to do this is place this code in the place where you want to display the products and modify the x within it to the number of products you want to display.
9. Top Rated Products Code
The short code for the most rated products is:
[top_rated_products limit="x"]With this code, you can display the highest-rated products in your store on a page or somewhere in the store, by pasting the previous code in the place where you want the products to be displayed, and modifying the x within it to the number of highest-rated products that you want to display.
10. Store Categories Display Code
The shortcode to display store categories is:
[product_categories]Using this code you will be able to display all product categories in your WooCommerce store where you paste it.
11. Code to display products from a specific category
The shortcode to display products from the category is:
[product_category category="slug" per_page="x" columns="y"]This code allows you to display products from a category in your store. All you have to do to do this is paste the previous code in the place where you want to display the products and make the following modifications:
- Replace slug with the cute name of the category you want to display products from.
- Replace X with the number of products you want to display.
- Replace y with the number of columns you want to display products in.
12. Discounted Products Offer Code
The code for the discounted products is:
[sale_products limit="x"]You can use this code to display discounted products in your store, but you must replace the x in the code with the number of products you want to display before pasting the code in the specified place.
With this, dear reader, we have introduced you to the concept of WooCommerce shortcodes, how to use them, and the most important ones. In conclusion, we would like to point out that understanding and using shortcodes correctly is something that will add many features and advantages to your store, improve the user experience in it, and contribute to its success and prosperity.
