Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
by
FREELessons:13Length:1.6 hours

Next lesson playing in 5 seconds

Cancel
  • Overview
  • Transcript

5.3 Improving Search Results

Improve the results visitors get when they make an unsuccessful search in your store by duplicating a WooCommerce template file in your theme.

Related Links

5.3 Improving Search Results

Hello, and welcome back to this Tuts Plus course on WooCommerce theme development. In this part of the course, we're gonna look at the search page and we're gonna customize it so that it's more helpful for people who return an empty search. So here you can see a search that I've done in my shop. It's a search for ninja. There are lots of products with the name ninja in them. So it's a nice search with lots and lots of results. But what if I searched for something that isn't in my store? Well, let's see what happens. So I type in a search in my search box. And here you are. I get search results for Henry, there's nothing called Henry in my store, and no products were found at matching your selection. Now I don't think that's very helpful. I think people could be given a bit more to help them search again and to find what they're looking for. So let's have a look at the template that WooCommerce uses to create this search form. Now the template file being used for the search is the archive product php template which is the same one we used for the homepage and for the product category archives. But what it does instead of outputting a normal loop is it uses this loop here. Loop no products found. So it's a specific include file that is used if no products are found. Now let's find it in the WooCommerce file structure. So, it'll be found in templates and then in loop. And here it is, no products found. I'll open it up here, and you can see what it includes. So, all you've got here is a paragraph that says, no products are found matching your selection. Which isn't particularly helpful. So, what we wanna do here is actually copy this template file into our theme and add some new content to it. So, what you do is you create a new file in your theme. Now, let me show you where that will be created. So, in your theme, you create a folder called WooCommerce, and then a folder called loop. And in there, you create a file called noproductsfound.php, which is the exact same name as the file in the file in Woocommerce. And what Woocommerce will do is it'll automatically override its own template file with yours that's in your theme. So here's my new empty PHP file. What I'm gonna do is take all of the content from the Woocommerce file, copy it. I'm gonna close that file so I don't get confused and start working on the wrong file. And I'll paste it into my own file, and then save that. And at the moment, nothing will be changed. So what I'm gonna do, is delete the paragraph that's already in there, and type some new content. So firstly, I'm gonna put a nice apology in heading. [BLANK_AUDIO] And then after that, I'm gonna encourage people to have another go. [BLANK_AUDIO] So that's encouraging people to search again. But what I then need to do is include another search form. Now luckily, WooCommerce gives us a function we can use to do that. [SOUND] What that will do is it will output product search form just like the one that's in the widget in my header. And then underneath that in case people don't think they can search again or that will be any help to them I'm going to include a link to the main departments. [NOISE]. Now, what I want to do now is create some links to the departments. A bit like what we have here. What I actually want to do is move these images down below the content. Now, I can use the function that I already created in my Functions file, which we can find here, Tuts Plus' main shop before content. Now, the problem is, if I add that again all we'll get is a duplication. So, what I'm actually gonna do is make some changes to this function. So the function that is hooked to the Woocommerce before main content hook actually calls another function, which we'll then use in our new template file. Bear with me a moment, this will make sense as you do it. So I'm gonna change the name of my function. [BLANK_AUDIO] Okay. And then what I'm gonna do. Before I change anything with my action here, is I'm going to create another function, and that will have the name I originally used. Which is the Tuts Plus main shop before content. Now it's in this case that I want to check if we're in the shop page. So I'm going to take this here. Take it out and put it in my new function. [NOISE] Okay. I just need to do a bit of tidying up here. [BLANK_AUDIO] Right. So I now have a function called Tuts Plus product cat links which is what outputs those links to the product categories. And I have an empty function called Tuts Plus main shop before content which is hooked to the Woocommerce before main content action hook. Now that doesn't do anything at the moment. So what I'll do is I'll copy the name of this function up here. >> [NOISE]. >> And insert it there. So what that will do is exactly the same, but just with a slightly different structure. So let's have a look at how the site looks now. It actually looks exactly the same. So what I want to do is get rid of these images on a search page. And add them here using my template. So I go back to my functions file and I add another conditional tag, checking that we're not on a search page. I save that and then that won't output those images. And then I take this function and I paste it into my no products found template file. And now I'll check my site again. So this is looking a lot better. You can see that I've got my heading, saying, sorry, we couldn't find anything matching your search, the option to do another search, and to check other departments. And it's all in a much more logical order. But it doesn't look too tidy at the moment, so let's add some styling. Going back into the theme files, I'm going to add some styling to my style sheet. And I'm going to put this in the content section. [BLANK_AUDIO] So I'm going to style that form, and also the content, and give them some margins. [NOISE] [NOISE] Let's save that. And check the site again. That's looking a lot better. So it's nicely laid out, it's easy to use, and it encourages people to either search or to check out the departments. So that's how you customize a search page. What we've done here is we've taken a template file provided by Woocommerce, we've copied it in the correct file structure in our theme. We've edited it, and we've saved it. And what that does is overrides the template file provided by Woocommerce. So that's it for this part. In the next part of the series we'll be moving on to look at the checkout pages and how we can customize those. See you next time and thanks for watching.

Back to the top