What are shortcodes?
In case you are not familiar with the shortcodes, we will define them quickly. A shortcode or short code is simply a word in brackets, like this:
Sometimes the shortcode can have an opening and closing tag, in this style:
[word] [/ word]
And in many cases it can also have parameters, like this:
[word parametro1 = “something” parametro2 = “something else”]
The magic of this word in square brackets is that you only have to write it in the WordPress editor, and when someone looks at it on the web, it automatically becomes another content. An image, a text, a product, a post, a loop … anything.
For example, if I write ” nvideos ” in brackets in the editor, this becomes the number of videos in my courses, that is, 3234.
So, let’s see what shortcodes go standard with WooCommerce, and what they “convert” to when someone sees them on the web.
1. Shortcodes of the WooCommerce pages
These 4 shortcodes are a bit special because they coincide with the 4 pages created by WooCommerce during its installation process. These shortcodes are usually the only thing on each of those pages:
[woocommerce_cart] – Displays the “Cart” page.
[woocommerce_checkout] – Show the payment page.
[woocommerce_order_tracking] – Shows the status of the order.
[woocommerce_my_account] – Displays the “My Account” page.
As WooCommerce automatically generates these pages, it is most likely that we do not have to use them in life, because once it has been established, we should never touch it again.
2. Shortcodes of WooCommerce products
Although WooCommerce already has the “store” page in which all the products are shown, in some occasions we want to show only certain products in some page or entry.
Let’s start with the easiest. Show a specific product, on any page or entry, with this shortcode:
We can indicate the product that we want to show both for its “id” and for its “sku“, for example:
[product id = “123”] – Product with “id” 123
[product sku = “ref.abc”] – Product with reference ref.abc
This will show only the product itself, but if we want we can show the entire page of the product, with the following shortcode:
[product_page id = “123”] – Product page with “id” 123
[product_page sku = “ref.abc”] – Product page with the ref.abc reference
As you can see, so far we have only shown one product, in the singular. But we can also show a list of products. For this we have the following shortcodes:
[products ids = “123, 124, 125”] – List of 3 products 123, 124 and 125.
[recent_products] – List of the latest products.
[featured_products] – List of featured products.
[sale_products] – List of discounted products.
[best_selling_products] – List of best-selling products.
[top_rated_products] – List of the best-rated products.
[related_products] – List of related products.
Apart from the lists proposed by WooCommerce, we can also create our own listings based on the classification we have of categories or attributes.
At the category level, we can show both the products of a category, as well as the categories themselves. Let’s start by showing the products of a specific category . We will do it with this shortcode:
[product_category category = “electrodomesticos“] – List of products from the “Appliances” category.
And if what we want to show is a list of the product categories that we have in the store, we can do it with this other shortcode:
[product_categories] – List of store categories.
Another way to classify and show the products is through the attributes. We will achieve it through this shortcode:
[product_attribute attribute = ‘color’ filter = ‘black’] – List of black products
All shortcodes of product listings have two very interesting attributes called “orderby” and “order”:
The “orderby” attribute allows us to indicate the criteria with which we want to order the products. We have the following options:
menu_order : The number that has been chosen in the product file
title: The name of the article, alphabetically
date : The date of publication of the product
Rand : Random Order
id : The product identifier
The “order” attribute allows us to choose between ordering ascending or descending the previous criterion.
asc : ascending order
desc : Descending order
We see some examples:
[ product_category category = “clothes” orderby = “date” order = “asc” ] : Will show the products of the category “clothes” sorted by date, from the oldest to the newest.
[ best_selling_products orderby = “rand” ] : Will show the best selling products in random order.
[ recent_products orderby = “title” order = “desc” ] : Will show the most recent products ordered inversely by their name.
3. Shortcodes of cart
Finally, we have the cart shortcodes. These are very interesting because they allow us to create the typical “Add to cart” button for any product. We have two variations: Button and URL.
[add_to_cart id = “123”] – This shortcode will show a button to add the 123 product to the cart, wherever we are.
[add_to_cart_url id = “123”] – This shortcode will show a URL that, if visited, will add the product 123 to the shopping cart.
These are great for CTAs inline, because in any article that we write from our blog, we can place a link that directly puts any product in the cart. And that is making the job much easier for the client.