Search Modal shows results as a blog style page!

[core365]

Hi, I’m using Pro with WooCommerce and I’ve got the Search Modal in the header. When you search for a product eg ‘Sweater’, it shows the results on a blog style formatted page! I have no idea why it’s not showing the products on the standard product page layout and I can’t find any settings anywhere to change it! I hope you can help!

This is how the search results page currently looks:

This is how I want the search results page to look:

Is there a setting I’ve overlooked somewhere?

I’ll put the URL in a secure note as it’s being built on a temporary link.

Thanks!

[christian]

Hey @core365,

You will need to create a custom Search Results page for that using the Layout Builder.

Learn how to create an Archive Layout from the tutorial here https://www.youtube.com/watch?v=L1719j7J7LE&list=PLWPh_GoP7hYWytkJcdcowJ8Zs6EDEdK18

Inside the layout, you will need to set up products only. You can’t have the search result output anything else like returning pages and posts so if you want to output pages and posts in the search result page, you’ll need to find a 3rd party plugin specific for product searching and output only.

Hope that helps.

[core365]

Hi @christian,

Thanks, however is there another way around this? How was it resolved before the Layout Builder?

Thanks!

[tristup]

Hi @core365,

In case if you are using the older version of the theme, you can do that by modifying the core Search template of the WordPress. Create the search.php file in your child theme folder and you can modify it according to your need. The following article might be helpful on this.

Edit search results template in Wordpress

Template Hierarchy | Theme Developer Handbook | WordPress Developer Resources

The WordPress Theme Search Template and Page Template

How To Add Search To A WordPress Theme - Vegibit

Please remember that we don’t offer any support or investigation to modified child themes and custom codes.
Thanks

[core365]

Hi @tristup,

Thanks for the links to the articles, however I’m fairly new to all this and I haven’t had to do my own search file before! I’ve had a read through them but am struggling to see how to create a search file to show the WooCommerce products within a shop page and not the blog style page which it currently does.

Do I need to create a search.php file from scratch or am I to make a copy and modify the index.php file?

I found some code from an old post on your forum but it doesn’t work for me! Can you have a look if you don’t mind and let me know if this code is still relevant and if it should still work please:

  $condition = true;
  $cols = 4;
  $style = 'masonry';

It’s from this post:

Change search result page view in Woocommerce

Hey guys, Sorry for the confusion. X uses standard search results display only. Template modification is required to achieve a masonry layout. I could give you some guidance but issues that would arise from customizing X and further enhancement would be outside the scope of our support. Please read the best practices in customizing X here. Now that you understand how to customize X, copy _index.php from framework\views\global to the same folder structure in your child theme. Open the copied f…

Thanks!

[tristup]

Hi @core365,

I would suggest you follow the instruction given by my colleague in the referred post. And add the following 3 lines as explained.

$condition = true;
$cols = 4;
$style     = x_get_option( 'x_archive_style' );

Hope it helps.
Thanks

[core365]

Hi @tristup,

Thanks, I’ve followed the instructions and copied the _index.php file into the child theme and added in the 3 lines of code, however there are no search results showing now (I searched for ‘Sweater’) and it’s still in the page format with the widgets down the right hand side and not the same as the shop pages! It’s also showing a strange numbering widget thing that has ‘1 2 3’ and an arrow - please see screen grab below:

I have no idea what else to do with this to get it to work, hope you can help!

Thanks!

[tristup]

Hi @core365,

I have checked it in my local environment and found it is working while adding the _index.php file at child-theme_01\framework\views\global\_index.php and modified the code specified in the last post. Please check if the file is properly added to the specified folder and changed the code in the specific line.

Please remember that modification of the template is beyond the scope of theme support, I would suggest you hire a developer who can assist you to do the customization or you can avail of our newly launched service called One, where the customization questions are answered.

Thanks

[core365]

Hi @tristup,

As far as I’m aware I’ve added it to the correct folder:

pro-child/framework/views/global/_index.php

I’ve also added the lines of code to the correct place in the index.php file, line 20 and replaced $condition = false; as on the screen grab below:

I’d really appreciate it if you could let me know where I’ve gone wrong, as I have double checked it and referred back to the post I found on your site, but it’s still not working for me and I can’t figure out why!

Thanks!

[tristup]

Hi @core365,

There might be something conflicting with the code, I would suggest you create another child theme and add the mentioned file into it and check after activating the new child theme. If that works, you need to check your existing child theme for conflicting code.

Thanks

[core365]

Hi @tristup,

Ok, I have no idea how to do that, but thanks, I appreciate all your time and help with this!

Cheers

[tristup]

Hi @core365,

You are most welcome. You can try any of the free plugins from the WordPress repository that helps to create the child theme.

Thanks