PRO - Theming the Search Results Page

Hi Friends,
I’m trying to modify the search results page but having no luck. Can you please point me in the right direction? Right now, all of the search results display in one column, whereas we’d like a 3 column, tiled layout for our woocommerce e-commerce focused website. We have the search results page here: http://159.203.166.174/?s=js
Best wishes,
Andy

1 Like

I thought that this page in the KB would do it, but it’s an identical query.

I might try the steps in this thread

The steps in that thread resulted in briefly displaying the same, one-column layout for the search results page, before all the content between the header and footer disappeared! Renaming _index.php to _index php disabled the file and reverted the original functionality.

Hi,

Please revert any changes you made then add this in Theme Options > CSS

.search.search-results article {
    width: 33.2%; 
    display: inline-block;
    vertical-align: top;
    padding: 30px;
}

Hope that helps

1 Like

@paul.r ,
Yes! That’s nearly perfect! I changed the value of the width and added a bottom margin as seen in the code below:

.search.search-results article { width: 33.1%; display: inline-block; vertical-align: top; margin-bottom:30px; }
Further, I styled the search result’s .entry-wrap property using the following css:
.search.search-results .entry-wrap { border:1px solid gray; margin: 1em; padding: 1.5em; }

I might need to also change the hover-state overlay to the add to cart button. Is this possible using css?
Best wishes,
Andy

Glad it’s okay now, and for button’s hover, please add this as well with your preferred colors

button[name="add-to-cart"] {
    color: hsl(0,0%,100%);
    border-color: #600900;
    background-color: hsl(0,100%,34%);
    text-shadow: 0 0.075em 0.075em rgba(0,0,0,0.5);
}

Cheers!

Dear @Rad and friends,
Thank you for your reply, but I’m afraid this is not the answer I need. How do I change the overlay on the search page from this: to this: ?

Thanks again with best wishes,

Andy

Hi there,

Thanks for the screenshots! It could be possible with custom development, but this would be outside the scope of support we can offer. You may wish to consult a developer to assist you with this.

Thanks for understanding. Take care!

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