Search Page Customisation

Support
#1

Does anyone know of any way to customise the way search results are presented? At the moment, they come back with side bars, full page products etc. and it just doesnt look good.

#2

Hi There,

Please provide your URL so we can take a closer look.

Thanks!

#3

If you use the search functionality on the nav bar, and look for “PPC”, it will bring up a standard results page and show what I’m referring to.

Any help would be great?

Ideally I want to remove the right hand column (Product Categories, Search, News etc), and have the individual results show in a grid.

#4

Hi There,

Please try adding this custom CSS under X > Theme Options > CSS:

@media (min-width: 980px){
    .search-results .x-sidebar.right {
        display: none;
    }
    .search-results .x-main {
        width: 100%;
        display: flex;
        flex-flow: wrap;
    }
    .search-results .x-main article {
        width: 25%;
        padding: 15px;
    }
    .search-results .x-pagination {
        width: 100%;
    }
}

Hope it helps :slight_smile:

#5

Thanks for getting back to me.

Unfortunately, this code doesn’t do anything.

#6

Hi there,

I have tested the code previously provided and it works fine.

Kindly double check the codes you have in the global css area as there might be a CSS syntax error which is causing the code not to work.

Try copy and pasting and checking for code errors here: http://csslint.net/

Hope this helps.

#7

Hi @Jade - this has suddenly started working - thanks so much!

Now that it works, I need to do some fairly big customisation on how the results are presented - can you help:

  • Is there a way to make all the spaces for the images the same size? i.e. so that regardless of the content or size, the results appear inline with one another.

  • Align the product name to the centre of the product card?

  • Remove the product description, and replace it with product tag?

  • Arrange the results alphabetically?

Thanks for your help.

#8

Hi there,

It could be due to cache, and glad it’s working now.

  1. It depends on the aspect ratio of the images, you can’t make the 600x200 and 700x600 image the same size, but you could make the 600x200 and 700x233 since they are on same aspect ratio. Hence, the solution is uploading images with same aspect ratio even if they are on different sizes. You can use this tool https://andrew.hedges.name/experiments/aspect_ratio/

Thus, affecting the spaces, even if you equalize the spaces but the content and images are varying then it’s no use. If you’re referring to the white paces of the images itself, then it’s only doable with photo editing.

  1. Sure, please add this CSS as well
.search-results .entry-title {
text-align: center;
}
  1. You can hide the description, but adding tag isn’t possible without template editing. Please add this CSS
.search-results .entry-content {
display: none;
}

How did you customize the product search? I think it’s where you can add the product tags. Or how about this plugin https://wordpress.org/plugins/woocommerce-display-products-by-tags/? It’s not our plugin so please use it with caution.

  1. It’s only possible with custom coding but looks like there is an available plugin for that https://wordpress.org/plugins/sort-searchresult-by-title/. But you’re not comfortable with plugins, you can extract the code from them and add them to your child theme’s functions.php

Example,

http://www.devshed.com/c/a/php/customizing-wordpress-search-results-to-sort-by-title/

Thanks!

#9

Thanks for this. I’ve managed to make a few amendments.

With regards to images, is there no way to standardise the size and alignment of the space reserved for images, without cropping? There are over 1000 products so changing the individual photos isnt feasible.

#10

Hey There,

1000 products could have more than a thousand images and editing it one by one is not an option. Have you check this article already? https://theme.co/apex/forum/t/resizing-woocommerce-images/1706

Please change your image dimensions and regenerate the thumbnails using a plugin:

Hope this helps.

#11

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.