I am currently using WooCommerce to display a list of products using the following loop to enable the post-type "product" be displayed and allow for pagination so I can use Infinite Scroll to smoothly browse all products available.

The problem I have is that I want to inject custom marketing messages between certain products within the loop.

I have tried the following: http://dancameron.org/code/adding-content-between-posts-wordpress-loop/ which works, but it repeats the same unique message every x posts, when I want to only display it once.

I have also concept-ed the idea to insert these messages using jQuery with the following example:

$('.item:nth-child(2)').before("<div class='item main'><img src='<?php echo get_template_directory_uri(); ?>/img/dressup-slider.jpg' /></div>");

But if I set the nth-child to a higher number then the amount of products displayed and scroll to the page it is on, nothing displays.

Any advice or being pointed in the right direction will be greatly appreciated

The loop I use:

$paged = 1;
if ( get_query_var('paged') ) $paged = get_query_var('paged');
if ( get_query_var('page') ) $paged = get_query_var('page');
$i = 0;
$loop = new WP_Query( array( 'post_type' => 'product', 'paged' => $paged, 'posts_per_page' => 15 ) );
while ( $loop->have_posts() ) : $loop->the_post()  ?>

<!-- product template -->

<?php $i++; endwhile;  ?>


if ( function_exists( 'wp_pagenavi' ) ) { ?>
<nav id="page-nav">
    <?php wp_pagenavi( array( 'query' => $loop ) ); ?>
<?php wp_reset_postdata();

Isotope/Infinite Scroll call

var $container = $('.isotope');
var $finishedMsg = 'No more posts to load.';
var $msgText = 'Loading more posts...';
var $loadingImg = 'images/spinner.gif';

                itemSelector: '.item',
                //transformsEnabled: false,
                //animationEngine: 'css',
                masonry: {
                    columnWidth: '.grid-sizer',
                    gutter: 10

              navSelector  : '#page-nav',    
              nextSelector : '#page-nav a', 
              itemSelector : '.item',
              loading: { finishedMsg: $finishedMsg, img: $loadingImg }
          function(newElements) {
            var $newElems = $(newElements).css({opacity: 0});


              $newElems.animate({opacity: 1});
              $container.isotope('appended', $newElems, true);                  



1 Answer 1


Two thoughts:

1) Doesn't isotope have a method for adding "stuff"?

2) What about adding a custom field or two, to the product and then use those to create an element before / after that product?

3) Instead of injecting the message via the loop just create the div / wrapped with some - id or class - and then use jQuery to fill those with something random.

  • 1) Currently infinite scroll is adding new products on scroll, so as the page changes its adding the new content. 2) This is actually a great idea, this would be really straight forward to! 3) I tried sometihng similar to this but if I wanted to load the marketing message before the 18th product and the 18th product was on the second page - when infinite scroll triggered and pulled in the products it wouldn't insert the message. Feb 11, 2015 at 9:43
  • @Dan How did you end up fixing this?? I added a loop to show a certain div after every n-th post on my infinite scroll homepage but it only works on the first page.
    – AndrewL64
    Jul 12, 2015 at 18:55
  • I used custom fields and put this at the start of my loop <?php $meta_value = get_post_meta( $post->ID, 'marketingpromo', true ); if (!empty( $meta_value )) { echo $meta_value; } else { } ?> Then I populated the custom field within a post to put it before or after a product of my choice - yeah its a maintenance nightmare but it does the trick for me atm Jul 13, 2015 at 20:20

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.