WooCom­merce with short­codes: Easy in­te­gra­tion into WordPress

Anyone who wants to sell products online needs a shop, either as a separate solution or docked to an existing website. The eCommerce tool WooCom­merce is one of the most popular shop solutions. It has been pro­grammed as a plugin for online shops in the CMS WordPress, and the basic version is free of charge. With these so-called short­codes, com­po­nents of WooCom­merce can easily be in­te­grat­ed into other elements of a website. We’ll show you some important short­codes, with tips on how to use them for your online business.

Basically, a shortcode is large sections of code in shorter form. Short­codes are pro­grammed as functions and are given a unique name. With these “short­codes”, defined com­po­nents or processes can be in­te­grat­ed into elements of a website without much pro­gram­ming knowledge. The structure of short­codes in WordPress is anchored in the CMS. They are written in square brackets. For example, to use the WordPress plugin “Re­spon­sive Lightbox & Gallery” to insert a gallery anywhere into an existing page or post:

The string “rl_gallery” is the actual shortcode, namely the place­hold­er for the in­struc­tion “put a gallery at this position on the page or in the post.” The “ID” defines which gallery is inserted from the existing ones. The form [shortcode attribute="123" argument="abc" … ] is used for all short­codes.

Another form of shortcode consists of the string

In the WooCom­merce shop system, short­codes are used to se­lec­tive­ly display shop content. Through the variety of ad­di­tion­al in­for­ma­tion in the in­di­vid­ual short­codes, many special images can be created to promote the sale of products from a shop. For example, these include com­po­nents on website pages with content such as “Customers who bought X also bought Y and Z,” “The best-selling device in this category,” or “Only 3 days left on this sale - get it quickly.” How this is im­ple­ment­ed in detail will be shown below using a small WooCom­merce sample shop.

For a practical use of WooCom­merce, pages with short­codes such as “My Account,” “Shopping Cart,” or “Checkout” are already created after in­stalling the plugin. If you open the “Shopping Cart” page in the dashboard, the visual editor shows the shortcode directly. A look in the text editor shows that this code is enclosed in hidden HTML code, which indicates that a shortcode is embedded. As such, the shortcode is also visible in the visual editor:

A first shortcode with arguments can already be used with this product ID. In order to add a product to a page or post using its in­di­vid­ual ID, you will use:

If several products are to be displayed, the IDs must be strung together, separated by commas:

The argument “ids” is always written in the plural, re­gard­less of whether one or more IDs are used. The placement of in­di­vid­ual products still tends to be an exception since several products together usually make more sense.

Other arguments can be used with the products shortcode:

The in­di­vid­ual arguments cause:

• limit: lim­i­ta­tion of the number of products shown
• orderby: different ways to sort the output, e.g., by ID, date, pop­u­lar­i­ty (if used in the shop), oc­cur­rence in posts, or randomly
• order: ascending or de­scend­ing sorting (ASC/DESC) of the selected orderby argument
• vis­i­bil­i­ty: specifies whether the products can be seen in the shop and in search results
• paginate: enables pag­i­na­tion for extensive product offerings. The ac­ti­va­tion attribute is “true.” The value “false” is preset.
• columns: the number of columns on the shop’s product page. An important attribute to keep pages clearly organized.

Further arguments such as “attribute,” “terms,” “category,” or “tag” help to select the product display with special criteria according to content. An important argument is the so-called SKU (Stock Keeping Unit), a term used in retail. This is a unique code that is assigned to a single product. The argument “sku” is also ap­plic­a­ble to WooCom­merce product short­codes. At the same time, the SKU is a tried and tested means of sys­tem­at­i­cal­ly managing all products.

Shortcode in a sample shop:

Use [product_category] for this task. A category is thus displayed col­lec­tive­ly, which has to be provided with comma-separated at­trib­ut­es, such as “ids” or “category.”

The shortcode [product_categories], in the plural form, lists all available cat­e­gories in the shop. This can be useful, for example, as an overview under a single product, in order to create further buying in­cen­tives.

What works with products can just as easily be im­ple­ment­ed with ad­di­tion­al content in the WooCom­merce universe. With this shortcode, you can integrate a single product as a page:

This can be ad­van­ta­geous, for example, if a related product is reviewed in a post, and you would like to offer a suitable product for sale without many detours.

If the product is described in a different way, the “Add to cart” function (in the il­lus­tra­tion to the right) can also be in­te­grat­ed into the desired WordPress page or post with this shortcode:

This section of the purchase process can therefore also be used anywhere on a website. The same applies to checkout, which is in­te­grat­ed using the shortcode [woocom­merce_checkout].

By using [woocom­merce_order_tracking], a customer can see the status of their order after logging in to the shop. To do so, they must enter their order details. This shortcode has no arguments.

All orders are listed on the “my account” page with the shortcode [woocom­merce_my_account]. The number of orders to be displayed can be limited. The value “-1” shows all orders.

To use your own short­codes in WordPress, you need to change the functions.php file. This is where you can define the desired short­codes with your own functions that you have pro­grammed yourself.

One pos­si­bil­i­ty could look like this. This was tested on an existing WordPress website without an error message:

In every page and every post where the defined shortcode [myshort­code] is used, the output “Hello, the owner is pro­gram­ming them­selves” appears as a headline.

You can avoid writing errors in the code of a WordPress website quite elegantly with plugins that produce short­codes. These generate com­plete­ly safe short­codes that are tested by the WordPress community, which can fulfill in­di­vid­ual tasks and can also be named in ac­cor­dance with your own re­quire­ments. We will briefly introduce three of them to you here.

This plugin helps you customize a WooCom­merce shop with more than 60 functions and short­codes. Beautiful shop and thank you pages can be set up in addition to the standard pages using these. Other options include re­strict­ing content, adapting to the General Data Pro­tec­tion Reg­u­la­tion, or security features. It is also possible to send messages after a defined number of orders. This plugin doesn’t work alone. It is tied to a WooCom­merce in­stal­la­tion.

The WooCom­merce shortcode plugin Shortcode Ultimate enables more than 50 short­codes, including a live preview. The plugin works with Gutenberg and is also quite re­spon­sive. The developer promises that it will work with any theme. There is also a paid, premium version (no sub­scrip­tion).

This plugin allows for the design of processes that are saved in a clear list, similar to the posts or pages in WordPress. The shortcode is given a name (similar to the heading in a post) and is then available in the list of short­codes that can be inserted. Short­codes them­selves always start as follows:

Content can be HTML, JavaScript, or CSS. Ad­di­tion­al pa­ra­me­ters expand the pos­si­bil­i­ties of this WooCom­merce shortcode plugin. Editing can be done as code, as text, or in visual mode, making it a plugin with many pos­si­bil­i­ties.