Insert a div after the 3rd product in woocommerce

Question

I am using 3 columns grid in woocommerce shop

[] [] []
[] [] []
[] [] []

How can I insert a div after the 3rd grid

Something like this

[][][inserted div]
[][][]
[][][]

So I can put anything in there, thanks.

Answer 1

you can achieve this by using jQuery also,

Try the CSS selector :nth-child():

$("#holder > div:nth-child(2)").after("<div>add div</div>");

Answer 2

All the product loaded from a loop script just initiate any $variable= 0 and after every product loaded $variable incremented by 1 and check $variable %3 == 0 if success add the div

e.g.

$variable = 0;

{ //product loop start 

//product load

$variable ++; // variable increment
if($variable%3 == 0){
// Add Div here
}
} //product loop end

Answer 3

You can place this inside your post loop just before the loop ends. It will output your desired div (ad) after the 2nd post. Just make sure you add in any necessary CSS classes to the div, and of course your ad code or image.

<?php if ( $wp_query->current_post == 1 ) { ?>

  <div>Put Ad Here</div>

<?php } ?>

So it should look something like this within your post loop:

<?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; ?>

This works by using the $current_post property of the WP_Query class. It retrieves the index of your current post in the loop.

Hope this helps!