Woocommerce Search looks awful

[heuronic]

Folks,

I’m trying to fix a problem with how a site’s search results appear. Right now the graphics are huge and the text format is a mess.

Here is an example of the search results:
https://csf.coastalmyst.com/?s=rods

Here is my client’s original site, where the search looks far better:
http://www.coastsportfish.com/?s=rods

I’ve found several things here in the support forums for fixing this, including adding custom CSS to the global CSS location. Nothing has made any difference. Any help you can give me will be much appreciated.

[ruenel]

Hello @heuronic,

Thanks for writing in!

To accomplish wth the same as the example url, please do the following;

1.) Please add this JS code in the Theme Options > Global JS (http://prntscr.com/evswzb)

(function($) {
  $('.search article').each(function(){
    var e = $(this);
    var featured = e.find('.entry-featured');
    var header = e.find('.entry-header');
    e.find(featured).insertBefore(header);
  });
})(jQuery);

2.) And then please add the following CSS code in the X > Theme Options > Global CSS (http://prntscr.com/evui3r)

@media(min-width: 768px){
    .search .entry-featured {
        float: left;
        max-width: 120px;
        margin-top: 0;
        margin-right: 1em;
    }

    .search .entry-content.excerpt,
    .search .entry-content.excerpt h2 {
        margin-top: 1em !important;
        font-size: 1em;
    }

    .search .entry-wrap{
        display: block;
        clear: both;
        margin-bottom: 2em;
    }
}

We would love to know if this has worked for you. Thank you.

[heuronic]

Wow, that is a dramatic improvement! Thank you so much!

One nitpick: how can I remove the name and date from each entry?

And can I have a “Find Out More” or “Select Options” button appear for each item? (This is less important than removing the name and date.)

[ruenel]

Hello @heuronic,

Thanks for the updates.

“Find Out More” or “Select Options” will require more custom development. It will have to be with custom PHP code and WooCommerce template modifications. This is beyond the scope of our support already.

If you want to remove the meta, you can make use of this custom css:

.search .p-meta {
    display: none;
}

Hope this helps.