Change Number of Products Per Row Fetched in WooCommerce AJAX call

Question

My live search field fetches the title of the product, thumbnail and add to cart button using AJAX.

It displays the output in singular columns, which is unreadable for a large product return.

How can I update my output so it displays in rows of 4 as below? (below)

Front End

 <input type="text" name="keyword" id="keyword" onkeyup="fetch()">

<div id="datafetch">Your numbers will show here</div>



<script>
function fetch(){

    $.post('<?php echo admin_url('admin-ajax.php'); ?>',{'action':'my_action'},
    function(response){
        $('#datafetch').append(response);
        console.log(result);
    });
}
</script>

Code in Functions.php

     <?php
}// LOTTERY start the ajax function
add_action('wp_ajax_data_fetch' , 'data_fetch');
add_action('wp_ajax_nopriv_data_fetch','data_fetch');
function data_fetch(){

        $the_query = new WP_Query( array( 'posts_per_page' => -1, 's' => esc_attr( $_POST['keyword'] ), 'post_type' => 'product' ) );


    if( $the_query->have_posts() ) :
        while( $the_query->have_posts() ): $the_query->the_post();
    global $product;
        $product = get_product( get_the_ID() ); //set the global product object

$myquery = esc_attr( $_POST['keyword'] );
$a = $myquery;
$search = get_the_title();
if( stripos("/{$search}/", $a) !== false) {?>
            <h4><a href="<?php echo esc_url( post_permalink() ); ?>"><?php the_title();?></a></h4>
<h4><a href="<?php echo esc_url( post_permalink() ); ?>"><?php the_post_thumbnail();?></a></h4>
<p><?php echo $product->get_price_html(); ?></p>
                        <?php woocommerce_template_loop_add_to_cart(); //ouptput the woocommerce loop add to cart button ?>

        <?php
                                  }
    endwhile;
        wp_reset_postdata();  
    endif;

    die();
}

Answer 1

You can use a counter variable. try the below code.

add_action('wp_ajax_data_fetch' , 'data_fetch');
add_action('wp_ajax_nopriv_data_fetch','data_fetch');
function data_fetch(){

    $the_query = new WP_Query( array( 'posts_per_page' => -1, 's' => esc_attr( $_POST['keyword'] ), 'post_type' => 'product' ) );
    if( $the_query->have_posts() ) : $count = 1; while( $the_query->have_posts() ): $the_query->the_post();

        if ( $count %4 == 1 ) {  
             echo '<div class="row"">';
        }

        global $product;
        $product = get_product( get_the_ID() ); //set the global product object

        $myquery = esc_attr( $_POST['keyword'] );
        $a = $myquery;
        $search = get_the_title();
        if( stripos("/{$search}/", $a) !== false) {?>
            <h4><a href="<?php echo esc_url( post_permalink() ); ?>"><?php the_title();?></a></h4>
            <h4><a href="<?php echo esc_url( post_permalink() ); ?>"><?php the_post_thumbnail();?></a></h4>
            <p><?php echo $product->get_price_html(); ?></p>
            <?php woocommerce_template_loop_add_to_cart(); //ouptput the woocommerce loop add to cart button ?>
        <?php }

        if ( $count %4 == 0 ) {
            echo "</div>";
        }
        $count++;

    endwhile;

        if ( $count %4 != 1 ) echo "</div>";

        wp_reset_postdata();  
    endif;
    die();
}