How to Customize Your Store: Comprehensive Guide on Popular WooCommerce Shortcodes

When it comes to creating an eCommerce website, simplicity is key. WooCommerce is an excellent tool, especially for those using WordPress to sell products and services online.

However, if you prefer to have complete control over the design and build of your e-commerce store, you may want to explore using custom codes from scratch.

With WooCommerce Shortcodes, this becomes possible, even more. These shortcodes allow you to enhance your sidebar, sliders, pages, posts, widgets, and more with various functionalities—all without the need for coding expertise.

In this comprehensive guide, we will introduce you to the world of WooCommerce shortcodes. You can use this guide as a valuable resource to learn how to utilize WooCommerce shortcodes effectively and effortlessly customize your WooCommerce website.

Let’s dive right in!

Most Popular WooCommerce ShortCodes

1. Page Shortcodes

Needless to say, building a checkout page or My Account page from scratch can be a daunting task. But why would someone go that route when you can achieve the same thing by using simple page shortcodes?

To make things simple for you, here are some of the most popular page shortcodes:

• [woocommerce_cart] – Use this shortcode to calculate the customer’s cart value.
• [woocommerce_checkout] – Use this shortcode to display the checkout page to your customers.

Order Tracking

If you are a frequent online shopper, you perhaps already know the value of having an order tracking information available to you as soon as you place an order. The same is also provided to you on your order receipt as well as in the confirmation email.

• [woocommerce_order_tracking] – Use this shortcode to display the Order Tracking page to your customers.
• [woocommerce_my_account] – Use this shortcode to display the “My Account” Page to the customers.

You can also combine shortcodes on pages. For example, you can choose to set up a form page using [woocommerce_my_account] and [woocommerce_order_tracking] together on the same page.

Feel free to try other permutations and combinations of WooCommerce shortcodes to arrive at the one you would actually put to use.

2. Product Shortcodes

Products make your e-commerce store complete. There are times when you need to display products page in a particular fashion to attract the attention of visitors who browse through your online store. This is where product-related WooCommerce shortcodes come into the picture. There are a lot of shortcodes in this category, so let’s take a look at them one by one.

The [products] shortcode lets you display products by SKU, post ID, attributes, categories, etc., with support for product tags, random sorting, and pagination while also making the need for multiple shortcodes redundant.

Here are some of the shortcodes you will need to explore; please have a look at the complete documentation available on the official WooCommerce website.

Display Product Attributes

• limit – the number of products to display. Defaults to and -1 (display all) when listing products, and -1 (display all) for categories.
• columns – The number of columns to display. Defaults to 4.
• paginate – Toggles pagination on. Use in conjunction with a limit. Defaults to false set to true to paginate.
• orderby – Sorts the products displayed by the entered option. One or more options can be passed by adding both slugs with a space between them. Available options are:
  • date – The date the product was published.
  • id – The post ID of the product.
  • menu_order – The Menu Order, if set (lower numbers display first).
  • popularity – the number of purchases.
  • rand – Randomly order the products on page load (may not work with sites that use caching, as it could save a specific order).
  • rating – The average product rating.
  • title – The product title. This is the default orderby mode.
• skus – Comma-separated list of product SKUs.
• category – Comma-separated list of category slugs.
• order – States whether the product order is ascending (ASC) or descending (DESC), using the method set in orderby. Defaults to ASC.
• class – Adds an HTML wrapper class so you can modify the specific output with custom CSS.
• on_sale – Retrieve on-sale products. Not to be used in conjunction with best_sellingor top_rated.
• best_selling – Retrieve best-selling products. Not to be used in conjunction with on_sale or top_rated.
• top_rated – Retrieve top-rated products. Not to be used in conjunction with on_saleor best_selling.

Content Product Attributes

• attribute – Retrieves products using the specified attribute slug.
• terms – Comma separated list of attribute terms to be used with attribution.
• terms_operator – Operator to compare attribute terms. Available options are:
  • AND – Will display products from all of the chosen attributes.
  • IN – Will display products with the chosen attribute. This is the default terms_operator value.
  • NOT IN – Will display products that are not in the chosen attributes.
• Visibility – will display products based on the selected visibility. Available options are:
  • visible – Products visible on shop and search results. This is the default visibility option.
  • catalog – Products visible on the shop only, but not search results.
  • Search – Products visible in search results only, but not in the shop.
  • hidden – Products that are hidden from both shop and search, accessible only by direct URL.
  • featured – Products that are marked as Featured Products.
• category – Retries products using the specified category slug.
• cat_operator – Operator to compare category terms. Available options are:
  • AND – Will display products that belong in all of the chosen categories.
  • IN – Will display products within the chosen category. This is the default cat_operator value.
  • NOT IN – Will display products that are not in the chosen category.
• ids – will display products based on a comma-separated list of Post IDs.
• skus – Will display products based off of a comma-separated list of SKUs

You can use multiple permutations and combinations using the above bunch of shortcodes to arrive at the final solution that you need.

For example, the shortcode [products limit=”5″ columns=”5″ orderby=”popularity” on_sale=”true” class=”quick-sale”] explicity states five products with five columns (which will be included in one row), showing the top most popular on-sale items (quick-sale being one of the CSS classes).

You can also add multiple products to this same shortcode in this way: [products ids=”1, 2, 3, 4, 5″].

Just like the previous example, it’s an excellent idea to use the arguments: “order=”, “orderby=”, “columns=”.

For example, if you use [products ids=”1, 2, 3″ columns=”3″ order=”desc” orderby=” date”], it will output 3 products in 3 pre-defined columns ordered by the date variable, in descending order.

Product Category allows you to add multiple product categories in both loop and output with the help of this simple shortcode:

[product_category category=” three”]

For a better understanding of the product categories section, here are a few more attributes you can use with this shortcode:

• order => ASC – This attribute changes how the product categories are ordered, “DESC“ or “ASC”.
• orderby => name – This attribute sorts the order by using “name” or “date” as valid variables.
• number => null – This attribute represents the count or number of categories.
• columns => 3 – This attribute defines the number of columns in which categories are organized.
• hide_empty => 2 – This attribute represents Set 2 to hide those categories that have no products.
• parent => – This attribute represents Set 0 to display only the top-level categories.
• ids => – This attribute represents that the product IDs can be set to output the specified results.

Product Category by Slug

This attribute allows you to add all those products that fall within a defined category, along with an option to adjust the results page with the columns=”” and per_page=”” parameters. For example, here’s a shortcode that uses all these parameters:

[product_category category=”” columns=”4″ per_page=”15″ orderby=”date” order=”asc”]

Recent Products

This shortcode will display the products which you may have added recently. To show you how it works, here is an example shortcode:

[recent_products per_page=”20″ columns=”4″ orderby=”date” order=”DESC”]

Featured Products

The featured product shortcode allows you to add all your favorite products together and display them on your web page. Here’s how the shortcode looks:

[featured_products per_page=”8″ columns=”4″ orderby=”date” order=”DESC”]

Sale Products

Running sales every once in a while is a great way to attract more traffic to your online store, and also to get more return customers.

Want to put some products on sale? Sale products shortcode lets you do this and more.

Here’s what the shortcode looks:

[sale_products per_page=”21″ columns=”3″ orderby=”date” order=”DESC”]

Once you’ve added this shortcode, here’s what the result will look:

Best Selling Product

How about showcasing your best-selling products to the new visitors? Won’t it help them figure out which items to look at to start with? Of course, it will!

This is where the best-selling products shortcode comes into the picture.

If you want to showcase your best-selling products, simply use this shortcode and make things happen:

[best_selling_products per_page=”18″ columns=”2″ orderby=”date” order=”DESC”]

Top Rated Product

Sometimes it does make sense to push your top-rated products so that you can win customer loyalty. You can use the built-in reviews and rating feature that comes with WooCommerce by putting this shortcode to use (example):

[top_rated_products per_page=”10″ columns=”2″ orderby=”date” order=”DESC”]

Related Product

If you want to cross-sell or up-sell other products that lie in the same category as the one your website visitor is looking at, use related product shortcode. This shortcode displays a list of all the similar products:

