Shortcodes in WooCommerce allows you to add a various type of functionality to your post, pages, widget, sidebar, etc without any type to write code. For example, you can add a creative slider by using a shortcode.
In this guide, I’m going to tell you how to use WooCommerce shortcodes and how they can help you embed content like featured products or even specific products into pages, posts, widgets, sidebar, etc.
There’s a list of WooCommerce shortcodes and it is important that we cover them all. Apart from WooCommerce, you can use these shortcodes for your Cart, Checkout and My Account pages, etc. to display the content.
- Page Shortcode
[woocommerce_cart] – This shortcode will demonstrate the customer’s cart.
[woocommerce_checkout] – This shortcode will display the checkout page.
[woocommerce_order_tracking] – This shortcode will display the Order Tracking page.
[woocommerce_my_account] – This shortcode will display the My Account Page.
You should also note that you can use combined shortcodes with each page. For example, you can set up a form page with [woocommerce_my_account], [woocommerce_order_tracking] on one page.
- WooCommerce Shortcodes Plugin
Although, some of the plugins are available on the Internet, but I would like to suggest to choose WooCommerce Shortcodes plugins. This plugin provides a TinyMCE drop-down button for you use all WooCommerce shortcodes.
- The Requirements of the Plugin
- WordPress 3.9 or later.
- WooCommerce 2.2 or later.
Want to Test Your Changes on Free Staging URLs?
Try Cloudways managed WooCommerce hosting for a hassle-free experience.
- Plugin Usage
Now first thing first, you need to add the WooCommerce shortcode plugin. For installing this plugin just follow these few steps:
Go to your admin dashboard and click on Plugin > Add New on the right side. Then search for WooCommerce shortcodes, and then you just have to install and activate it.
When you install a shortcode plugin for WooCommerce, you will find a new shortcode button in your page editor and post editor. Just click on the button and you’ll see all the shortcodes in the drop-down list. See the screenshot below.
- Product Price/Cart Button
When you click on the Price/Cart button, it will ask you for your product ID and SKU. After filling the instructions it will generate the following shortcode [add_to_cart id=”21″ sku=”21″].
This is used to show the price and add to cart button for a singular product, either by ID or SKU.
I am adding a new page and add the shortcode for price/cart button.
After click on this, the pop-up appears on your screen, now add the ID whatever you want to display
Clicking the OK button will generate a shortcode like in the screenshot below:
Click the publish button and you’ll see that the shortcode is generated successfully as shown in this screenshot below.
This is the one example I am showing you, you can also use any other shortcodes as well like List, add to cart, etc.
- Multiple Product Shortcode
Similar to the previous example, you can also add multiple products while using this shortcode: [products ids=”1, 2, 3, 4, 5″]. You can also use the following arguments: order=” “, columns=” “, orderby=” “.
This shortcode, [products ids=”1, 2, 3″ orderby=”date” columns=”3″ order=”desc”], will output six products in 3 columns ordered by date in descending order. You can also use “ASC” for ascending and title for ordering.
- Product Category
Product Categories allow you to add product categories loop and output with this shortcode:
[product_category category=”one”]. For the purpose of categories section, here are seven more attributes you can apply to this shortcode:
‘number‘ => ‘null‘, – This shortcode represents the number of categories.
‘orderby‘ => ‘name‘, – This shortcode represents the order, “name” and “date” are valid options.
‘order‘ => ‘ASC‘, – This shortcode represents how product categories are ordered, “ASC” or “DESC“.
‘columns‘ => ‘4′, – This shortcode defines the number of columns categories are organized into.
‘hide_empty‘ => ‘1‘, – This shortcode represents Set to 1 to hide categories with no products or 0 to show them.
‘parent‘ => ”, – This shortcode represents Set to 0 to only display top-level categories.
‘ids‘ => ” – This shortcode represents that IDs can be set to only output specified results.
- Product Category by Slug
This is similar to product categories but this allows you to add all your products within the defined category and can be adjusted with the per_page=”” and columns=”” parameters. Here is the shortcode: [product_category category=”” per_page=”16″ columns=”3″ orderby=”date” order=”desc”].
- Recent Product
The Recent product will show you the products you may have added recently. Here is the shortcode: [recent_products per_page=”12″ columns=”4″ orderby=”date” order=”ASC”].
If you need to see the result after, add this shortcode to your page/post or anywhere else:
- Featured Product
Feature products allow you to add your favorite products to your web page. Just go to your admin site dashboard, Products > Products and you will see an icon like this:
If you want to add featured products, just click on the icon. See the screenshot below:
Here is the shortcode:
[featured_products per_page=”12″ columns=”4″ orderby=”date” order=”ASC”]
Here’s what it will look like now:
- Sale Product
Sale products allow you to add products currently on sale.
Here is the shortcode: [sale_products per_page=”12″ columns=”4″ orderby=”date” order=”ASC”]
After you have added this shortcode, you can see the result as demonstrated below:
- Best Selling Product
If you want to show your best selling product, you need to use this shortcode:
[best_selling_products per_page=”12″ columns=”4″ orderby=”date” order=”ASC”]
- Top Rated Product
If you use the reviews and ratings feature built into WooCommerce, then this shortcode can be useful for displaying your best products. Here is the shortcode: [top_rated_products per_page=”12″ columns=”4″ orderby=”date” order=”ASC”].
- Related Product
Related product shows you the list of all the similar products. You need to use this shortcode for it: [related_products per_page=”12″].
- Add to Cart
This shortcode allows you to show the price and add to cart button of a single product by ID. See the below shortcode.
- ‘id’ => ’99’,
- ‘style’ => ‘border:4px solid #ccc; padding: 12px;’,
- ‘sku’ => ‘FOO’
- ‘style’ => ‘TRUE’
- ‘class’ => ‘CSS-CLASS’
- [add_to_cart id=”99″]
- Add to Cart URL
This shortcode allows you to add to cart button of a single product by ID. See the below shortcode.
- ‘id’ => ’99’,
- ‘sku’ => ‘FOO’
- [add_to_cart_url id=”99″]
- Order Tracking
This is given to you on your receipt and in the confirmation email you receive.
- Product Search Field Shortcode
WooCommerce product search allows you to insert live search and live filtering facilities inside pages and posts. You need to use this shortcode for it. [woocommerce_product_search].
- Live Product Filter Shortcode
You can also customize the filtration by using the following WooCommerce shortcodes.
[woocommerce_product_filter] — This allows you to shows a live Product Search Filter.
[woocommerce_product_filter_attribute] — This allows you to shows a live Product Attribute Filter.
[woocommerce_product_filter_category] — This allows you to shows a live Product Category Filter.
[woocommerce_product_filter_price] — This allows you to shows a live Product Price Filter.
[woocommerce_product_filter_tag] — This allows you to shows a live Product Tag Filter.
- Troubleshooting Shortcode
Sometimes you paste a shortcode correctly but it will display incorrectly if you face this issue, you need to check your code and make sure you did not embed the shortcode between <pre> tags. To remove this tags go to your text editor and remove it.