Upgrade your WooCommerce “no products found” page

The product search functionality offered by WooCommerce is a great way for shop customers to look for the products they want to buy. However the search page is pretty bland when no products are found. In today’s tutorial we’ll be adding some products we want to promote on the empty search results page, and also a contact form for customers to get in touch with the store owners regarding products not available for sale.

Install and activate a child theme

The first step on our process here is to create and install a child theme. If you are using one of our themes you can easily grab its child theme from our downloads section. If not, you can read our beginner’s guide on child themes to create your own. This step is essential in order to preserve our changes throughout theme updates.

Show featured products

We will be using the woocommerce_no_products_found hook to display our featured products just below the no products found message on the product search results page.

add_action( 'woocommerce_no_products_found', 'cssigniter_show_featured_on_no_products_found', 15 );
function cssigniter_show_featured_on_no_products_found() {
	?>
	<div class="search-featured-wrapper">
		<h3><?php esc_html_e( 'Featured Products', 'your-text-domain' ); ?></h3>
		<?php echo do_shortcode( '[products limit="6" columns="3" visibility="featured" orderby="rand"]'); ?>
	</div>
	<?php
}

To build and display our product grid we will be using the shortcodes bundled with WooCommerce, you can read more about them here and build a different grid to display if you so desire.

Show a contact form

In this example we will give our customers the ability to contact us regarding a product they were looking for but did not find. We have created a simple form using the Contact Form 7 plugin and we will be using its shortcode to display it in the page.

add_action( 'woocommerce_no_products_found', 'cssigniter_show_contact_on_no_products_found', 15 );
function cssigniter_show_contact_on_no_products_found() {
	?>
	<div class="search-contact-wrapper">
		<h3><?php esc_html_e( 'Contact us', 'your-text-domain' ); ?></h3>
		<p><?php esc_html_e( 'We are sorry to hear the product you were looking for is not available, please contact us to sort this out.', 'your-text-domain' ); ?></p>
		<?php echo do_shortcode( '[contact-form-7 id="657" title="Product not found"]'); ?>
	</div>
	<?php
}

Naturally you can customize the form to your needs by adding or removing fields in order to get all the information you need from your customers.

Wrapping up

Making the empty search results page a bit more interesting to our clients will help increase their engagement on our shop and perhaps lead them to more purchases. Did you find this guide useful? Let us know in the comments below.