Create Custom Search Results

[Nuera]

Hey there!

I’m trying to create a search results layout for a woocommerce shop that only displays products.

I have the following layout setup, but it’s pretty wonky. For one, it doesn’t seem to be great at finding stuff, but it is also bringing back empty results in some cases.
https://brewsky.nueramarketing.com/?s=beer

Can you lend any insight to this?

[friech]

Hi @Nuera,

Thank you for writing in, but can you clarify what is the issue? This layout (https://brewsky.nueramarketing.com/?s=beer) looks fine to me.

Thanks,

[Nuera]

I’m sorry, that was kind of vague, wasn’t it?

Ok, here are my initial questions:

1. In that link, you’ll notice that there is a blank entry lower on the page. I’m not sure where that’s coming from but it’s common in the search results. How can we eliminate that?

2. When there are no results for a page, is there a way we can display some kind of “No Results Found” message? Possibly a custom design like a 404 page might have?

3. The results for the search are a little limited - if we added tags to all the products would that help the search hooks?

[christian]

Hey Nuera,

Thanks for the details. I’ll answer them one by one below.

@Nuera

In that link, you’ll notice that there is a blank entry lower on the page. I’m not sure where that’s coming from but it’s common in the search results. How can we eliminate that?

The blank search result is a page. It’s showing up in the result because, by default, the Looper Provider shows all post types. You can edit the Looper Provide to show products only by putting the product post type in the query. The Query String Looper Provider should look like the following:

post_type=product&s={{dc:query:search_query}}

@Nuera

When there are no results for a page, is there a way we can display some kind of “No Results Found” message? Possibly a custom design like a 404 page might have?

Yes. Just add another container element under the Looper Provider element then set this element’s Condition to Provider Output is empty. The following screenshots will provide more context to the setup described above.

1. In the example below, the Section is the Looper Provider.
   

2. The 1st Row contains the search result Looper Consumer.
   

3. The 2nd Row is the container element that I mentioned above. It’ll act as a detector only so it should be outside of the Looper Consumer element.
   
   

   

@Nuera

The results for the search are a little limited - if we added tags to all the products would that help the search hooks?

Try adding the product_tag and matching it with the search query DC in the Query String so it would look like this post_type=product&product_tag={{dc:query:search_query}}&s={{dc:query:search_query}}. Please don’t copy that as it’s only an example. It is important that you know how to create a Query String so I’d recommend you check out this post from our core developer Kory: Looper Query String: Featured Products

A Query String is derived from the WP Query mix. You can see all of the queries you can add here https://developer.wordpress.org/reference/classes/wp_query/#tag-parameters

Hope that helps.

[Nuera]

Thank you so much and I’m sorry it’s taken me a while to reply.

Can you help me identify where the Looper Provider actually lives?

[friech]

Hi Nuera,

Looper provider option is under the Customize tab

As Christian’s example above you can set the section as the Looper provider and the Row as the Looper consumer.

More looper tutorials here.

Hope it helps,
Cheers!

[Nuera]

Hahaha… Sorry, I meant can you help me find the specific Looper Provider in the Layout I’m trying to manipulate. I can’t find it anywhere for some reason…

[tristup]

Hi Nuera,

I have checked the assigned Layout to the Search Result page and found that it is not having the structure explained by Christian. I would suggest you create a separate Layout by following the instruction given in my colleague’s post and assign it to the Search Result.

And you need to add the Looper Provider to the Section and Looper Consumer to the Row 1 as explained by Christian.

Hope it helps.
Thanks

[Nuera]

Thanks, Tristup, but I think our language barrier may be getting in the way. Let me see if I can ask a more straightforward question:

There is a Looper Provider already feeding this layout’s Looper Consumer, but I cannot find where it is located on my website in order to manipulate it. Can you explain to me how I can locate or identify the Looper Provider source so that I can insert post_type=product&s={{dc:query:search_query}} into the Query String?

[Nuera]

Ok, so I apologize- I did not realize that I could override the Search Layout presets by just introducing my own Looper Provider. I have inserted the code above and it’s working perfectly.

Thank you so much- and I’ll let you know if I have any other questions. Sorry for the long back and forth.

[ruenel]

You are most welcome, @Nuera!