Display new posts categories in separated divs

You should first make a query to retrieve all your categories. This can be done using:

$categories = get_categories(array('hide_empty'=> 0,));

Now that you have a list of your categories as object, you have to run a foreach to output their content:

foreach ($categories as $category) {
    $params = array(
        'posts_per_page' => -1, 
        'post_type' => 'product', 
        'cat' => $category->term_id, 
    ); 
    $wc_query = new WP_Query($params);
    //From here you can start outputting your query
    if ($wc_query->have_posts()) { ?>
        <div id="<?php echo $category->term_id;?>" class="product-list-grid">
        while ($wc_query->have_posts()) {
            $wc_query->the_post(); ?>
            <div class="product-grid">
                <a href="https://wordpress.stackexchange.com/questions/262828/<?php the_permalink(); ?>">
                   <?php the_post_thumbnail(); ?>
                   <?php the_title(); ?>
                </a>
            </div><?php
        }
        wp_reset_postdata();?>
        <a class="more-products" href="#" onclick=" document.getElementById("<?php echo $category->term_id;?>").style.height = "auto";">More</a>
        </div><?php
    }
}

Don’t forget to use wp_reset_postdata() when you are finished with your query.

Now let’s style it, shall we?

.product-list-grid {
    width:100%;
    height:100px;
    padding:10px;
    float:left;
    display:block;
    position:relative
}

.product-grid {
    float:left;
    width:auto;
    height:80px;
    display:block
}

.product-grid img {
    float:left;
}

.more-products {
   position:absolute;
   bottom:10px;
   right:10px;
}

Now, after clicking More button, all your products will be visible. Remember, you have to change the number of queried products to return all available product if you want this to work.

Related Posts: