Break up the product listing on a category page with promotional blocks

This topic has 4 replies, 2 voices, and was last updated 6 days, 2 hours ago ago by Jack Richardson

  • Avatar: Bas_Kling
    Bas Kling
    Participant
    April 12, 2026 at 09:24

    Hi,

    I would like to insert promotional content into the category product loop at regular intervals. Is this possible through the customizer, code, or should I submit a feature request?

    3 Answers
    Avatar: Jack Richardson
    Jack Richardson
    Support staff
    April 12, 2026 at 09:53

    Hello @Bas Kling,

    Could you please provide us with more details? Would you like to add a static block inside the product loops (shop and category archives)? Where exactly should this block be placed? Are you using the XStore Archive Products Builder or the default template for the product archive page?

    Please also provide us with temporary wp-admin access so that we can assist you further if needed. (This option is not available in the Theme Options, but you can try the following solution added in your child-theme/functions.php if you are using the builder-based template.)

    add_action('etheme_product_grid_list_after_product_item', function() {
        global $woocommerce_loop;
        $repeat_banner_each_x_product = 5; // Display banner after every 5th products
        if (($woocommerce_loop['loop'] % $repeat_banner_each_x_product) == 0) {
            if (is_shop())
                echo 'Custom text after every 5th product item only on the shop page';
            elseif (is_product_category())
                echo '' . do_shortcode('[block id="968"]') . '';
        }
    });

    OR

    add_action('etheme_product_grid_list_after_product_item', function() {
    
        global $paged, $page;
        global $woocommerce_loop;
    
        $repeat_banner_each_x_product_3 = 3; // after ONLY 3rd product the banner be shown
    
        if ( $paged <= 1 ) {
            if ( ($woocommerce_loop['loop'] == $repeat_banner_each_x_product_3) ) {
                if ( is_shop() ) { // only for shop page 
                    echo '<div>'.do_shortcode('[block id="968"]').'</div>';
                }
                // or 
                // if ( is_shop() || is_product_category() ) { // shop or category archive
                //     echo '<div>'.do_shortcode('[block id="968"]').'</div>';
                // }
            }
        }
    
    });

    Static block [block id=”968″] is copied in backend settings -> Static blocks ( https://prnt.sc/ezfe7EGG_UI8)
    Frontend example: https://prnt.sc/xk7XtcjQWtqc (shop), https://prnt.sc/WgRfdPgT0sPR (category banner)

    Best regards,
    Jack Richardson
    The 8Theme’s Team

    Avatar: Bas_Kling
    Bas Kling
    Participant
    April 12, 2026 at 14:41

    Wow, I didn’t really expect such a fast response, with supporting code.
    I appreciate the fact that this isn’t standard Xstore layout, and I’m also willing to start tinkering myself, but defining the correct elements sure does help!

    What I’m trying to achieve is Example1.png
    Or even this Example2 or Example3.png 😉
    Only on parent category pages, but specific to the category, so category W, static block X. Category Y, static block Z (maybe on slug basis). If the script (or feature) could ask for placement after product number A, with column width B, and maybe even a separate setting for mobile, that’s even more awesome. Alternatively, I could make the static block responsive, place it on 2 different positions and hide one of each on different devices.

    It’s quite intricate and I fully understand that scripting is not part of 8theme’s services. If this is something easily achieved, I’m very greatful to receive your help. Otherwise, I will just submit a feature request while implementing a temporary solution myself.

    Content is visible for topic creator and
    support staff only.
    Files is visible for topic creator and
    support staff only.
    Avatar: Jack Richardson
    Jack Richardson
    Support staff
    April 12, 2026 at 16:17

    Hello @Bas Kling,

    We have improved the previous snippet for you to use it on non-builder Archives products and added it as a new snippet: https://prnt.sc/PrKMR1Ch1R61.
    You can further adjust this snippet according to your requirements (we have prepared a basic structure for you):

    add_action('woocommerce_shop_loop', function() {
    	global $paged, $page;
        global $woocommerce_loop;
    
    	$banner_shortcode = false;
        $position_banner = 6; 
    
        if ( $paged <= 1 && is_product_category() ) {
        	if ( is_product_category('essentials-collectie') ) {
        		$position_banner = 3;
        		$banner_shortcode = '[block id="32016"]'; 
        	}
        	if ( is_product_category('leren-lingerie') ) {
        		$position_banner = 2;
        		$banner_shortcode = '[block id="12250"]'; 
        	}
            if ( $banner_shortcode && (($woocommerce_loop['loop'] / 2) == $position_banner) ) {
            	$classes = array('shop-loop-banner product'); // product class is for grid layout 
            	if ( !wc_get_loop_prop( 'etheme_default_elementor_products_widget', false ) && function_exists('etheme_get_product_class') )
        			$classes[] = etheme_get_product_class( $woocommerce_loop['columns'] );
            	echo '<div class="'.implode(' ', $classes).'">';
    	        	echo do_shortcode($banner_shortcode);
    	        	echo '<span class="screen-reader-text">Shop banner</span>';
            	echo '</div>';
            }
        }
    }, 9999);

    The category slug used in the conditions can be found in your Dashboard under Products → Categories: https://prnt.sc/PyoxldAjeQ_D.

    Frontend examples:
    https://prnt.sc/4BUZVMPQvvYh
    https://prnt.sc/NQ_z9AEjQXeM

    At this time, we have temporarily disabled the snippet until you set the correct static blocks and categories.
    Please note that each static block can cover only one column, so it is not possible to achieve the layout shown in examples 2 and 3. However, you may try adding custom CSS to make your static block stretch (https://prnt.sc/7cNsoMCQXUCE):

    .products-loop .shop-loop-banner.product {  
        width: 100%;  
    }

    Please note that we do not provide additional customization. We have made an exception in your case. If you wish to further enhance this snippet, it will require submitting an additional customization request. We believe that our current solution will be useful for you in the existing version of the code snippet.

    Thank you for your understanding and for respecting our support policy.

    Best regards,
    Jack Richardson
    The 8Theme’s Team

  • Viewing 4 results - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.Log in/Sign up

We're using our own and third-party cookies to improve your experience and our website. Keep on browsing to accept our cookie policy.