Products search results using Woocommerce on our site, images results are huge

Support
#1

HI,
We are using RENEW, also using Woocommerce in our site. When searching for products in the search bar, it shows products huge size. I looked at some forums and apparently the sizes must be set to Woocommerce settings, I did copy and paste the below to my Functions.php but it did not work, it duplicates all the products in the thumbnails and the searchable products are still huge. So I had to delete it and go back to how it was. Please help images are huge in the search results.

function enable_product_settings() {
   remove_filter( 'woocommerce_product_settings', 'x_woocommerce_remove_plugin_settings' );
}

add_filter('admin_init', 'enable_product_settings', 20 );

add_action('init', 'default_woocommerce_thumbnails', 99 );

function default_woocommerce_thumbnails() {
    remove_action( 'woocommerce_before_shop_loop_item_title', 'x_woocommerce_shop_thumbnail', 10 );  
    add_action( 'woocommerce_before_shop_loop_item_title', 'x_woocommerce_shop_thumbnail_v2', 99 );
}

function x_woocommerce_shop_thumbnail_v2() {

  GLOBAL $product;

  $stack            = x_get_stack();
  $stack_thumb      = 'shop_catalog';
  $stack_shop_thumb = $stack_thumb;
  $id               = get_the_ID();
  $rating           = $product->get_rating_html();

  woocommerce_show_product_sale_flash();
  echo '<div class="entry-featured">';
    echo '<a href="' . get_the_permalink() . '">';
      echo get_the_post_thumbnail( $id , $stack_shop_thumb );
      if ( ! empty( $rating ) ) {
        echo '<div class="star-rating-container aggregate">' . $rating . '</div>';
      }
    echo '</a>';
  echo "</div>";

}
#2

Hello There,

Thanks for writing in! Are you getting the same result as shown here: http://demo.theme.co/shop-renew/?s=pando+the+mano

If that is the case, that is the default layout setting of search results page. Do you have any other ideas and would like to modify it how should it look like?

Hope this helps. Kindly let us know.

#3

HI,
We would like for the products to look like in a showcase just as if it was woocommerce shopping. In search results 4 column product list.

Thank you

#4

Hi there,

The new theme version which is 5.1.1 uses the default Woocommerce image size setup. That is why you will need to go to Woocommerce > Settings > Products > Display and set the image sizes as you wish there.

After that you will need to regenerate the thumbnails using the plugin below:

For more detailed information about changes which are implemented in the new theme version and why we did so kindly read the article below:

https://theme.co/changelog/#theme-x-5-1-1

Hope it helps regarding the search result page thumbnail image sizes.

#5

Hi,
Thanks for your reply. I have tried doing this but it looks like is the theme that is by default like this where the image size in Woocommerce do not show only one size, see attached screenshot

So if you do a search for example : Coffee it will return to huge images of products, they should be listed as woocommerce display products, not huge size.

Thanks for all your help, we need to resolve this issue please.

#6

Our website is delugecosmetics.com

#7

Hi There,

Please make sure you are updated to the latest version of X . Cornerstone and WooCommerce

Remove your customizations and test it again, if that does not work, please provide your wp admin credentials in a secure note so we can take a closer look.

Thanks!

#8

Hi there,

The search result regardless of post types (page, post, portfolio, product) have the same layout. And the above code and even that Woocommerce image size setting have no relation and nothing to do with the search result. If you wish to achieve different result then you’ll have to customize and create your own search result. You may want it to consult it to a developer, but it’s just as simple at making the image smaller, then adding this CSS to your global custom CSS should be enough.

.search-results .entry-featured {
    position: relative;
    margin-top: 20px;
    margin-right: 10px;
    border: 2px solid #e5e5e5;
    padding: 6px;
    background-color: #fff;
    max-width: 250px;
    float: left;
}

Thanks!

1 Like
#9

What php file needs to be modified to change the layout of the search results?

#10

Hi @afungusboy,

Thanks for writing around! Search results page uses a generic template, modifying it might not be possible without custom development. However to point you in a right direction you can check out the following links https://codex.wordpress.org/Creating_a_Search_Page or http://wpsnipp.com/index.php/template/create-multiple-search-templates-for-custom-post-types/

Hope this helps!

#11

What is the name and location of the X theme file that controls the content and layout of the search results?

#12

Hi again,

It mainly use _index.php file located in /framework/views/global but make sure to use a child theme to make changes.

Hope this helps!