Search results display - Pro

[zacks_adm]

Hello,

I kindly require some assistance. I have a website ATOM Web Shop, and I have a “problem” with the search results display.

For instance, if you check the following -> https://atomshop.hr/?s=hlace, you will notice I get one result per row in a single column displaying a “huge” picture, title, and short desc for each product.

What I would like to achieve is to have 4 “products” in a single row regarding search results display, just as I have on my front page or shop page. Can you please tell/show me the best way to achieve such search results display? I appreciate any help you can provide.

BR

[tristup]

Hi @zacks_adm,

Thanks for reaching out.
You can get the multi-column output in the search result page by setting the style to Masonry from Theme Options > Blog > Archive > Style and the number of column from Theme Options > Blog > Archive > Column.

If you select that option, you might have faced an ongoing issue with the current version of the theme. I would suggest you add the following code into the Theme Options > JS.

if (window.jQuery.xIsotope) window.jQuery.xIsotope.settings.animationEngine = ‘css’;

That will prevent jQuery errors and restore masonry functionality.

You can also customize the Search Result page by creating an Archive Layout using the Layout Builder and assigning it with the condition of Search Result is being viewed.

I would also suggest you go through the following article on the Layout Builder.

Layout Builder Overview | Themeco Docs

Conditions and Assignments | Themeco Docs

Layout Builder: Archive Templates

Hope it helps.
Thanks

[zacks_adm]

Hello @tristup

Thank you for your input, I will try the suggested solutions and let you know if they are successful.

BR!

[tristup]

Hi @zacks_adm,

You are most welcome.

[zacks_adm]

Hello @tristup

Ok, I’ve modified theme options regarding Archives display and it’s much better now.

Regarding custom Archive Layout, I presume I need to use loopers with custom query (one which will display all products from the shop based on search term). I’m pretty sure I will be able to do it, but I have one question; for certain search terms I will get a lot of results (more than 100), and I would like to display 15 per page. My question is, how will pagination work? Is it a simple solution as adding “Pagination” element to the bottom of the custom Archive Layout or is it more complicated? Thank you in advance.

BR!

[tristup]

Hi @zacks_adm,

You can create an Archive layout and use any of the Predefined templates available for the Archive layout and use the condition to assign it to the Search Result page. The Looper is already added to the Archive layout and pagination is also added with the Predefined Templates.

And the number of posts can be set from the Settings > Reading > Blog pages show at most.

Hope it helps.
Thanks