If you’re managing an online store with WooCommerce, you might find yourself needing to tweak the default behaviors of product listings to better suit your business needs. WooCommerce shortcodes are incredibly flexible, but you might not know how to customize them right off the bat. In this blog post, we’ll explore how to modify the WooCommerce product shortcode to achieve more tailored results. We’ll specifically look at altering the display of recent products and adjusting which products appear based on stock status.
1. Showing Only In-Stock Products in Recent Products
By default, WooCommerce shows all recent products, regardless of their stock status. However, it’s often more practical to display only those products that are in stock. Here’s how you can modify the shortcode to achieve this:
/*
* Snippet: How to modify the WooCommerce product shortcode 2024
* Author: John Cook
* URL: https://wcsuccessacademy.com/?844
* Tested with WooCommerce 8.8.2
* "Show only in stock products"
*/
add_filter( 'woocommerce_shortcode_products_query', 'wcsuccess_shortcode_out_of_stock', 10, 2)
function wcsuccess_shortcode_out_of_stock( $query_args, $atts, $loop_name ){
if( $loop_name == 'recent_products' ){
$query_args['meta_query'] = array( array(
'key' => '_stock_status',
'value' => 'outofstock',
'compare' => 'NOT LIKE',
) );
}
return $query_args;
}In the above code, we hook into woocommerce_shortcode_products_query and define a function wcsuccess_shortcode_out_of_stock that modifies the query arguments. If the shortcode loop is for recent products, we adjust the meta_query to exclude products that are out of stock. This ensures that only in-stock items are shown under recent products.
2. Limiting Recent Products Based on Date
Sometimes, you might want to limit the display of recent products to those added within a specific time frame, say the last week. This can make your listings more relevant and timely. Here’s the code to do just that:
/*
* Snippet: How to modify the WooCommerce product shortcode 2024
* Author: John Cook
* URL: https://wcsuccessacademy.com/?844
* Tested with WooCommerce 8.8.2
* "Limit products based on date"
*/
add_filter( 'woocommerce_shortcode_products_query', 'wcsuccess_recent_products_shortcode_args', 10, 2 );
function wcsuccess_recent_products_shortcode_args( $args, $atts ){
$args['date_query'] = array(
array(
'after' => '7 days ago',
'inclusive' => true,
),
);
return $args;
}
With this modification, the woocommerce_shortcode_products_query filter is again utilized. The function wcsuccess_recent_products_shortcode_args sets a date_query that filters products to those added within the last 7 days.
3. Here’s how you can modify the WooCommerce product shortcode to sort products by price in ascending order:
/*
* Snippet: How to modify the WooCommerce product shortcode 2024
* Author: John Cook
* URL: https://wcsuccessacademy.com/?844
* Tested with WooCommerce 8.8.2
* "List products by ascending order"
*/
add_filter('woocommerce_shortcode_products_query', 'wcsuccess_sort_products_by_price', 10, 2);
function wcsuccess_sort_products_by_price($query_args, $atts){
// Check if the sorting should apply to a specific shortcode or all
if(isset($atts['orderby']) && $atts['orderby'] === 'price'){
$query_args['orderby'] = 'meta_value_num';
$query_args['order'] = 'ASC';
$query_args['meta_key'] = '_price';
}
return $query_args;
}
[products orderby="price" limit="10"]In this snippet, we hook into the woocommerce_shortcode_products_query filter to modify the query arguments for product retrieval. The function wcsuccess_sort_products_by_price checks if the orderby attribute in the shortcode is set to ‘price’. If so, it sets the orderby parameter to ‘meta_value_num’ (which is used for numeric meta data), sets the order to ‘ASC’ for ascending sort, and specifies the meta key as ‘_price’ to ensure the products are sorted based on their price.
This customization allows users to add a shortcode like [products orderby="price"] on their page, which will then display products sorted by their price from lowest to highest. It’s a great way to enhance the shopping experience, especially in scenarios where price comparison plays a critical role in customer decisions.
Conclusion
Customizing WooCommerce shortcodes can significantly enhance the shopping experience on your website. By tweaking how and which products are displayed, you can ensure that your customers see the most relevant, attractive options available, boosting both user satisfaction and sales. Remember, while the provided code snippets should work out of the box, always backup your site before making any changes to ensure you can revert if anything goes wrong.
Happy coding, and may your online store thrive!
I have been working with WordPress and WooCommerce since 2012 and have developed a deep knowledge of the content management system. Since 2012, I have developed several plugins and designed dozens of websites utilising different frameworks, CMS’s and programming languages. I am proficient in PHP, Python, Java, C, C++, R and JavaScript with limited experience in Go, Kotlin and Swift.
Educationally, I have a Master’s degree in cyber security a Bachelor’s (Hons, First Class) in Applied Research and a Graduate Certificate in Data Science. I’m currently undertaking PhD studies investigating IoT cybersecurity. I recently graduated with First Class Honours and Masters of Information Technology, receiving the Executive Dean’s Award for studies undertaken in the 2021 and 2022 academic years. I have worked in the information technology industry for the past 11 years primarily as a software/web developer specific to design, optimisation, network management and security. My research interests are in the areas of Internet of Things (IoT), 5G and Beyond Networks, information security for wireless networks and software development.
Google Scholar ID: https://scholar.google.com.au/citations?user=0KvpwNEAAAAJ&hl=en
ORCID: https://orcid.org/0000-0001-8113-1296
Stay In Touch
