Adding unique marketing messages between certain products whilst using isotope/Infinite Scroll

Question

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:

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

<?php 

if ( function_exists( 'wp_pagenavi' ) ) { ?>
<nav id="page-nav">
    <?php wp_pagenavi( array( 'query' => $loop ) ); ?>
</nav>  
<?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';

        $container.imagesLoaded(function(){ 
            $container.isotope({
                itemSelector: '.item',
                //transformsEnabled: false,
                //animationEngine: 'css',
                masonry: {
                    columnWidth: '.grid-sizer',
                    gutter: 10
                }
            }); 
        });

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

            $newElems.imagesLoaded(function(){

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

            WireEvents();

            });
          }
        );      

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.