What are WooCommerce Products short codes?
Shortcodes are not only available on WooCommerce, but throughout the WordPress world. Shortcodes are codes in square brackets that can be used in the WordPress editor. By the way, the type of post, i.e. page, article and the like, does not play a role in any way. Shortcodes can also be used in the theme code.
WooCommerce shortcodes, which are standard for each installation, include the following:
- Audio
- Accompanying signature
- Embed
- Gallery
- Playlists
- VIDEO
Programmers for WordPress can also programme their own features, so you can use them over and over again in different places. This is very practical, as they work dynamically. The design and programming code is outsourced and, compared to some other systems, WooCommerce does not require template programming to be able to use the popular WordPress Woocommerce shortcodes.
A brief overview of important WooCommerce short codes
These 4 short numbers are a bit special because they correspond to the 4 pages that WooCommerce creates during installation. These short numbers are usually the only ones on each of these pages:
- [woocommerce_cart] – Displays the Carrito page.
- [woocommerce_checkout] – Displays the payment page.
- [woocommerce_order_tracking] – Displays order status.
- [woocommerce_my_account] – Show my account page.
Because WooCommerce automatically generates these pages, it’s most likely that we won’t have to use them in person, because once they’re created we never have to touch them again.
Convenient short codes for WooCommerce
Show the latest products
If you want to display a list of the latest products in your shop on any subpage, you can use the shortcode below. This can be adjusted according to the number of products displayed, the number of products per row/column and sorting.
[recent_products per_page=”12″ columns=”4″ orderby=”date”]
Display one product
If you want to display a single product – for example in an article – the following short number is excellent, with which the product is displayed via its identifier. In our example, the product id is 123, which of course must be replaced by the corresponding product id.
[product id=”123″]
Show products in category
The following shortcode can be used to display all products of a particular product category on a subpage. This shortcode can also be influenced by various parameters in its presentation. The desired category is defined using the value category.
[product_category category=”hosen”]
Show product categories
The following shortcode can be used to display a list of all product categories. You can distinguish whether only the main categories or the subcategories are shown. The normal product presentation can also be influenced in terms of order, quantity and sorting, as with the two short codes mentioned above. With the value “parent=”0” only the main categories are displayed.
[product_categories number=”12″ parent=”0″]
Products shown
All products which are supplied with an offer price can be specified with the following short code. This shortcode is suitable, for example, if you want to create a subpage with all shortened articles. Again, the display can be defined again in terms of quantity per line and per page.
[sale_products per_page=”12″]
Spend the most saleable products
The short code below shows the best selling products in the whole shop. The number of products displayed on the page and the number of columns can also be set here.
[best_selling_products per_page=”12″]
Show top rated products
The products with the best customer reviews are released by the following short code.
[top_rated_products per_page=”12″]
Show similar products
The short code “related_products” shows products similar to the product. Similar products are defined by categories and tags. Special feature here: This shortcode should be used in the product details page.
[related_products]
Show multiple related products
The (currently) last short number in our list shows all products with a certain property. The value of “attributes” defines the property that the products should have to display. “Filter” refers to the value of the property that products should have to display.
[product_attribute attribute=’color’ filter=’black’]
How do I create my own shortcodes?
Simple shortcodes
Shortcode functions can be added to the plugin code or to your theme’s functions.php file. If it’s the latter, I’d recommend creating a separate shortcodes.php file and then adding include(‘shortcodes.php’); to functions.php.
Here’s a simple “Hello World” example:
function HelloWorldShortcode() { return ‘<p>Hello World!</p>’; } add_shortcode(‘helloworld’, ‘HelloWorldShortcode’);
Parametrized shortcodes
The following shortcode function generates a site map of the page hierarchy. Three optional parameters can be passed: the title, the resulting ul list identifier, and a depth value indicating the number of levels of page navigation.
function GenerateSitemap($params = array()) { // default parameters extract(shortcode_atts(array( ‘title’ => ‘Site map’, ‘id’ => ‘sitemap’, ‘depth’ => 2 ), $params)); // create sitemap $sitemap = wp_list_pages(“title_li=&depth=$depth&sort_column=menu_order&echo=0″); if ($sitemap != ”) { $sitemap = ($title == ” ? ” : “<h2>$title</h2>”) . ‘<ul’ . ($id == ” ? ” : ” id=”$id””) . “>$sitemap</ul>”; } return $sitemap; } add_shortcode(‘sitemap’, ‘GenerateSitemap’);
A custom sitemap can be added to any page using [sitemap id=’deepmap’,depth=5] for example [sitemap id=’deepmap’,depth=5] .
BB code shortcode
The last method of adding shortcodes uses the [bbcode] syntax of BB code [/ bbcode]:
function StyleText($params, $content = null) { // default parameters extract(shortcode_atts(array( ‘style’ => ” ), $params)); return ‘<span’ . ($style == ” ? ” : ” style=”$style””) . “>$content</span>”; } add_shortcode(‘format’,’StyleText’);
This feature allows the author to embed CSS styles into their article, such as [format style=”font-size:1.5em;colour:#f00;”>Important![/format] . This might not be such a good idea!
Useful plugins for shortcodes
Shortcodes Ultimate
Shortcodes Ultimate is an extensive collection of various visual and functional elements that you can use in page editor, text widgets and even theme files. Using Shortcodes Ultimate you can easily create tabs, buttons, blocks, sliders and carousels, insert adaptive videos and much, much more.
FEATURES
- 50+ beautiful shortcodes
- 1-click shortcode insertion with preview
- Works with Gutenberg
- Works with any theme
- Modern responsive design
- Documentation
- CSS editor
- Special widget
- Ready for translation
- RTL support
- Developer friendly
WP Shortcode Pro
WP Shortcode Pro is one of the most powerful Shortcode plugins for WordPress. It can help you create great-looking posts and pages filled with preview options using shortcodes. You’ll notice that the results will be comparable to the page linker, if not better.
With the potential to create full-fledged web pages, you can easily guess that the plugin is packed with many different shortcode options. Numerically, you get access to over 80 different types of shortcodes to help you add design elements or functional modules.
On top of that, you also get a lot of other features. First, there is the possibility to create your own shortcodes and to overwrite existing ones. Everything is very well optimized to ensure high loading speeds. In addition, all shortcodes are coded so that they are responsive from the start, so they scale perfectly no matter which website they are viewed from.
Fruitful Shortcodes
If you’re new to WordPress and this shortcode business, then you should consider Fruitful Shortcodes.
This WordPress shortcode plugin has by far one of the most intuitive and easy-to-use UIs of all the plugins on this list. Even though you’re new to the game, the plugin will help you add elements like columns and rows, tabs, buttons and even a progress bar to your site in a few clicks.
You get access to 15 short codes, all of which are responsive and feature a modern design. There’s also a live preview function that lets you visualise how the shortcodes will integrate into your content.