Not able to fix common Woocommerce Product Loop Layout Problem

  • Resolved jasonbnorth

    (@jasonbnorth)


    7 years, 9 months ago

    Hey!
    Ok so I’ve seen this problem on other threads, but the common fix hasn’t worked for me. The product list layout / loop layout is wonky only on certain pages.

    For instance it lays out fine on https://talltique.com/product-category/plus-sizes/ but not on https://talltique.com/?s=basic&post_type=product&type_aws=true.

    Will you help? Below is my code in content-product.php. I tried commenting out and deleting the woocommerce_loop code, but it makes all products disappear completely.

    Other interesting note: On the pages where the layout messes up, the third product block in a given row will be outside the usual div.row (div with a class of row). On the pages where it works fine, all product blocks are within the div.row.

    Thanks!

    <?php

if ( ! defined( 'ABSPATH' ) ) exit; // Exit if accessed directly

global $product, $woocommerce_loop,$wp_query;

// Store loop count we're currently on

if ( empty( $woocommerce_loop['loop'] ) )
    $woocommerce_loop['loop'] = 0;

// Store column count for displaying the grid
    $woocommerce_loop['columns'] = apply_filters( 'loop_shop_columns', 3 );

// Ensure visibility
if ( ! $product || ! $product->is_visible() )
    return;

// Increase loop count
$woocommerce_loop['loop']++;

/*
// Extra post classes
$classes = '';
if ( 0 == ( $woocommerce_loop['loop'] - 1 ) % $woocommerce_loop['columns'] || 1 == $woocommerce_loop['columns'] )
    $classes = 'first';

if ( 0 == $woocommerce_loop['loop'] % $woocommerce_loop['columns'] )
    $classes = 'last';
*/

$columns = 12/$woocommerce_loop['columns'];

?>

<?php if( $woocommerce_loop['loop']%$woocommerce_loop['columns'] == 1 ) { ?>
<div class="row">
<?php } ?>
<div <?php post_class( 'shopcol '.$classes.' col-lg-'.$columns.' col-md-'.$columns.' col-sm-'.$columns.' col-xs-12' ); ?>>
    <?php wc_get_template_part( 'content', 'product-inner' ); ?>
</div>
<?php if( $woocommerce_loop['loop']%$woocommerce_loop['columns'] == 0 ||  $woocommerce_loop['loop'] == $wp_query->found_posts ) { ?>
 </div>
<?php } ?>
Viewing 5 replies - 1 through 5 (of 5 total)

  • Have you even looked into your page output with like Chrome dev tools or something? Btw you could learn that your site has multiple fonts blocked as they are requested via unsecure http.

    Try this:

    <?php

if ( ! defined( 'ABSPATH' ) ) exit; // Exit if accessed directly

global $product, $woocommerce_loop,$wp_query;

// Store loop count we're currently on

if ( empty( $woocommerce_loop['loop'] ) )
    $woocommerce_loop['loop'] = 0;

// Store column count for displaying the grid
    $woocommerce_loop['columns'] = apply_filters( 'loop_shop_columns', 3 );

// Ensure visibility
if ( ! $product || ! $product->is_visible() )
    return;

$columns = 12/$woocommerce_loop['columns'];

if( $woocommerce_loop['loop'] % $woocommerce_loop['columns'] === 0 )
  {
  $classes = 'first';
  ?>
  <div class="row">
       <?php
       } ?>
       <div <?php
            $x = $wp_query->found_posts-1;
            if( $x === $woocommerce_loop['loop'] || $woocommerce_loop['loop'] % $woocommerce_loop['columns'] === 2 )
              {
              $classes = 'last';
              post_class( 'shopcol '.$classes.' col-lg-'.$columns.' col-md-'.$columns.' col-sm-'.$columns.' col-xs-12' ); ?>>
              <?php wc_get_template_part( 'content', 'product-inner' );
             ?>
       </div>
  </div>
  <?php
  } else {
         post_class( 'shopcol '.$classes.' col-lg-'.$columns.' col-md-'.$columns.' col-sm-'.$columns.' col-xs-12' ); ?>>
         <?php wc_get_template_part( 'content', 'product-inner' );
         ?></div><?php
         }
?>
    Thread Starter jasonbnorth

    (@jasonbnorth)

    Yes I know that my content is mixed. Lower priority than this product results layout problem right now.

    And yes I spend a lot of time in the inspector. That’s why I know that sometimes the product blocks are within the div.row element, and sometimes not (see note in my post).

    But I will try your code, thanks.

    • This reply was modified 7 years, 9 months ago by jasonbnorth.
    Thread Starter jasonbnorth

    (@jasonbnorth)

    Hey it worked! Thanks a lot, I appreciate it! I’ll have to dig into your code and see how it works, so I can actually troubleshoot this stuff in the future.

    Thanks again!

    Hi,
    good to hear that.

    If you want to understand the whole thing, there is an easy approach to debug you can utilize. Just throw in a bunch of echo allmyvariables; across your code at various steps and see how the numbers behave.

    Thread Starter jasonbnorth

    (@jasonbnorth)

    Ok great, thanks!

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Not able to fix common Woocommerce Product Loop Layout Problem’ is closed to new replies.