New to the community? Start here

Inserting Content Between Rows Of Woocommerce Product Listings On Category Pages

Hello,

We are wondering how best to insert content like an image or some other graphic in between every three rows of product listings on product category, subcategory, brand, and tag pages. Please reference the URL for an example of how these pages are laid out:

https://cncmachines.net/vertical-machining-center/

I've also made a low-fi mock up of what we would like to accomplish:

https://cncmachines.net/wp-content/uploads/2018/05/Screenshot-2018-5-17.jpg

What would be the best way to accomplish this? Is there a way to 'break-up' these woocommerce product thumbnail blocks into sections for content to be added in between? Thank you for any help you can offer!

All the Best,

Matthew

Thu, 17 May 2018 17:04:56
  • Dimitris Kalliris
    • Support Team Lead

    Hello Matthew,

    hope you're doing good today! :slight_smile:

    After inspecting the HTML markup, I could see that there are no actual rows per 4 products, as they are all in a single ul element.

    There's a last class added in each 4th element though, which could assist us to better target a custom JS snippet.

    [attachments are only viewable by logged-in members]

    The following snippet should do the trick, in order to add a custom image after every 3 "last" classes (similar to every 3 rows):

    (function($) {
    
$("ul.products li.product.last:nth-of-type(3n)").after("<div class='my-ads'><img src='https://yourdomain.com/wp-content/uploads/2018/05/image.jpg' /></div>");
    
})( jQuery );

    You can use this either in your child theme or via a little plugin like this one:

    https://wordpress.org/plugins/custom-css-js/

    Keep in mind that above snippet will add the same image in all cases. If you want to have separate images per 3 rows, you should edit above snippet in order to target elements differently.

    For example:

    :nth-of-type(3n) targets all 3rd elements

    :nth-of-type(3n+6) targets all 3rd elements, starting from the 6th one

    :nth-of-type(3n+9) targets all 3rd elements, starting from the 9th one

    Reference: https://www.w3schools.com/jquery/sel_nthoftype.asp

    Hope that was some help!

    Warm regards,

    Dimitris

  • Matthew
    • Recruit

    Hi Dimitris,

    Thanks for the help! I believe this should work great for our purpose. Quick follow up question though, I’m having trouble plugging in the snippet to my functions.php file for the child theme. Is there anything I would need to include (other than the URL for the image we want to use)? My cPanel editor is giving a syntax error: ‘Unexpected $ expected T_VARIABLE’. I’m pretty new to php and not sure what this is referring to. Thanks again!

    Take care,

    Matthew

  • Dimitris Kalliris
    • Support Team Lead

    In order to add it in functions.php of your child theme, some PHP code used be used. Please try to use this in the very bottom of your file:

    <?php function your_function_name() { ?>
    
<script>(function($) { $("ul.products li.product.last:nth-of-type(3n)").after("<div class='my-ads'><img src='https://yourdomain.com/wp-content/uploads/2018/05/image.jpg' /></div>"); })(jQuery);</script>
    
<?php }
    
add_action( 'wp_footer', 'your_function_name' );

    If you’re still in trouble with this, please consider downloading your file, rename it to functions.txt and attach it here in your next reply (please remove any sensitive information that may be included there).

    Warm regards,

    Dimitris

  • Matthew
    • Recruit

    Thanks for that quick response – here’s the code I’m working with now:

    // Add Banner After Every Three Product Rows On Category Pages

    function add_valuation_banner() { ?>

    <script>(function($) { $(“ul.products li.product.last:nth-of-type(3n)”:wink:.after(“<div class=’my-ads’><img src=’https://cncmachines.net/wp-content/uploads/2018/05/Free-CNC-evaluations.jpg&#8217; /></div>”:wink:; })(jQuery);</script>

    <?php }

    add_action( ‘wp_footer’, ‘add_valuation_banner’ );

    Now, the good news is that things work perfectly for desktop! However, on mobile display the product ‘li’ elements seem to get shifted over a space just after the <div class=”my-ads”> element we created. See screenshot for example. Any thoughts on why this might be happening?

    Thanks,

    Matthew

  • Dimitris Kalliris
    • Support Team Lead

    Hey Matthew

    This is happening because of the theme using :nth-child(2n) selectors for small screens. That means that the additional image is also part of the grid.

    You could surpass this, by using some mobile-only CSS:

    @media screen and (max-width: 768px) {
    
.my-ads {
    
width: 48%;
    
float: left;
    
clear: left;
    
margin: 0 0 2.992em;
    
}
    
.my-ads:nth-child(2n) {
    
float: right;
    
clear: right;
    
}
    
}

    This won’t look perfectly fine though, as it will be half the width. You could possibly experiment with JS and load separate images per window width: :wink:

    https://www.wiliam.com.au/wiliam-blog/jquery-and-css-media-queries

    Warm regards,

    Dimitris

  • Matthew
    • Recruit

    Hello Dimitris,

    Hope things are going well today! Just thought I’d let you know that we got things working on mobile using the CSS you kindly provided as well as requiring a ‘Mobile_Detect.php’ file in our child theme’s functions.php file that we found on github – if you or anyone else is interested in checking and/or trying it out, here’s the link to the repo:

    https://github.com/serbanghita/Mobile-Detect/blob/master/Mobile_Detect.php

    All in all, it seems to be working great for us now! Thanks for all of your help in this matter as I’m quite sure I would have never gotten this task accomplished so quickly without it!

    Take care,

    Matthew