Listen to the automated audio version of this article:
There are articles about using WooCommerche shortcodes, but very few help with adding custom shortcodes to WooCommerce products. Specifically, to the product's short description. So, of course, I had to create a solution myself.
If you're lucky, my first solution will already help you achieve that. But, if you, like me, use a custom theme that modified the default WooCommerce structure… Well, you're in for a ride.
It wouldn't be the first time I have to write my own PHP code to fix something in WordPress. For example, one of my popular posts here is about a very specific fix to a database bloat that almost killed this exact blog. Thankfully, this blog is hosted on Hostinger, which makes it very easy to monitor issues and resolve them.
I also like to research the ‘why' of a problem. It's how I found the right solution to Photoshop's Liquify tool lag or how to correctly sharpen Fujifilm RAW files in Lightroom.
The great thing is that my solutions are easy, simply because I'm not a particularly skilled developer. So, it shouldn't be too hard for anyone to implement them.
Why Adding Custom Shortcodes to WooCommerce Products?
I assume that if you're here, you already know what shortcodes are in the WordPress ecosystem. In their simplest form, custom shortcodes are snippets of code you can insert into your WordPress posts or pages to display dynamic content or functionality. This makes it easier to add things like buttons, forms, or pricing tables without writing complex code. Many plugins can create more complex ones you can recall within your posts or pages.
WooCommerce itself has a few shortcodes you can use. For example, you can use [ woocommerce_cart ] to display the cart page. Note that the shortcode shouldn't have spaces inside the brackets, but if I wrote it correctly here, it would automatically convert to its content.
But WooCommerce does not allow custom shortcodes by default, whether they're your creations or from other plugins. They say it is a safety measure to prevent page breaks, which is understandable. Not everyone knows how to recover from a critical error that bricks their site or has backups, so it's better to be safe than sorry.
But if you have all the safety nets in place (database backups, etc.) and if you are really keen on adding specific features to your WooCommerce pages, there are solutions. In this specific case, I'm going to tell you exactly how you can start adding custom shortcodes to WooCommerce products.
In my specific case, I wanted to add a form to let potential customers join a waiting list for sold-out products. There are plugins that do exactly that, but I much prefer to write my own solutions. Plugins tend to cater for every possible scenario, so they often add too many unnecessary lines of code to the database. That's why I go DIY.
Before We Begin…
The next steps involve tinkering with the theme templates. This is not uncommon but can be annoying if you do not take the necessary precautions. This is mainly because any change you make to the theme will be overwritten when the theme updates, so you will have to start again.
That's why I always create child themes.
Using a child theme in WordPress lets you customize your site's design and features without messing up the core theme. This way, you can safely update the main theme without losing your changes, and it keeps your customisations organised for easier maintenance.
You can do this manually or by using a dedicated plugin. There are, again, plenty of articles that can walk you through the process.
So, for the rest of this post, please remember that I am updating a child theme. Of course, it all still works if you modify the main theme's templates, but I would not recommend it.
First Solution, The One-Liner
That's right. To implement the first solution, all you have to do is add one line of code. Depending on your configuration, you can add this code to functions.php in your main theme or in your child theme or write it as an extra snippet in a plugin. For example, FluentSnippets. I'm not affiliated with it; I prefer to use this one because it doesn't write the snippets in the database.
The single line is as follows:
// Enable shortcodes in WooCommerce short description
add_filter('woocommerce_short_description', 'do_shortcode');OK, it's two lines. I'm leaving the comment in the code because it makes it easier to search if I ever need to. But all you really need is to add the shortcode functionality to the hook you need—in this case, the one for the short description of the products. In fact, it is exactly the same code if you want to add shortcode functionality to the WordPress widgets:
add_filter( 'widget_text', 'do_shortcode' );It really is this simple, and it's the only solution you seem to find online. From the moment you add this line, you can use shortcodes in places you were not supposed to (by default). If you use a standard theme or one with few customisations, you should already be good to go.
Unfortunately, this wasn't my case. After implementing this simple solution, nothing changed.
More Work Needed
At this point, I still wasn't sure why it didn't work. The code was, of course, correct, so maybe there was a conflict with a theme or a plugin. The way to troubleshoot WordPress issues is often to deactivate everything and work your way back, reactivating everything little by little until you find the conflicting culprit. But I didn't want to do that just yet. The blog was having a viral moment, thanks to my post about AI at Meta, so I didn't want to go into maintenance mode and lose visitors.
Second Solution, Adding Options
You can still improve the first solution to make it more effective. For example, you can add the shortcode capability to other hooks. By ‘enhancing' the previous PHP snippet, you can ensure shortcodes are processed in both the short description and other places if needed.
// Add this code to your theme's functions.php file or a custom plugin
// Enable shortcodes in WooCommerce short description
add_filter('woocommerce_short_description', 'do_shortcode', 20);
// Enable shortcodes in WooCommerce product content
add_filter('the_content', 'do_shortcode', 20);
// Force shortcodes to be processed in excerpts and other places
add_filter('get_the_excerpt', 'do_shortcode', 20);
add_filter('widget_text', 'do_shortcode', 20);
// Ensure shortcodes are processed in WooCommerce product excerpts
add_filter('woocommerce_product_get_short_description', 'do_shortcode', 20);
add_filter('woocommerce_product_get_description', 'do_shortcode', 20);OK, this is probably more of a workaround; if the shortcodes don't work in the short description, try somewhere else.
True, but there is something else in this code: that little number 20… Using add_filter with a higher priority (20) ensures the do_shortcode function is applied after other filters have had a chance to run. If something else is tied to that hook, this should take priority over it.
Hopefully, this improved snippet works for you. As you can imagine, it didn't for me.
However, by adding the shortcode functionality to other elements of the page, I was able to verify that everything was working fine except for the short description. I still have no way of adding custom shortcodes to WooCommerce products where I want to, but now I know where to look.
content-single-product.php
Like WordPress, WooCommerce is tied together with several PHP templates. Theme creators often overwrite these templates and add their own. The place to look for adding custom shortcodes to WooCommerce products' short descriptions is, then, in your theme's content-single-product.php template. It is likely in a /woocommerce folder, but you will have to find yourself where yours is.
So, the next step is to review your theme’s content-single-product.php template or other relevant templates to ensure they are using the_excerpt() or applying the short description filter. Open your theme’s template and verify the short description is being called correctly:
<?php
/**
* Hook: woocommerce_single_product_summary.
*
* @hooked woocommerce_template_single_excerpt - 20
*/
do_action('woocommerce_single_product_summary');When you find this line, you can add a debug code under it, directly forcing the processing of shortcodes to check what is going on:
// Enable shortcodes in WooCommerce short description
add_filter('woocommerce_short_description', function($content) {
error_log('Short Description before: ' . print_r($content, true)); // Debug statement
$processed_content = do_shortcode($content);
error_log('Short Description after: ' . print_r($processed_content, true)); // Debug statement
return $processed_content;
}, 20);Once executed, you can check the error log in WordPress to see what is happening with your code.
I wish I could tell you what this debug code did for me… However, I found that my theme's content-single-product.php did not contain woocommerce_single_product_summary.
I was a bit lost at this point.
Oh My, What Now?
If content-single-product.php does not contain the woocommerce_single_product_summary action hook, it indicates that your theme may be handling the product page layout in a custom manner, potentially bypassing the default WooCommerce hooks.
In such cases, the short description might be displayed directly within the template without applying the usual filters.
Third Solution, In a Custom Template
In the specific case of my current theme, I found that the short description was referenced in a different file called short-description.php. At least the developers did not mess with the file naming.
So, there it was, in a single line:
<div class="woocommerce-product-details__short-description"><?php the_excerpt() ?></div>You can modify this very easily to add the shortcodes functionality:
<div class="woocommerce-product-details__short-description my-shortcode-wrapper">
<?php echo do_shortcode(get_the_excerpt()); ?>
</div>This ensures that any shortcodes in the short description are processed before being output. Notice that I have added a new CSS class, my-shortcode-wrapper, to stylise the container if needed.
I applied this change to a duplicate short-description.php template that I added to my child theme to overwrite the main one.
And it worked.
It took me about an hour, but it worked.
Not So Easy, Tiger
Yet, I am still troubleshooting. I thought that was the end of my problems, that I had found the solution to adding custom shortcodes to WooCommerce products. But as it sometimes happens, tinkering with the code generated another issue.
Upon publishing the product page, I noticed that the update stripped out all the HTML in the short description. This made the text appear in a single paragraph.
It turns out that the_excerpt() function in WordPress strips out most HTML tags by default.
So…
Fourth Solution, Let's Just Rewrite It
If you have reached this paragraph because nothing still works for you either, I feel your pain. I thought I had made it, but no.
To be honest, I was a bit tired at this point. So, I copied the last bit of modified code and tried asking ChatGPT what to do with the stripped-out HTML. Fortunately, it came up with a working solution within a few exchanges.
To prevent the_excerpt() from stripping HTML tags, you can use get_the_excerpt() within a custom filter to allow specific HTML tags.
Step-by-Step Solution
Here comes the more comprehensive approach. It uses a combination of custom filters to ensure the short description retains its HTML tags and processes shortcodes.
- Remove WordPress' default the_excerpt filters: WordPress applies several filters to
the_excerpt, which can strip HTML tags. Remove these filters for WooCommerce short descriptions. - Use a custom filter: Create a custom filter to retain HTML tags and process shortcodes in the short description.
This is the final code for my rewritten short-description.php template in my child theme:
<?php
// STEP 1
function custom_woocommerce_short_description($post_excerpt) {
global $post;
if ( $post->post_type === 'product' ) {
// Remove default WordPress filters
remove_filter('the_excerpt', 'wpautop');
remove_filter('the_excerpt', 'wptexturize');
remove_filter('the_excerpt', 'convert_chars');
remove_filter('the_excerpt', 'trim_excerpt_more');
remove_filter('the_excerpt', 'wp_trim_excerpt');
// Allow specific HTML tags
$allowed_tags = '<p><a><strong><em><ul><ol><li><blockquote><br><h2><h3><h4><h5><h6><span><div><hr>';
$post_excerpt = wp_kses($post_excerpt, wp_kses_allowed_html('post') + array(
'p' => array(),
'a' => array('href' => array(), 'title' => array()),
'strong' => array(),
'em' => array(),
'ul' => array(),
'ol' => array(),
'li' => array(),
'blockquote' => array(),
'br' => array(),
'h2' => array(),
'h3' => array(),
'h4' => array(),
'h5' => array(),
'h6' => array(),
'span' => array('style' => array()),
'div' => array('class' => array(), 'style' => array()),
'hr' => array()
));
return do_shortcode($post_excerpt);
}
return $post_excerpt;
}
add_filter('the_excerpt', 'custom_woocommerce_short_description', 20);
?>
// STEP 2
<div class="woocommerce-product-details__short-description my-shortcode-wrapper">
<?php echo apply_filters('the_excerpt', get_post()->post_excerpt); ?>
</div>And I mean final. It works.
All I will have to do if I ever need to, is expand the allowed tags to accommodate more. For example, if I need to include some small text, I would include <small> into both $allowed_tags and wp_kses.
The great thing about using ChatGPT for this task is that it knew exactly what filters to remove within the_excerpt to make this work, saving me a lot of research. It gave me the working solution in seconds rather than another hour of my own searching and writing.
So, This is It.
I hope this is helpful to you. Adding custom shortcodes to WooCommerce products is now possible. Even if you want to use shortcodes in a place other than WooCommerce's short description, this may serve as a hint.
You know what? After all this coding, I need coffee.
If you find this article helpful, you could ‘buy me a coffee' by heading to Ko-fi, the donation platform. I will be forever grateful.
Thank you!
