Boost WooCommerce Sales with Dynamic Category Banners

If you’re running a WooCommerce store, you know the importance of grabbing customer attention at the right moment. One powerful strategy to increase conversions is inserting contextual content blocks—like banners, offers, or service highlights—directly into your product listings. This technique not only boosts engagement but also guides customers toward relevant actions without disrupting their shopping flow.

In this article, we’ll explore a smart way to do that using a bit of custom code, and show you how Syncjob.io can help automate and scale this tactic.

Why Use Content Blocks in WooCommerce?

Imagine a visitor browsing your “E-bikes” category. What if, right after the third product, they see a banner promoting a limited-time e-bike discount? That visual cue can significantly increase click-through rates and drive more sales.

Content blocks can be used for:
• Promoting seasonal sales
• Cross-selling services (like repairs or insurance)
• Highlighting new arrivals
• Creating urgency with time-limited deals

How the Code Works

Here’s a breakdown of a simple yet powerful script that inserts a banner into specific WooCommerce category pages at predefined positions:

add_action('wp_footer', 'custom_category_banner_script_with_position', 99);

function custom_category_banner_script_with_position() {
    if (!is_product_category()) return;

    $category = get_queried_object();
    if (!$category || !isset($category->slug)) return;

    // Add banners
    $banners = [
        'fietsen' => [
            'image'    => '/wp-content/uploads/2025/03/Fietsreparatie-categorie-Fatdaddy-reparatie.jpg',
            'link'     => '/reparaties/',
            'position' => 5 // na 6e product (eq(5))
        ],
        'ebikes' => [
            'image'    => '/wp-content/uploads/2025/03/Ebike-banner-fatbike-actie.jpg',
            'link'     => '/actie-ebikes/',
            'position' => 3
        ],
        'accessoires' => [
            'image'    => '/wp-content/uploads/2025/03/accessoires-banner.jpg',
            'link'     => '/accessoires-aanbieding/',
            'position' => 9
        ],
    ];

    $slug = $category->slug;

    if (!isset($banners[$slug])) return;

    $image    = esc_url($banners[$slug]['image']);
    $link     = esc_url($banners[$slug]['link']);
    $position = intval($banners[$slug]['position']);

    ?>
    <script>
    jQuery(document).ready(function($) {
        var bannerHTML = `
            <div class="product-small col product">
                <a href="<?php echo $link; ?>" target="_self">
                    <img src="<?php echo $image; ?>" style="width:100%; border-radius:10px;" alt="Categorie banner">
                </a>
            </div>
        `;

        // Plaats banner op gewenste positie
        $('.products.row .product-small').eq(<?php echo $position; ?>).after(bannerHTML);
    });
    </script>
    <?php
}

🧠 What It Does:

1. Targets Specific Product Categories
The script runs only on WooCommerce category pages (is_product_category()).

2. Customizes Per Category
Each category (e.g., fietsen, ebikes) has its own banner image, link, and insertion point.

3. Injects a Banner After X Products
Using jQuery, it finds the product grid and inserts the banner after the Xth product (eq(position)).

4. Fully Customizable
Add more categories, change positions, update images—all with minimal effort.

Real-World Example

Say you’re selling electric bikes and accessories. You might configure the script like this:

'ebikes' => [
    'image'    => '/uploads/ebike-promo.jpg',
    'link'     => '/special-ebike-deal/',
    'position' => 3
]

Now, on the E-bikes category page, a compelling banner appears right after the third product, inviting users to check out your latest promotion.

Supercharge This with Syncjob.io

While this approach is incredibly effective, managing multiple products across dozens of categories can become a headache.

👉 Learn more about Syncjob’s WooCommerce features here