Product Search Results

Support
#1

Hey there,

I have a question about styling the search results page of my woocommerce shop.
It would be great if there can be four colums for the content.

I gess it will be about adding some code in a .php, right?

here is the side: http://artofspring.garten-kiste.de/

Just type in for example “Oring” and see how bad looks the result page.

I hope you can help me out.
Thanks so far!

#2

Hi There @ArtOfSpring

Thanks for writing in! Could you please try adding the following CSS rule into your X -> Theme Options -> CSS area and then adjust it accordingly.

.search-results article.product {
    width: 24% !important;
    float: left;
    margin-right: 1%;
}

Hope that helps.

#3

Thank you it worked out to make it with four columns.

Some further questions:

  1. Do you know how to increase the count of products at the page? Because know the paginatiion is between all the products…that looks wired. (see image)

  2. Can I hide the text below the product (see image)

Thank you! Great help

#4

Hi @ArtOfSpring,

May I know which page has this pagination? I couldn’t find it and you can always change the product count per page in Theme Options > Woocommerce > Shop > POSTS PER PAGE. You can increase or decrease it.

For the meantime, please add this CSS to your global custom CSS to fix the pagination’s position.

.x-pagination {
display: block;
clear: both;

width: 100%;

}

Thanks!

#5

Hello,

Unfortunatly your CSS Code didn`t worked out.
You find this pagination if you type in “oring” for example in the searchbar at the frontpage.
It is not about the cout of products per woocommerce page…it’s about the count in the serach results page.

Thank you for your help

#6

Hello @ArtOfSpring,

Thanks for updating the thread.

The code my colleague @Rad shared is working fine. I don’t see the same added on the website. Have you removed the same from website? Please try adding following and see how it goes.

.x-pagination {
    display: block !important;
    clear: both !important;
    width: 100% !important;
}

To remove excerpt from search result page, please add following CSS under Pro > Theme Options > CSS:

.search-results .entry-content.excerpt {
    display: none !important;
}

Customizing product count search result page will require custom development which falls outside the scope of support we can offer. To get started you can take a look at result-count.php under /wp-content/plugins/woocommerce/templates/loop/.

1- I have found the proper CSS code selector using the Chrome browser Developer Toolbar: https://www.youtube.com/watch?v=wcFnnxfA70g

2- For the CSS code itself, I suggest that you get started with this tutorial: https://www.youtube.com/watch?v=yfoY53QXEnI

Thanks.

#7

Hello There,

your Code worked out fine.
Thank you really much for your help.
I am watching the videos know and hope that I can add two more products at the result page really soon.

Thanks

#8

You’re most welcome.

#9

Hello,

is there a possibility to make your code responsive?

Thanks

#10

Hello @ArtOfSpring,

Thanks for asking. :slight_smile:

You can use following CSS under Pro > Theme Options > CSS:

@media only screen and (max-width: 600px) {
    .x-pagination {
    display: block !important;
    clear: both !important;
    width: 100% !important;
}
.search-results .entry-content.excerpt {
    display: none !important;
}
}

To lean more about media queries, please take a look at following resource.

https://www.w3schools.com/css/css_rwd_mediaqueries.asp

Thanks.

#11

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