In the WooCommerce documentation, there are shortcodes that we can use to load parts of the online store wherever we want. In fact, with this type of plugin and using the appropriate page builder, we can greatly customize the layouts of our website.
Although major page builders have started to natively embed widgets and blocks to replace WooCommerce shortcodes, shortcodes will always be more versatile and go further by embedding them.
In fact, I love using shortcodes combined with Elementor widgets provided by Dynamic. ooo or addons. They give me a lot of flexibility when using templates and placing the elements in the dynamic layout.
In this post, we are going to talk about the WooCommerce shortcodes available in its core and listed in its official documentation, although I am going to try to explain them in Spanish and better 😉
If you are reading this post and you don’t know what a WordPress shortcode is, this article may interest you: https://raiolanetworks.es/blog/shortcodes/
WooCommerce Page Shortcodes
These official shortcodes are used for full pages. Although in some cases they can be used with a sidebar or similar, these WooCommerce shortcodes are designed to configure pages.
WooCommerce cart shortcode
We start with the simplest.
The page of the website where you want the cart to appear must have the following shortcode:
WooCommerce Page Shortcodes
These official shortcodes are used for full pages. Although in some cases they can be used with a sidebar or similar, these WooCommerce shortcodes are designed to configure pages.
WooCommerce cart shortcode
We start with the simplest.
The page of the website where you want the cart to appear must have the following shortcode:
This is for a full-page, that is, it is not designed to put the cart in an area of a page, but to be inserted in a full page of the website.
Checkout shortcode or end sale on WooCommerce
Another very simple shortcode, designed to insert the checkout or checkout page on a specific page:
As in the previous case, this shortcode can only be used on one page, the checkout page that we have previously configured or must configure in the WooCommerce settings.
WooCommerce “My Account” Shortcode
This shortcode allows us to display the My Account page. Like the previous ones, this is a page shortcode, not a block one.
On the other hand, this is the first shortcode that has arguments.
Note that this shortcode takes the current user ID and displays its data, so when the user is unauthenticated it can’t work.
Order tracking shortcode
For a long time, WooCommerce has had a tool so that the user can track an order placed by entering their order number.
To embed it on this page, we just have to use this shortcode:
This shortcode is for a page, like the previous ones, although in my experience it can be used on some other sites.
WooCommerce Product Shortcodes
These shortcodes are for displaying products on the front end of the online store. They have the advantage that they are highly customizable, and can be used both to display specific products and to display a list of products with certain characteristics.
Woocommerce product base shortcode is really simple, as you can see, but we can parameterize it.
An example of a product shortcode in WooCommerce is this:
What would appear on the front-end of the web would be this:
The appearance depends on the theme you use.
This is just an example and the parameters you can use for the product shortcode are these:
- limit: Limit of products to display. If you want to show all products, you must put “-1”.
- columns: This is only visual, they are the columns in which the products will be displayed.
- paginate: You can set “true” or “false” depending on the limit parameter.
- order by: It allows us to define the order of the products based on different parameters.
- SKU: Separated by commas, we can put the “SKU” of the specific products that we want to show.
- category: We can list, separated by commas, the categories of the products that we want to show.
- tag: Same as above, but for tags.
- order: We can define ASC or DESC depending on whether the order by order should be ascending or descending.
- class: This allows us to add a class to the front-end element to easily shape the appearance with CSS.
- on_sale: This allows us to list products on sale, but cannot be used with the “best_selling” or “top_rated” parameters.
- best_selling: If we put “true”, it shows the best selling products. The limit is set by the “limit” parameter.
- top_rated: If we put “true”, it shows the best-rated products. The limit is set by the “limit” parameter.
- attribute: It allows us to make a list with the products related to a certain product attribute.
- terms: Allows us to display the products related to the value of an attribute.
- terms_operator: This allows us to use a series of operators to compare attribute values.
- tag_operator: This allows us to use a series of operators to compare tag values.
- visibility: This allows us to list products based on their visibility settings.
- category: This allows us to display the products of a certain category.
- tag: It allows us to show the products of a certain tag.
- cat_operator: This allows us to use operators to compare categories.
- ids: Allows us to list, with commas, post IDs related to products that we want to display on the front-end with the shortcode.
- SKU: Same as IDs but with product SKUs.
The subject of shortcode parameters may seem complex, but it really just takes getting used to.
When there were no page builders or visual layouts in WordPress, we wrapped everything with shortcodes that allowed us to get the data in the frontend easily, although later we had to format it with CSS in most cases. Now, all that has been greatly simplified.
Category shortcodes in WooCommerce
There are two category shortcodes in WooCommerce and each one has a different use.
On the one hand, if you want to display a list of products from a specific category, you can use this shortcode:
On the other hand, if you want to display a list of categories from your WooCommerce online store, you simply have to use the following shortcode:
In either case, they are shortcodes with parameters. These are the parameters that you can use in these two WooCommerce shortcodes:
- ids: We can list the categories whose ID matches these. We can put them separated by commas.
- limit: This allows you to specify the limit of categories that will be displayed when inserting the shortcode.
- columns: This allows us to tell the shortcode how many columns will appear visually.
- hide_empty: This allows us to hide empty categories. We must put “1” to activate it and “0” to deactivate it.
- parent: This allows us to show the child categories of a parent category, whose ID we must specify.
- order by: This allows us to order the categories that come out with the shortcode based on their name, slug, id, etc.
- order: We can put ASC or DESC to sort the results in ascending or descending by using the “order by” parameter.
And this is an example of using one of these shortcodes:
They are not difficult to use, but in some cases, you should keep in mind that the parameters are important to avoid unnecessary or irrelevant loads.
WooCommerce Product Page Shortcode
We can insert the product sheet of any product that we have added to our WooCommerce simply by using one of these two shortcodes:
As you can see, in one case we filter by ID and in the other, we filter by SKU, two indicators that are unique in the installation.
Although these shortcodes are not used much, there may be cases where you need to capture a product sheet in a certain place. Now… Beware of duplicate content, which is bad for SEO!
WooCommerce Related Products Shortcode
If we want to add a block of related products to a product layout, we can use the following shortcode:
It only has the following parameters:
- limit: This allows us to specify the limit of products that will be displayed with the shortcode.
- columns: We can specify the number of columns in which the products will be displayed when inserting the shortcode.
- order by: We can choose what will be used to order the products.
I leave you an example of the real use of this WooCommerce shortcode:
Of all the shortcodes that WooCommerce has, I think this is one of the ones I like the most to use in a real environment today. Many of the other shortcodes can be inserted in a different way, depending on the theme and visual builder. However, I like the WooCommerce “related products” system.
Shortcode de «Add to Cart URL» en WooCommerce
The “Add to cart” shortcode allows us to create an add to cart button with the product ID we want, that is, it even allows us to create personalized landings without necessarily being a complete product page.
It accepts some parameters, although normally the appearance of the button will depend a lot on the theme used.
This is an example of using this shortcode with its parameters:
The parameters accepted by the “Add to Cart” shortcode for WooCommerce are the following:
- id: Allows us to specify the ID of the product that we will add to the cart.
- style: We can specify some CSS between quotes, although the idea is to use a class.
- SKU: We can specify the SKU to identify the product that we add to the cart.
- show_price: We can show the price of the product that we are going to add to the cart. It is defined as “true” or “false”.
- class: We can specify a CSS class to give the button its visual appearance.
- quantity: We can specify the units of the product that we are going to add to the cart with the button inserted with the shortcode.
WooCommerce Notifications Shortcode
The WooCommerce notifications shortcode has a rather curious way of working and is ideal for use with page builders or visual layout designers.
What the shortcode does is that WooCommerce messages, such as “Product added to cart correctly”, appear in the web interface right where we put that shortcode.
The good thing about this shortcode is that you can put it anywhere you want, except in a popup or similar, since there is no trigger to execute it at the time it should.
This shortcode is very simple, it has no parameters of any kind and can be added to any page of the website, not just WooCommerce.
Shortcodes de WooCommerce con Elementor Pro
As I said before, shortcodes were used much more before when page builders like Elementor Pro didn’t exist.
The first-page builder that started to have widgets or blocks for WooCommerce was Visual Composer (now WP Bakery), but not at the beginning, but a few years after its launch someone developed a plugin with WooCommerce widgets for Visual Composer and things changed there.
Still, due to the way WooCommerce is built, when inserting a WooCommerce widget we find that the inserted layouts are almost always identical:
With version 3.6 of Elementor Pro, even more widgets for WooCommerce have been added than in 3.5. On the other hand, there are several very powerful plugins such as JetWoobuilder or WooLentor that allow us to visually shape our WooCommerce to offer our customers an incredible user experience.
The ideal in page builders is to use specific widgets and blocks, but in many cases, we can go a little further using the shortcodes explained in this article.
