Are you looking for complete guide about WooCommerce Shortcodes?
To make an E-commerce website using WordPress, you must use the WooCommerce plugin to enable inventory management system for your site. This plugin is very popular and gives shop management power to the e-commerce site. With WooCommerce, displaying products, managing, and purchasing processes are easy.
There are lots of plugins available that are built based on the WooCommerce plugin to display products in different ways and making the purchase process easier. But the interesting feature is, you can easily display products using WooCommerce shortcodes. You don’t need to add any third-party plugin and it helps to load your site faster.
On the other hand, this plugin provides other many shortcodes such as page shortcodes, add-to-cart button shortcodes, and much more. Even you can control shortcodes to display your specific product using attributes.
In this article, I will introduce you to all the WooCommerce shortcodes, attributes and provide guidelines on how to use WooCommerce shortcodes. So without further ado, let’s get started.
Also read: Essential Plugins for WooCommerce Website
What are the WooCommerce Shortcodes & Why we use?
A shortcode is specially formatted text that opens and closes with square brackets. It is used in content management systems (CMS) and web development to insert dynamic content or functionality into a webpage or post. It is a simple and convenient way to add complex features, such as dynamic elements, functionalities, or data.
WooCommerce shortcodes specifically refer to a set of predefined codes that allow you to display various e-commerce elements, such as products, product categories, cart information, checkout forms, and more dynamically without using plugins.
For example, instead of manually coding the display of a specific product on a WooCommerce website page, you can simply use a WooCommerce shortcode like [product id=”123″] to automatically render the product’s details and image.
Shortcodes offer a convenient means of extending the functionality of a website or CMS, enabling users to customize their content and provide enhanced experiences for their audience.
Also read: How to add WooCommerce PDF Invoice and Packing Slip?
How to use WooCommerce Shortcodes?
Using WooCommerce shortcodes is not hard and you do not need any coding knowledge. If you have just some technical knowledge, it’s very easy for you. So let’s see by using shortcodes.
If you use WordPress default editor Gutenberg to design your site, you can simply add a shortcode block, paste the shortcode and update the page.
There are many drag-and-drop page builders available such as Elementor, Beaver, WPBakery, etc. that enable the user to create beautiful website designs. So if you use any page builder you can easily drag the shortcode element or module and paste the shortcode.
List of All WooCommerce Shortcodes
WooCommerce provides different types of shortcodes for products, buttons, pages, etc., and more. So without wasting time, let’s explore all the WooCommerce shortcodes.
WooCommerce Shortcodes for pages
If you use WooCommerce as an inventory management plugin, you must need some pages including shop, Cart, Checkout, My Account, etc. By default, those pages are automatically created when you install the WooCommerce plugin. But if you need to create those pages manually, you need shortcodes.
Cart Page: WooCommerce cart page displays the products that customers added to their cart. The WooCommerce cart shortcode is [woocommerce_cart]
Checkout page: The WooCommerce checkout page shortcode – [woocommerce_checkout] . This shortcode creates a checkout page on your e-commerce website that is very essential to buy any products for customers.
My Account Page: My account page is another important page where customers can see their orders and manage their profiles. My Account page shortcode is [woocommerce_my_account]
Order Tracking Page: If you are a site owner and want to add Order Tracking features for your customers, you need to create an Order Tracking page. The shortcode of the Order Tracking page is [woocommerce_order_tracking]
Also read: Essential Plugins for WooCommerce Website
WooCommerce Product Shortcodes
WooCommerce Product shortcode allows you to display products in multiple ways. It also provides many Attributes to manage display limit, product columns, order, paginate, and so on.
The main shortcode to display WooCommerce products is [products] . This shortcode displays products by post ID, SKU, categories, and attributes, with pagination, random sorting, etc.
If you want to display specific products, you can do it using other shortcodes. Below I listed some shortcodes for you:
Featured Products: You can display your featured products using [featured_products] shortcode.
Sale Products: If you want to display only sale products, the available shortcode is: [sale_products] .
Best Selling Products: Display best selling products by using [best_selling_products] shortcode.
Recent or latest products: If you want to display all recent or new products, use the [recent_products] shortcode.
Top-rated products: Use [top_rated_products] shortcode to display top-reviewed products.
Display product by attributes: You can display a product using an attribute and the shortcode is: [product_attribute]
Now let’s see how to control product display using Product Attributes.
Product Limit: The limit attribute allows you to control how much product you want to display. If you want to display 8 products your shortcode will be [products limit=“8”]
Product column: Using these attributes allows you to define product columns. If you want to display a product with 6 columns, the shortcode will be [products columns=“6”] . The default column value is 4.
Pagination: To display the pagination of your product, you need to use paginate attribute. This attribute has only 2 values: true and false. Ex: [products paginate=“true”] . The default value is “false”.
Product Order: If you want to display products for specifics order, you can do it using orderby attribute. The orderby attribute has many some option and those are date, id, menu_order, popularity, rand, rating, and title. Ex: [products orderby=“date”] / [products orderby=“rating”] .
SKUs: You can display products by SKU. Ex: [products skus=“M0016”] . If you want to display products with multiple SKUs, you can use comma(,). Ex: [products skus=“M0016, M0017, M0018”]
Product Category: Display product for specifics or multiple categories. Ex: [products category=“t-shirt, shirt, hoodie”]
Product Tags: You can display products by tags. Ex: [products category=“polo tshirt, sleeve tee”]
Product order (ASC/DESC): Display products by Ascending and Descending. This attribute has two values: ASC and DESC. Default is: ASC. Ex: [products orderby=“date” order=“DESC”]
Product Class: If you want to style products using a custom class, you can add a class as an attribute. Ex: [products class=“custom-product-design”]
Other Attributes: If you want to filter products when you use [products] shortcode, you can do it. There are some attributes available that only work with [products] shortcode. Those are: on_sale, best_selling, and top_rated. Those attributes have only two values: true and false. Ex: [products on_sale=”true”]
Product Category shortcode
WooCommerce also provides another shortcode to display products for a specific category. This shortcode supports all necessary attributes. Check the shortcode below.
[product_category category="clothing" per_page="12" columns="5" orderby="date" order="asc"]If you want to display all top-level product categories, you can use the shortcode below
[product_categories number="0" parent="0"]
Add to cart button shortcode
If you need to add an ‘Add to cart’ button anywhere on your site for a specific product, you can add the button easily. Just implement the product id as well. Shortcode is: [add_to_cart id=”56″]
Add to cart URL button shortcode
To add “Add to cart URL” anywhere on your website for a specific product, the shortcode is: [add_to_cart_url id=”99″]
WooCommerce product table shortcode
You can also display products as a table using WooCommerce shortcode. Ex: [product_table sort_by=”date” sort_order=”desc” product_limit=”5″]
Related product shortcodes
If you want to show related products, you can use [related_products limit=”12″] shortcode.
Also read: How to enable WooCommerce Add To Cart popup in WordPress?
Final Thought
WooCommerce shortcode helps to display products in an easy way anywhere on your site dynamically. As a result, you can design your site as your own design. It also helps to increase website speed and user experience.
I listed all the essential shortcodes that WooCommerce provides above. I tried to explain easily so that you can understand with ease. If you need more about WooCommerce shortcodes, you can check WooCommerce’s official documentation.
We publish WordPress and WooCommerce-related articles to make advanced websites. So you can check our other article to get more tutorials. Comment below if you have any questions.
