Intermediate
How to create custom shortcodes on WooCommerce
Quick Answer
Create custom WooCommerce shortcodes by adding PHP functions to your theme's functions.php file or a custom plugin, then register them using WordPress's add_shortcode() function. These shortcodes can display products, categories, or custom WooCommerce data anywhere on your site.
Prerequisites
- WordPress admin access
- Basic PHP knowledge
- Active WooCommerce plugin
- Child theme or custom plugin setup
1
Access your theme's functions.php file
Navigate to Appearance > Theme Editor in your WordPress admin dashboard. Select your active theme and locate the
functions.php file. Alternatively, access it via FTP or cPanel file manager at /wp-content/themes/your-theme/functions.php. Always use a child theme to prevent losing customizations during theme updates.Tip
Create a backup of your functions.php file before making any changes to avoid breaking your site.
2
Create the shortcode function
Add your custom function at the bottom of functions.php file. Here's a basic structure:
function custom_woo_products_shortcode($atts) {
$atts = shortcode_atts(array(
'limit' => 4,
'category' => '',
'orderby' => 'date'
), $atts);
// Your WooCommerce query logic here
ob_start();
// Output your content
return ob_get_clean();
}Tip
Use ob_start() and ob_get_clean() to capture output and return it properly for shortcode display.
3
Register the shortcode
After creating your function, register it as a shortcode by adding this line below your function:
Replace
add_shortcode('custom_products', 'custom_woo_products_shortcode');Replace
custom_products with your desired shortcode name and custom_woo_products_shortcode with your function name. The shortcode name should be unique and descriptive.Tip
Choose shortcode names that are unlikely to conflict with other plugins or themes.
4
Build the WooCommerce query
Inside your function, create a WP_Query or use WooCommerce functions to retrieve products:
$args = array(
'post_type' => 'product',
'posts_per_page' => $atts['limit'],
'orderby' => $atts['orderby']
);
if (!empty($atts['category'])) {
$args['tax_query'] = array(
array(
'taxonomy' => 'product_cat',
'field' => 'slug',
'terms' => $atts['category']
)
);
}
$products = new WP_Query($args);Tip
Use WooCommerce's built-in product visibility settings by adding 'meta_query' => WC()->query->get_meta_query() to your args.
5
Create the output HTML
Build the HTML output for your shortcode within the ob_start() buffer:
if ($products->have_posts()) {
echo '';
while ($products->have_posts()) {
$products->the_post();
global $product;
echo '';
echo '' . get_the_title() . '
';
echo '' . $product->get_price_html() . '
';
echo '';
}
echo '';
wp_reset_postdata();
}Tip
Always use wp_reset_postdata() after custom WP_Query loops to restore global post data.
6
Add CSS styling
Navigate to Appearance > Customize > Additional CSS or add styles to your theme's style.css file:
.custom-woo-products {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 20px;
margin: 20px 0;
}
.product-item {
border: 1px solid #ddd;
padding: 15px;
text-align: center;
}Tip
Use CSS Grid or Flexbox for responsive product layouts that work across different screen sizes.
7
Test your shortcode
Create or edit a page/post and add your shortcode:
[custom_products limit="6" category="electronics" orderby="price"]. Click Preview or Update to see the results. Test different attribute combinations to ensure your shortcode works as expected. You can also use the shortcode in widgets or template files using do_shortcode().Tip
Enable WordPress debug mode to catch any PHP errors during testing by adding define('WP_DEBUG', true) to wp-config.php.
Troubleshooting
Shortcode displays code instead of output
Ensure you're using
return instead of echo in your shortcode function. Use ob_start() and ob_get_clean() to capture and return output properly.Products not displaying or showing wrong products
Check your WP_Query arguments and ensure product categories exist. Verify that products are published and in stock. Add
var_dump($products->found_posts) to debug query results.Fatal error or white screen after adding code
Check for PHP syntax errors in your functions.php file. Remove the recently added code via FTP or cPanel file manager. Enable WordPress debug mode to see specific error messages.
Shortcode attributes not working
Ensure you're using
shortcode_atts() to properly merge default and user-provided attributes. Check attribute names match exactly between the shortcode call and your function definition.Ready to get started with WooCommerce?
Put this tutorial into practice. Visit WooCommerce and follow the steps above.
Visit WooCommerce →