Add content in between product rows in WooCommerce archives

Question

I want to show some content after the third product (and maybe the sixth, ninth...) of a product category. Not every category has that extra content or the same amount of it. So it should be flexible.

I found an example which uses the following code :

<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
        <?php get_template_part( 'template-parts/content' ); ?>    
        <?php if ( $wp_query->current_post == 1 ) { ?>
             <div>Put Ad Here</div>
        <?php } ?>    
<?php endwhile; endif; ?>

I added that code to my archive-product.php like this:

if ( wc_get_loop_prop( 'total' ) ) {
    while ( have_posts() ) {
        the_post();

        /**
         * Hook: woocommerce_shop_loop.
         */
        do_action( 'woocommerce_shop_loop' );

        wc_get_template_part( 'content', 'product' );

        if ( $wp_query->current_post == 1 ) { 
            echo '<div>Put Ad Here</div>';
        }


    }
}

But it doesn't show anything. And it would be nice if there is a way to add these content without touching the template file at all.

Is there an hook I could use for that?

Everick

Answer 1

Updated - Instead of overriding a template file, you can use the following hooked function, that will add a custom content full row in between each products row:

add_action( 'woocommerce_shop_loop', 'action_woocommerce_shop_loop', 100 );
function action_woocommerce_shop_loop() {
    // Only on producy cayegory archives
    if ( is_product_category() ) :
        
    global $wp_query;
    
    // Get the number of columns set for this query
    $columns = esc_attr( wc_get_loop_prop( 'columns' ) );
    
    // Get the current post count 
    $current_post = $wp_query->current_post;
    
    if ( ( $current_post % $columns ) == 0  && $current_post > 1 ) :
    
    ?>
    </ul>
    <ul class="columns-1" style="list-style:none; margin:0 0 3em;">
        <li style="text-align:center; padding:2em 1em; border: solid 1px #ccc;"><div class="banner"><?php _e("Custom content here"); ?></div></li>
    </ul>
    <ul class="products columns-<?php echo $columns; ?>">
    <?php
    endif; endif;
}

Code goes in functions.php file of your active child theme (or active theme). Tested and works.

Avocation

One question: Is it possible to add the custom content inside the columns? Otherwise I get problems in the mobile view – Everick

you should not have problems in mobile, as columns are dynamic and you will have on a small device for example, 1 content each 3 products normally. This is just an example, so you can easily manipulate IF statements to make it as you like. you can also use other related Wordpress conditional tags to detect if you are on a device… – Avocation

I'm using bootstrap markup with the columns class as row. Inside the row are all products as col. So I've only one <ul> and every product is in it. Is there no way to add the content inside the <ul>? – Everick

Now yes you can add a content inside one column. but you have to change a bit the html structure, removing <ul> tags. – Avocation

ah yes, sure. I was blind. Sorry – Everick

yes you can do everything… think about it. Is jus a question of structure and class selectors – Avocation

Good solution, but this breaks on mobile. When you change product view on list, after first 8 products the styling for the list breaks and it shows 2 products same line with no list view. Any fix ? – Aquiline

Answer 2

Not able to comment due to my rookie status, but a small addition to the code above, if you change

if ( ( $current_post % $columns ) == 0  && $current_post > 1 ) 

to

if ( ( $current_post % $columns ) == 0  && $current_post%6==0 )

The content will be placed after every 6th product. Obviously, you can use any number. Thought this to be helpful, as I could not find a solution to this.

Malvern