affiliate product

Tutorial: How to Link Your Product Image to an Affiliate URL

In this post, we will continue our previous post on How to Correctly Modify Your WooCommerce Website and demonstrate how to link your product image to an affiliate URL using the WordPress Code Snippets plugin, WordPress child theme, and WooCommerce templates methods.

Introduction

Making your product’s image in a product page link to your affiliate URL (the same URL as your Buy Product button’s URL) is a well known practice for increasing your product page CTR (click through rate) towards your affiliate website product page, which would essentially increase your ROI.

The default functionality when clicking on a product image in a product page is to open the image URL.

* The above image is a snapshot of the general settings in creating an affiliate product in your WooCommerce website.

Method 1: Code Snippets Plugin

Using the Code Snippets plugin we are going to create a function which changes the default functionality when clicking on a product image in a product page, handled by the WooCommerce tag woocommerce_single_product_image_html. In developing terms, we are going to create a function which hooks to the woocommerce_single_product_image_html tag and filters (changes) the default function attached to the tag.

Instead of opening the image URL, clicking on the image will open the product URL (as configured in the general setting of a WooCommerce affiliate product – see image above).

After installing the Code Snippets plugin, go to Snippets (appears on the admin’s panel left sidebar) > Add New, and you’ll be shown the following page:

code snippets plugin interface

Under the Name (short title) you can fill “Make a Product Image Link to the Product URL”, and under the code section, copy & paste the following code:

Click “Save Changes and Activate” and your’e good to go.

Method 2: WordPress Child Theme

Assuming you are using the Storefront theme, create the following style.css file:

And the following functions.php file (you can see that it contains the exact function we’ve used in the Code Snippets plugin):

* You can go to the WooCommerce templates reference to better understand how WooCommerce templates works.

Conclusion

As you can see there are different methods for achieving the same modified WooCommerce functionality. As I suggested in the previous post on How to Correctly Modify Your WooCommerce Website, I recommend using the Code Snippets plugin for making modifications to your website as it more pros than cons compared to the other popular methods depicted in this post.

Please let me know in the comments below if you have any questions or feedback. Do you have other ways of making WooCommerce modifications? What kind of creative modifications have you been creating lately?

Published by

Yaniv Friedensohn

Yaniv Friedensohn

Yaniv Friedensohn is a marketing developer specializing in paid advertising (especially Facebook advertising). Yaniv tries to merge his programming capabilities and online marketing knowledge towards maximizing marketing performance. You can contact him at [email protected]

  • Tycho

    Hi Yaniv,

    Thank you very much for the tutorial. Only I can’t see the functions.php file anywhere. May you linked to it in the past and the link is now gone?

  • Hi Tycho, it seems I haven’t added the functions.php file code. You can go to https://codex.wordpress.org/Child_Themes, create a child theme with a functions.php file, and add the above Code Snippets Plugin code to the file.

  • Martijn

    Thanks for the tutorial. I had to rewrite the snippet a little bit to get it to work on my end.

    http://pastebin.com/i7m6yJXF

  • Hi,

    it seems that in WC 2.6 the method 1 described above doesn’t work, product-image.php code has change, any suggestion to get it work?

    Regards

  • Thanks, It works!. Any ideas on how to make it work also on product gallery created by shortcodes ?

  • Franky

    Just like @fmilland:disqus I’m looking for a way to do this trick on the product gallery. Any thoughts on that one?

  • kathy

    I tried adding the snippet, but it didn’t work. I tried adding the code to my storefront child functions.php and I get an error message:
    syntax error, unexpected ‘&’ …… on line 42
    Now I can’t do anything without getting that error.

  • Tim

    I can’t seem to get the snippet code to work for me. It would be huge for my website if I could get it right. What would I be doing wrong. Thanks.