如何修复WooCommerce Ajax Load More Products插件商品仅单列显示的问题

Got it, let's sort out this grid layout problem with your ConnektHQ WooCommerce Ajax Load More plugin. The core issue with your current Repeater Template is that you're wrapping each single product in its own .row grid container—this forces every item to take full width, resulting in the single-column display. Additionally, you're missing key loop structure and theme-compatible code from your native grid template that handles responsive behavior and product rendering.

Modified Repeater Template Code #

Replace your existing Repeater Template code with this version, which aligns with your theme's native grid logic:

<?php
global $woocommerce_loop, $loop;

// Match theme's column and responsive settings
if( isset($columns) && !empty($columns) ) {
    $woocommerce_loop['columns'] = $columns;
}
$product_item = isset($product_item) ? $product_item : 'inner';
$screen_desktop = isset($screen_desktop) ? $screen_desktop : 4;
$screen_desktopsmall = isset($screen_desktopsmall) ? $screen_desktopsmall : 3;
$screen_tablet = isset($screen_tablet) ? $screen_tablet : 3;
$screen_mobile = isset($screen_mobile) ? $screen_mobile : 1;
$count = 0;

// Build theme-compatible class and responsive attributes
if( isset($attr_row) && !empty($attr_row) ) {
    $class = 'products products-grid';
} else {
    $data_responsive = '';
    $data_responsive .= ' data-xlgdesktop='. esc_attr($columns) .'';
    $data_responsive .= ' data-desktop='. esc_attr($screen_desktop) .'';
    $data_responsive .= ' data-desktopsmall='. esc_attr($screen_desktopsmall) .'';
    $data_responsive .= ' data-tablet='. esc_attr($screen_tablet) .'';
    $data_responsive .= ' data-mobile='. esc_attr($screen_mobile) .'';
    $class = ($columns <= 1) ? 'w-products-list' : 'products products-grid';
}
?>
<div class="<?php echo esc_attr( $class ); ?>">
    <?php if( isset($attr_row) && !empty($attr_row) ) : ?>
        <div <?php echo trim($attr_row); ?>>
    <?php else : ?>
        <div class="row grid" <?php echo esc_attr($data_responsive); ?>>
    <?php endif; ?>

    <?php
    // Proper loop to render all loaded products
    while ( $loop->have_posts() ) : $loop->the_post();
        global $product;
        $post_object = get_post( get_the_ID() );
        setup_postdata( $GLOBALS['post'] =& $post_object );
        
        // Use theme's product template to ensure style consistency
        wc_get_template( 
            'content-products.php', 
            array(
                'product_item' => $product_item,
                'screen_desktop' => $screen_desktop,
                'screen_desktopsmall' => $screen_desktopsmall,
                'screen_tablet' => $screen_tablet,
                'screen_mobile' => $screen_mobile
            ) 
        );
        $count++;
    endwhile;
    wp_reset_postdata();
    ?>
    </div>
</div>

Key Fixes Explained #

• Shared Grid Container: Moved the .row grid container outside the product loop, so all Ajax-loaded products are placed within the same grid structure (instead of each product having its own container).
• Theme Compatibility: Retained all the theme's native variables for columns and responsive breakpoints, ensuring the loaded products match your site's existing grid styling.
• Proper Loop Structure: Added the while ( $loop->have_posts() ) loop to iterate through all products loaded by the plugin, just like your theme's native grid code.
• Correct Template Call: Used wc_get_template('content-products.php') (matching your theme) instead of wc_get_template_part, so the product markup inherits the theme's grid classes and styles.
• Post Data Reset: Included wp_reset_postdata() to prevent conflicts with other post-related functionality after the loop.

After updating the Repeater Template, clear your site's cache and test the Ajax load—your products should now display in a 4-column grid as expected.

内容的提问来源于stack exchange，提问作者onlineking