Search Results Page - 3 Column Layout

How do I create a 3 column layout for search results on the search results page?

I’ve limited the search results to only show WooCommerce products and want to have a 3 column results page with pagination.

I’ve already setup a child theme and entered this code for limiting search results to WooCommerce products:

add_filter( 'pre_get_posts', 'custom_search' );
function custom_search( $query ) {
    if ( $query->is_search ) {
        $query->set( 'post_type', array( 'product' ) );
    }
    return $query;
}

Hello @jgille07,

Thank you for the very detailed post information. To resolve your issue, please follow these steps assuming that you have your child theme active and ready:
1] Using Notepad or TextEdit or Sublime Text or any text editor, please create a new file in your local machine.
2] Insert the following code into that new file

<?php

// =============================================================================
// VIEWS/GLOBAL/_INDEX.PHP
// -----------------------------------------------------------------------------
// Includes the index output.
// =============================================================================

$stack = x_get_stack();

if ( is_home() ) :
  $style     = x_get_option( 'x_blog_style' );
  $cols      = x_get_option( 'x_blog_masonry_columns' );
  $condition = is_home() && $style == 'masonry';
elseif ( is_archive() ) :
  $style     = x_get_option( 'x_archive_style' );
  $cols      = x_get_option( 'x_archive_masonry_columns' );
  $condition = is_archive() && $style == 'masonry';
elseif ( is_search() ) :
  $style     = x_get_option( 'x_archive_style' );
  $cols      = x_get_option( 'x_archive_masonry_columns' );
  $condition = is_search() && $style == 'masonry';
endif;

?>

<?php if ( $condition ) : ?>

  <?php x_get_view( 'global', '_script', 'isotope-index' ); ?>

  <div id="x-iso-container" class="x-iso-container x-iso-container-posts cols-<?php echo $cols; ?>">

    <?php if ( have_posts() ) : ?>
      <?php while ( have_posts() ) : the_post(); ?>
        <?php if ( $stack != 'ethos' ) : ?>
          <?php x_get_view( $stack, 'content', get_post_format() ); ?>
        <?php else : ?>
          <?php x_ethos_entry_cover( 'main-content' ); ?>
        <?php endif; ?>
      <?php endwhile; ?>
    <?php else : ?>
      <?php x_get_view( 'global', '_content-none' ); ?>
    <?php endif; ?>

  </div>

<?php else : ?>

  <?php if ( have_posts() ) : ?>
    <?php while ( have_posts() ) : the_post(); ?>
      <?php x_get_view( $stack, 'content', get_post_format() ); ?>
    <?php endwhile; ?>
  <?php else : ?>
    <?php x_get_view( 'global', '_content-none' ); ?>
  <?php endif; ?>

<?php endif; ?>

<?php pagenavi(); ?>

3] Save the file named as _index.php
4] Upload this file to your server in the child theme’s folder wp-content/themes/x/framework/views/global/

You will have to create the folder path because it does not exist yet in your child theme’s folder. And if still the items do not display in 3 columns, please go to X > Theme Options > Blog > Archive and make sure that the Layout is set to “Masonry” and the columns selected is “Three”.

Please note that issues might arise from the use of custom code and further enhancements should be directed to a third party developer.

We would loved to know if this has work for you. Thank you.

1 Like

Will this work for the search module in Pro?

Hi @bjmiller,

This changes the search result layout and Pro has no search module. But yes, it should work since Pro only uses Wordpress default search functionality.

Thanks!

Followed the steps but all of my search results disappeared.
Search Module ->.

Hi @bjmiller,

I went ahead and created the file that my colleague have instructed and your search page is now showing three columns now.

Kindly check in your end.

Thanks

No, it’s still doing what it did before. The search in the sidebar works perfectly. I need the search in the header to do the exact same thing. I’ve attached a video so you can see.

Hello @bjmiller,

It’s my humble request please create a new thread as usually posting on ticket created by different user causes lot of confusion resulting in slow response time which often is a frustrating experience for customers. Please create a new thread and we will assist you accordingly. You can give reference to this thread for faster response time.

Thanks for understanding.

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