[related_products per_page=”20″]

Make it easier for your visitors to search products, by inserting live search and even live filtering functionality inside your pages and posts

Product Search

Product search shortcode: [woocommerce_product_search]. It can be used to set up a basic product search.

Live Product Filter Shortcode

The live product filter functionality has become so common in web and mobile apps that we almost take it for granted. This is the reason why you need this functionality in your e-commerce store. Enable custom the product filter by using the WooCommerce shortcodes as mentioned below.

• [woocommerce_product_filter]
• [woocommerce_product_filter_attribute]
• [woocommerce_product_filter_category]
• [woocommerce_product_filter_price]
• [woocommerce_product_filter_tag]

3. Shopping Cart / Product Price Button

Add-to-Cart

If you use this shortcode [add_to_cart id=”10″ sku=”10″], it will display the add-to-cart button and price and for a specific product, either by SKU or ID.

Once you click the publish button, you will notice that the shortcode has been generated successfully, and it displays the product as available for its default price – which you can add to the cart.

You can use this to customize the product price or shopping cart, displaying the offer price to your top customers – the options are simply endless!

Use this shortcode to display the price value and the add to cart button for a single product by its ID.

Add-to-Cart URL

This WooCommerce shortcode lets you print the URL on the add-to-cart button of a specific product by its ID.

Here’s an example to show you how it works:

[add_to_cart_url id=”11″]

Troubleshooting Shortcodes

Sometimes it happens you paste a shortcode incorrectly. But if you have correctly pasted the shortcode at its designated location, but it still doesn’t work, there are a few steps you can take to troubleshoot the issue:

1. Check your code: Carefully review your code to ensure that you have properly embedded the shortcode in the appropriate location.
2. Verify placement: Make sure that the shortcode is placed within the correct HTML tags or template files as specified by the plugin or theme documentation.
3. Inspect tags: If you find that you have unintentionally wrapped the shortcode with <pre> tags, this could be causing the problem. Remove these tags from your code by accessing your text editor and eliminating them.
4. Plugin conflicts: Check for any potential conflicts with other plugins or themes that might be interfering with the proper execution of the shortcode. Try disabling other plugins temporarily to see if that resolves the issue.
5. Clear cache: Clear any caching mechanisms in place, as cached content may prevent changes from being immediately visible.
6. Reach out for support: If none of these steps resolve the issue, consider reaching out to the plugin or theme developer’s support team for further assistance. They may be able to provide specific guidance based on their product’s functionality and configuration.

By following these troubleshooting steps, you should be able to identify and address any issues preventing your correctly pasted shortcode from working as intended.

Other eCommerce Platforms

It is important to consider that designing a website using code may not be easy for non-technical individuals or those who simply want to quickly launch an online store.

In addition to the platforms mentioned, such as WooCommerce and Shopify, there are other alternatives available in the e-commerce industry. For instance, Shopify is a popular platform that can be compared to WooCommerce. To learn more about the differences between WooCommerce and Shopify, you can refer to this article: WooCommerce vs. Shopify Comparison.

In the scenario of not having a web designer at hand, creating web pages using these codes is not an option, so we would suggest opting for another platform, such as Shopify.

Alternatively, you might even have a look at BigCommerce, which offers no-code eCommerce development. While BigCommerce may not offer complete personalization as per your needs, you can use a BigCommerce headless frontend to personalize and revamp your storefront.

Although Shopify may not provide the same level of customization as WooCommerce, it remains a robust platform for creating online shops due to its extensive selection of extensions and user-friendly interface. It’s important to keep in mind that there are numerous differences between these two platforms, so it’s essential to carefully evaluate their features and capabilities before making a decision.

Final Thoughts

Now that you know what WooCommerce shortcodes are actually useful for you and what you’d like to do with them – feel free to experiment.

Not only will you have fun in the process, but also get to save a lot of your precious time that would have otherwise been wasted on building the important pages of your WooCommerce store from scratch.

Hopefully, this tutorial has proven to be of help to you. For more tips and advice in this regard, don’t forget to check this space frequently for future updates.