How to Make WooCommerce Thumbnails Clickable

WooCommerce is super-popular plugin for selling digital or physical products from your WordPress website. It’s used by tens-of-thousands of shops around the world. It’s quite an amazing plugin but lacks one simple interface function — clickable product images in the store view!

Crazy right?

Unfortunately, it’s going to take some developer chops to get this working as there isn’t a simple one-click action for this in the settings. Luckily for you in this post, we’ll show you how to make those WooCommerce thumbnails clickable.

Start with a child-theme

We’ve written about creating a child-theme before and if you’re a Slocum Themes customer, here’s how to do it with our one-click child theme plugin. Why are child-themes so important? For scenarios like in today’s tutorial where we’ll be editing functionality of our website, but want steer clear of losing that functionality when we update.

I hope I didn’t lose you there; Let’s continue on with editing our child-themes functions.php file.

Modify functions.php

Functions.php is the file that you want to add in any of your custom function code to modify a WordPress site. Basically, WordPress knows to keep this file “safe” from a theme or plugin update. There could be some edge-cases where things will break, but we’re not too worried about that for today’s example.

We’ll be modifying the WooCommerce function:

woocommerce_get_product_thumbnail

and overriding it with some changes to make the post thumbnail of our product linked to the post ID of the product. 

Making product images clickable

Here’s what the function looks like before we edit it:

if ( ! function_exists( 'woocommerce_get_product_thumbnail' ) ) {
/**
* Get the product thumbnail, or the placeholder if not set.
*
* @subpackage Loop
* @param string $size (default: 'shop_catalog')
* @param int $deprecated1 Deprecated since WooCommerce 2.0 (default: 0)
* @param int $deprecated2 Deprecated since WooCommerce 2.0 (default: 0)
* @return string
*/
function woocommerce_get_product_thumbnail( $size = 'shop_catalog', $deprecated1 = 0, $deprecated2 = 0 ) {
global $post;
if ( has_post_thumbnail() ) {
return get_the_post_thumbnail( $post->ID, $size );
} elseif ( wc_placeholder_img_src() ) {
return wc_placeholder_img( $size );
}
}
}

Now for the changes you want to paste into your child-theme functions.php:

<?php

if ( ! function_exists( 'woocommerce_get_product_thumbnail' ) ) {
/**
* Get the product thumbnail, or the placeholder if not set.
*
* @subpackage Loop
* @param string $size (default: 'shop_catalog')
* @param int $deprecated1 Deprecated since WooCommerce 2.0 (default: 0)
* @param int $deprecated2 Deprecated since WooCommerce 2.0 (default: 0)
* @return string
*/
function woocommerce_get_product_thumbnail( $size = 'shop_catalog', $deprecated1 = 0, $deprecated2 = 0 ) {
global $post;
if ( has_post_thumbnail() ) {
return '<a href="' . get_permalink( $post->ID ) . '">' . get_the_post_thumbnail( $post->ID, $size ) . '</a>';
} elseif ( wc_placeholder_img_src() ) {
return wc_placeholder_img( $size );
}
}
}

What changed in the function?

Here’s the line we modified in that snippet:

<code class="php keyword">return</code> <code class="php string">'<a href="'</code> <code class="php plain">. get_permalink( </code><code class="php variable">$post</code><code class="php plain">->ID ) . </code><code class="php string">'">'</code> <code class="php plain">. get_the_post_thumbnail( </code><code class="php variable">$post</code><code class="php plain">->ID, </code><code class="php variable">$size</code> <code class="php plain">) . </code><code class="php string">'</a>'</code><code class="php plain">;

 

If you’re familiar with basic HTML you will notice that we added an <a> tag which will link to $post-ID — that WordPress understands as our product link — and wraps it around our product thumbnail, get_the_post_thumbnail. Pretty easy, right?

Save everything and reload your WooCommerce store page. Now your images will link to your actual products when browsing your WooCommerce store pages. Happy selling!

A Video Guide