Creating a WooCommerce promotional ad slot inside a product grid

Overview

A client requested a custom promotional ad block within their WooCommerce product grid to showcase featured campaigns alongside standard products. The goal was to make this ad appear like a regular product card in layout and styling, while linking to a separate page or campaign.

Freshy’s development team designed a flexible system that allows staff to upload an ad image, set a destination URL, and insert the ad seamlessly into a specific product category without disrupting product ordering or checkout functionality.

Issue background

The client wanted a custom ad card added within the Bundled Wedding Invitations product category. The new ad needed to:

• Match the style and size of existing product cards.
• Display a client-uploadable image and link.
• Be easily editable by non-technical team members.
• Not interfere with WooCommerce product functionality or fulfillment.
• Optionally rotate or randomize placement within the product grid.

Essentially, the ad needed to behave like a regular product visually but act as a static promotional banner in functionality.

Diagnosis

The development team reviewed the site’s WooCommerce template hierarchy and confirmed that the product grid was rendered via the archive-product.php file and a custom product loop. Because the loop was generated dynamically through woocommerce_product_loop_start() and woocommerce_product_loop_end(), a traditional product post type would be unsuitable for the ad slot. Instead, the ad needed to be injected programmatically during the grid output.

Resolution steps

1. Create a custom ACF options field for ad content – Added new ACF fields under WooCommerce Settings → Promotional Ad Slot:
   • Image field for the ad graphic.
   • Text field for the destination URL.
   • Checkbox to enable or disable the ad.
2. Modify the product loop template – Updated the category template to insert the ad after a specific number of product cards. Example PHP logic:

$counter = 0;
if ( have_posts() ) :
    while ( have_posts() ) : the_post();
        wc_get_template_part( 'content', 'product' );
        $counter++;
        if ( $counter == 4 && get_field('enable_ad_slot', 'option') ) :
            get_template_part( 'template-parts/woocommerce/ad-slot' );
        endif;
    endwhile;
endif;

This code places the ad card after the fourth product in the grid but can be adjusted as needed.

3. Create an ad card template – Added a file named ad-slot.php to template-parts/woocommerce/. The template matches WooCommerce’s .product class styling for consistent visuals:

  <a href="">
    <img src="" alt="Promotional Ad" />
  

4. Apply conditional logic for category targeting – Wrapped the ad injection in a conditional to limit it to the “Bundled Wedding Invitations” category:

if ( is_product_category('bundled') ) {
    // Inject ad slot logic here
}

5. Optional randomization – To keep the display fresh, an optional randomizer was added to shuffle the ad placement index:

$random_index = rand(3, 6);

This caused the ad to appear in a different position within the product grid on each page load.

6. Testing and validation – The solution was tested across mobile, tablet, and desktop. Verified that the ad loaded without interfering with AJAX pagination or cart functions. Confirmed that disabling the ad in ACF removed it entirely from the front end.

Final outcome

The client now has a fully integrated promotional ad slot inside their WooCommerce product grid. The feature maintains the same responsive design and styling as standard products while being completely independent from the store’s e-commerce logic. Team members can update the ad image and link directly in the WordPress dashboard without developer assistance.

Key takeaways

• Integrating marketing content within WooCommerce grids can increase engagement without disrupting site logic.
• ACF Options Pages provide an ideal way for clients to manage non-product promotional content.
• Template injection allows developers to add dynamic or static content within WooCommerce loops.
• Random ad positioning can improve visibility across repeat visitors.

Need a flexible way to promote featured offers inside your WooCommerce store?
Contact Freshy for expert WooCommerce customization and development support.