No Results Found 🙁
I love Divi and especially the new Theme Builder, but it has some issues. But hey, it gives content producers like me something to do! The big issue I encountered recently on a client site was the “No results found” message. But here’s the thing — I was using the Divi Theme builder, and this was a template made with Divi, not a regular page.
What Is The Problem
The problem first showed up when I realized the Divi layout that I so tirelessly created in the Theme Builder completely disappeared when I loaded a category that did not have posts yet. I think this is poor, and I’ll explain why. I would understand if the blog module disappeared, but what about the row and section that was so nicely styled? The entire layout disappeared and was replaced by the boring “no results found” message.
It feels like this should be included in the template somehow because after all, this is a theme builder. But hey, let’s edit the theme instead! I’m going to show you how to use a Divi Layout that you can design however you want instead of the boring “no results found” message.
▶️ Please watch the video above to get all the exciting details! 👆
1. Create Your Layout In Divi
Save a Section To the Divi Library
We’ll start with the easy part of creating our “no-results” message by building the layout with the Divi Builder. You can choose to do this on any page that you have handy or directly in the Divi Library. Just be sure to use a blue section.
What To Include
You will want to be careful what you say here. In my example, I knew it was going to be a category of dogs that were either available or adapted. If the puppies were all adopted, there would be none to show on the “Adopted” category page. But if the puppies were all Available, and someone sent to the “Available” category, they would also see this same message. So I had to keep it generic, but yet relevant. I included a headline, explainer text, and two buttons.
2. Use A Divi Child Theme
The only way we can create a no results message with a Divi layout is by using a child theme.
If you do not have a child theme installed yet then I suggest downloading and using our free Divi child theme.
If you already have a child theme installed then you can proceed.
Once you have a child theme installed, go to the place where you prefer to edit the child theme files, whether that be in cpanel, ftp, or in the File Manager plugin (you can’t do this first step from Appearance>Theme Editor because you need to add a folder first).
NOTE: Be sure to follow along with the video as this tutorial is rather technical!
Create a folder called “includes” in the same directory as your functions.php.
Inside that folder, create a new file called “no-results.php.” Open it in a code editor and paste the following snippet below into the no-results.php file of the child theme.
<?php echo do_shortcode('[et_pb_section global_module="1234"][/et_pb_section]'); ?>
3. Get The Divi Layout ID
The last step is to link the Divi Layout you created to the code that you just pasted into your child theme. You may notice the “1234” in the code snippet above. You need to edit those numbers to match the idea of the Divi section saved in your Divi Library.
It’s easy to find the section ID. Just go into edit mode, and you will see a series of letters and numbers in the URL. Again, it may be helpful to follow along with the video.
Go ahead and replace the “1234” with those numbers in the no-results.php file. Once you save the file, you are all finished and you can go test this out. The easiest way to test it is to go to your Posts>Categories and click to view one of the categories that does not have any posts in it yet, or just make a quick sample category to test it.
Do It With Our Divi Search Helper!
Make life easier and use the Divi Search Helper instead! This innovative plugin upgrades the existing Divi Search module with all the missing features provided by our addon with new design settings, advanced search criteria options, and improved search result pages.
Apologies for sending this twice, I didn’t see a confirmation that it was received.
This works great, the only issue I’m having is that it doesn’t display on desktop. It will display on mobile and tablet. I’m using WooCommerce and I’ve ensured the visibility settings are correct.
Here’s a one-time link to access my dev site – https://1ty.me/Tww4yAR
Thank you for any help you could provide!
Hi Abby!
I have checked the above link and it seems the site is not accessible now. Can you please provide a new link? Apologies for the delay!
Great help! Just one problem. My text block and background show up but none of the padding or text styling is applied. I can’t figure out what’s blocking it.
Hi Jim
Could you share the URL of your site so I can investigate it further?
SOLVED: The issue was a plugin conflict. Thanks for your great teaching videos. This one works like a charm!
Great that your issue is solved.
You’re welcome! 🙂