Blog

WooCommerce shortcodes are effective resources that enable you to personalize and improve your e-commerce platform without the need for intricate coding.

In this piece, we’ll explore the intricacies of shortcodes, their application, and several essential WooCommerce shortcodes that can be utilized to boost your store‘s capabilities and the overall experience for your customers.

What are Woocommerce Shortcodes

Shortcodes are small snippets of text enclosed in square brackets (e.g., [shortcode]) that you can insert into posts, pages, or widgets to display specific content or functionality.

WooCommerce comes with a variety of built-in shortcodes that allow you to add products, cart details, user account information, and more to any page or post on your site.

Why Use WooCommerce Shortcodes?

1. Flexibility: Shortcodes allow you to display WooCommerce elements like products, carts, or account details on any page or post.
2. Customization: You can customize the appearance and behavior of your store by using different shortcode attributes.
3. Ease of Use: No coding skills are required; simply copy and paste shortcodes where needed.
4. Improved User Experience: Shortcodes can help you create a more seamless and integrated shopping experience.

Basic WooCommerce Shortcodes

Here are some of the most commonly used WooCommerce shortcodes:

1). Cart

Displays the cart page. Use this shortcode on a page designated as your cart page.

Used on the cart page, the cart shortcode displays cart content, an interface for coupon codes, and other basic order information.

Example:

[woocommerce_cart]

2). Checkout

Displays the checkout page. This is used on the page where customers complete their purchases.

[woocommerce_checkout]

3). My Account

Displays the user account page. Users can view their orders, manage their addresses, and more.

Shows the ‘my account’ area where the currently logged in customer can view past orders and update their information. Guests who aren’t logged in will see a sign in form.

Example:

[woocommerce_my_account]

4). Products Listing

Displays a grid of products. You can filter products using various attributes.

The [products] shortcode allows you to display products by post ID, SKU, categories, attributes, with support for pagination, random sorting, and product tags, replacing the need for multiples shortcodes such as  [featured_products], [sale_products], [best_selling_products], [recent_products], [product_attribute], and [top_rated_products], which were needed previously.

Example:

[products limit="4" columns="4" orderby="date" order="DESC"]

Common Attributes:

• limit: Number of products to display.
• columns: Number of columns in the grid.
• orderby: Criteria to sort products (e.g., date, title, price).
• order: Order of products (e.g., ASC, DESC).

5). Order Tracking Form

Lets a user see the status and details of an order by entering their order number and billing email. This is helpful for guest who don’t have an account on with your store but unlike the cart, checkout, and my account shortcodes (or blocks), it is not required. Here is an example of it being used on the My Account page for guests:

Example:

[woocommerce_order_tracking]

6). Single Product Page

Show a full single product page by ID or SKU. This is helpful if you want to add a product to a page other than the shop page,

Example:

for example, a post about a new product (replace xx and xxx with the actual product number or sku):

[product_page id="xx"]

[product_page sku="xxx"]

7) Product Category Shortcodes

Following are list of two shortcodes used to display your product categories on any page.

• [product_category] – Will display products in a specified product category.
• [product_categories] – Will display all your product categories.

Example

Imagine you only wanted to show top level categories on a page and exclude the sub categories, well it’s possible with the following shortcode.

[product_categories number="0" parent="0"]

8). Related Products

If you want to show the related products (products with similar tags or categories) on a single product page to encourage cross-sells/up-sells you can use the [related_products] shortcode.

Example:

Here’s an example of how to use this shortcode with a few attributes set and the shortcode placed in the “Product description” section of a single product:

[related_products limit="4" columns ="3" orderby="price"]

9). Add-to-cart Shortcode:

You can use shortcodes to display an “add-to-cart” button on any page. This is helpful if you want to highlight a product somewhere outside your shop page.

Example:

Here’s an example of what this looks like with the code: [add_to_cart id=”xx” style=”border:none; padding 10px”] added to a post (please note: [add_to_cart] only adds the button and the pricing for the product, it does not add any images or additional product information).

10) Add to Cart URL

Display the URL on the add to cart button of a single product by ID.

Two attributes are available for this shortcode: id or sku.

Example:

[add_to_cart_url id="99"]

Credits:

• Photo by Rubaitul Azad on Unsplash

Reference:

Shortcodes included with WooCommerce

Conclusion

WooCommerce shortcodes offer a versatile and straightforward way to enhance your online store’s functionality. Whether you’re looking to display products on a custom landing page, create a unique checkout experience, or provide users with account management options, there’s likely a shortcode that fits your needs.

By mastering WooCommerce shortcodes, you can unlock the full potential of your store and create a more engaging and dynamic shopping experience for your customers. Experiment with these shortcodes and customize them to suit your specific requirements—your WooCommerce store will thank you!

If you have any questions or need further help with WooCommerce shortcodes, feel free to leave a comment below!