WooCommerce Products in Masonry Search Layout

Support
#1

I have the Pro theme, and I’m trying to improve my search results page.

I made a duplicate of framework/views/global/_index.php and changed:

elseif ( is_search() ) :
  $condition = false;

to:

elseif ( is_search() ) :
  $style     = x_get_option( 'x_archive_style' );
  $cols      = x_get_option( 'x_archive_masonry_columns' );
  $condition = is_search() && $style == 'masonry';

This works great for posts & pages, but woocommerce products show up full-size and in the background of the posts/pages in the masonry layout.

I tried creating framework/views/integrity/content-product.php and copying the contents of content-page.php but that hasn’t made any difference. the added “style” attribute that seems to make the masonry layout work isn’t applying to the product article tags.

Any help would be appreciated.

#2

Hello There,

Thank you for the very detailed information. I’ve checked your sites and this is how I see it: http://prntscr.com/jjoa02
Maybe I am looking at a wrong site. Could you please provide us the url of your site and maybe point us to where or how we can replicate the issue?

Thank you in advance.

#3

The live site has some customizations I’m getting rid of. I’ve removed the customizations and am trying to get native search to work properly.

Example search on my staging site: https://staging-drbrighten.kinsta.com/?s=thyroid+support

#4

Hello There,

This issue occurred because the products do not have the required class to be included in the masonry layout. To resolve this, since your child theme is set up, please add the following code in your child theme’s functions.php file

// Custom Product Post Class
// =============================================================================
function custom_product_class( $output ) {

  if ( x_is_product_index() ) {
      $output[] = 'hentry';
  }

  return $output;

}
add_filter( 'post_class', 'custom_product_class' );
// =============================================================================

Hope this helps. Please let us know how it goes.

#5

I added this, but so far no change.

#6

Used this and got it to work as expected:

function custom_product_class( $output ) {
  if ( is_search() && get_post_type() == 'product' ) {
    $output[] = 'hentry';
  }
  return $output;
}
add_filter( 'post_class', 'custom_product_class' );

It doesn’t look like it’s using my custom content-product.php template though, is there a way to force it to use a separate template so I can do things like add the price, ratings, etc.?

#7

Hi @bhamrick,

Adding that template will not work especially if there is no main template that will call it. Example, you can edit framework/views/global/_index.php and replace this line

<?php x_get_view( $stack, 'content', get_post_format() ); ?>

with this

<?php if ( get_post_type() == 'product' ) : ?>

<?php x_get_view( $stack, 'content', 'product' ); ?>

<?php else : ?>

<?php x_get_view( $stack, 'content', get_post_format() ); ?>

<?php endif; ?>

Then the template path should be /framework/views/{YOUR ACTIVE STACK}/content-product.php

Thanks!

1 Like
#8

Great, thanks for that got it working.

1 Like
#9