Ask SkyVerge

Today’s question comes from Pawan:

Could you tell me how to add a company icon just above the products in shop page?


Images and text can be added to the shop page with a small code snippet. However, while we’re on this topic, we’ll also cover how to add images and text above or below images on the single product pages as well.

If you’ve never added custom code to your site, please view our tutorial on doing so.

Add text or images above the product image on shop pages

Text and images can be added above images in the shop page using the woocommerce_before_shop_loop_item_title action. This action is what the product images and title are hooked into on the shop pages, so we can hook in text or images with an earlier priority to put them above product images, or leave the default priority of “10” to put them below product images.

Let’s first add some text above product images — you could adjust this sample text as needed.

function sv_add_text_above_wc_shop_image() {
    
    echo '<h4 style="text-align: center;">Some sample text</h4>';
}
add_action( 'woocommerce_before_shop_loop_item_title', 'sv_add_text_above_wc_shop_image', 9 );

This will give us the same text above every image in our shop loop.

WooCommerce Shop Page add text above product images

We could use an image instead of text by replaced what’s echoed above this image. Let’s change this snippet to add our logo instead of some text. Replace the image source with the URL of your own image:

function sv_add_logo_above_wc_shop_image() {
    
    echo '<img src="/wp-content/uploads/2015/01/skyverge-logo.png" class="aligncenter" style="margin-bottom: 20px;" />';
}
add_action( 'woocommerce_before_shop_loop_item_title', 'sv_add_logo_above_wc_shop_image', 9 );

Now a logo will be displayed above each product’s image in the shop instead.

WooCommerce add logo above shop image

Add text or images below the product featured image

Adding information below the WooCommerce product image on the product page is simple as well. The woocommerce_product_thumbnails action fires after the featured image and before the thumbnails are displayed. This can let us add our text or logo right below the main product image.

We could use snippets similar to the ones above, but we’ll hook them into this new action instead. Here’s how we can add text below the product image:

function sv_add_text_above_wc_product_thumbs() {

    echo '<h4 style="text-align: center;">Some sample text</h4>';
}
add_action( 'woocommerce_product_thumbnails', 'sv_add_text_above_wc_product_thumbs' );

WooCommerce add text below featured image

We’ve written a similar post that can also show you how to add text blow the thumbnail images.

You can also replace the text with an image instead:

function sv_add_logo_above_wc_product_thumbs() {

    echo '<img src="/wp-content/uploads/2015/01/skyverge-logo.png" class="aligncenter" style="margin-bottom: 20px;" />';
}
add_action( 'woocommerce_product_thumbnails', 'sv_add_logo_above_wc_product_thumbs' );

WooCommerce add logo below product featured image

Add text or images above the product featured image

Adding text or images above the WooCommerce product images is a bit tricker. There are no actions here, but we can filter the image html to add text above the image using the woocommerce_single_product_image_html filter.

We’ll filter this image html, add our HTML above it, then return the image again.

function sv_add_text_above_wc_product_image( $img_html ) {
    
    echo '<h4 style="text-align: center;">Some sample text</h4>';
    
    return $img_html;
}
add_filter( 'woocommerce_single_product_image_html', 'sv_add_text_above_wc_product_image' );

WooCommerce add text above product featured image

We can also add a logo above the featured image by replacing the echoed text above with image html instead. This will work if your shop only contains simple products.

However, this will not work for variable products, as WooCommerce resets the product image for variable products via javascript by looking for the first image on the page. While your single products would add the logo correctly, variable products will look like this:

WooCommerce add logo before product images 1

Oh, dear.

The image is replaced by the product image during the reset via javascript. Since we don’t want the featured image duplicated for our variable products, we’ll add the logo via javascript above the WooCommerce product images instead using this snippet:

function sv_add_logo_above_wc_product_image() {
    
    wc_enqueue_js("$('<img src=\"https://s9900.pcdn.co/wp-content/uploads/2014/03/skyverge-logo.png\" class=\"aligncenter\" style=\"margin-bottom: 20px;\" />').insertBefore('.woocommerce-main-image');");
}
add_action( 'woocommerce_after_single_product', 'sv_add_logo_above_wc_product_image' );

Now our logos will be added before product images for all products, so you can use this snippet instead if your shop has both simple and variable products.

WooCommerce add logo before product images 2

I’d love to see this in action if you use it! Link your site in the comments.

Published by Beka Rice

Beka leads product direction for SkyVerge, focusing on new features for our plugins and Jilt. She spends a lot of time on research and interviews, but likes to write so she has an excuse to spend more time jamming out to anything from The Clash to Lady Gaga.

21 Comments

  1. i want to custom image should be show for different product different logo should be show just above product

  2. […] Here’s a guide on adding information above or below WooCommerce product images from SkyVerge. […]

    • we can add only single image above product image
      but how we can add multiple icon just above product image for different images

  3. How do you add information or a caption inside the product image? Eg,. “More options available”.

  4. Sharp and Clear article from Beka Rice, really helped me to fix some issues with product image that we had , want to replace them with text. not many material about how to hack this.
    Thanks!

  5. Can you do this via custom CSS rather so that you dont have to worry about updates in the future?

  6. How do I add text above only one of the images?

  7. Hi Beka!

    I’m so encouraged to keep learning whenever I encounter people like you being so generous with information! Thank you!

    My question: How can I get unique text above the images? So if I want to add a description, how would I do this? Hope this is clear.

    Thanks for any help you can provide!

  8. Hi! i was going through your blog and its quite helpful. I have a question if you can please help me out.

    I want to change the default product featured image not placeholder but featured image of product. Can you please help me out here

  9. Hello Beka,

    Thanks for the scripts, I was using it for a while but I believe they stopped working since yesterday. Woocommerce rolled out an an update (3.0 version) and scripts don’t apply anymore. Any solution? 🙂

    Thank you,
    Darek

  10. Hi…same problem as Darek
    I have been using this technique with great success until I updated woocommerce to 3.0. Now my pricing chart that I inserted BELOW the thumbnails via your method, gets pushed upward to right below the featured image and messes up the new 3.0 Gallery.
    Any ideas?

    /**
    *Price Table Under Product Image
    */

    function wdm1_add_custom_fields()
    {
    /** if your have added information using a metabox **/
    echo ”.get_post_meta(get_the_ID(), “pricing”, true);
    }
    add_action( ‘woocommerce_product_thumbnails’, ‘wdm1_add_custom_fields’, 20 );

  11. Stopped working after WooCommerce 3.x release 🙁

    • Hi Robin,
      I have only found a temporary workaround. I grabbed the original files (product-image.php and product-thumbnails.php) from woocommerce 2.6.3 and uploaded them to my theme so I could override the the new 3.0 files.

      I like the new 3.0 gallery and would very much like to use it, but am stuck with the old for now.

      • frustrating, I’ve the issue with my plugin which is uploaded on codecanyon. That’s would be a bad idea to overwrite WooCommerce files. I’ve asked for their support but no response from their end. Looking forward to see any official solution.
        Thanks for your reply anyway…

Hmm, looks like this article is quite old! Its content may be outdated, so comments are now closed.