Woocommerce - external/affiliate product image to external link (buy URL)
(Warning: I'm not a programmer) Straight to the point.
I have a product catalogue http://adidassuperstar.cz, and I want images (thumbnails) point to the affiliate link - the same link as the link of a buy button under the image.
I googled everything, but none of the answers actually worked for me. However, I found something which helped me just half the way. When I insert this code to functions.php it makes this: Every link point to the affiliate link - I mean even a title of a product. I want only the image to have an affiliate link, not the title. The title should point to the product page on my site.
Here is the code:
// Do not include this if already open!
/**
* Code goes in theme functions.php.
*/
add_action('template_redirect', 'redirect_external_products');
function redirect_external_products() {
global $post;
if (is_singular( 'product' ) &&
! empty( $post ) &&
($product = wc_get_product($post)) &&
$product->is_type('external' )) {
wp_redirect( $product->get_product_url() );
exit;
}
}
I only need to specify the code to redirect only images (thumbnails). If you have a clue how to do that. Please let me know.
*Additional info (changed 6.12.2016):
File: Product-thumbnails.php
<?php
/**
* Single Product Thumbnails
*
* @author WooThemes
* @package WooCommerce/Templates
* @version 2.3.0
*/
if (! defined('ABSPATH'))
exit; // Exit if accessed directly
global $post, $product, $woocommerce;
if (! Avada()->settings->get('disable_woo_gallery')) {
include WC()->plugin_path() . '/templates/single-product/product-thumbnails.php';
return;
}
$attachment_ids = $product->get_gallery_attachment_ids();
if ($attachment_ids) {
?>
<div id="carousel" class="flexslider">
<ul class="slides">
<?php
// From product-image.php
if (has_post_thumbnail()) {
$image_title = esc_attr(get_the_title(get_post_thumbnail_id()));
$image_link = wp_get_attachment_url(get_post_thumbnail_id());
$image = get_the_post_thumbnail
($post->ID,
apply_filters('single_product_large_thumbnail_size',
'shop_thumbnail'),
array(
'title' => $image_title
)
);
$attachment_count = count($product->get_gallery_attachment_ids());
if ($attachment_count > 0) {
$gallery = '[product-gallery]';
}
else {
$gallery = '';
}
// Avada Edit
echo apply_filters(
'woocommerce_single_product_image_thumbnail_html',
sprintf('<li>%s</li>', $image),
$post->ID);
} else {
echo apply_filters(
'woocommerce_single_product_image_html',
sprintf('<li><img src="%s" alt="Placeholder" /></li>',
wc_placeholder_img_src()),
$post->ID);
}
$loop = 0;
// Avada Edit
$columns = apply_filters('woocommerce_product_thumbnails_columns', 3);
foreach ($attachment_ids as $attachment_id) {
// Avada Edit
/*$classes = array('zoom');
if ($loop == 0 || $loop % $columns == 0)
$classes[] = 'first';
if (($loop + 1) % $columns == 0)
$classes[] = 'last';
*/
$classes[] = 'image-' . $attachment_id;
$image_link = wp_get_attachment_url($attachment_id);
if (! $image_link)
continue;
$image = wp_get_attachment_image(
$attachment_id,
apply_filters('single_product_small_thumbnail_size',
'shop_thumbnail'));
$image_class = esc_attr(implode(' ', $classes));
$image_title = esc_attr(get_the_title($attachment_id));
// Avada Edit
echo apply_filters(
'woocommerce_single_product_image_thumbnail_html',
sprintf('<li>%s</li>', $image),
$attachment_id,
$post->ID,
$image_class);
$loop++;
}
?>
</ul>
</div>
<?php
}
// Omit closing PHP tag to avoid "Headers already sent" issues.
File: product-image.php
<?php
/**
* Single Product Image
*
* @author WooThemes
* @package WooCommerce/Templates
* @version 2.0.14
*/
if (! defined('ABSPATH'))
exit; // Exit if accessed directly
global $post, $woocommerce, $product;
if (! Avada()->settings->get('disable_woo_gallery')) {
include WC()->plugin_path() . '/templates/single-product/product-image.php';
return;
}
?>
<div class="images">
<div id="slider" class="fusion-flexslider">
<ul class="slides">
<?php
$attachment_count = count($product->get_gallery_attachment_ids());
if ($attachment_count > 0) {
$gallery = '[product-gallery]';
}
else {
$gallery = '[]';
}
if (has_post_thumbnail()) {
$image_title = esc_attr(get_the_title(get_post_thumbnail_id()));
$image_link = wp_get_attachment_url(get_post_thumbnail_id());
$image = get_the_post_thumbnail(
$post->ID,
apply_filters('single_product_large_thumbnail_size',
'shop_single' ),
array(
'title' => $image_title
));
$image_caption = get_post_field('post_excerpt',
get_post_thumbnail_id());
// Avada Edit
echo apply_filters('woocommerce_single_product_image_html',
sprintf(
'<li><a href="%s" itemprop="image" class="woocommerce-main-image zoom" title="%s" data-rel="iLightbox' .
$gallery .
'" data-title="%s" data-caption="%s">%s</a></li>',
$image_link,
$image_title,
$image_title,
$image_caption,
$image),
$post->ID);
}
else {
echo apply_filters('woocommerce_single_product_image_html',
sprintf('<li><img src="%s" alt="Placeholder" /></li>',
wc_placeholder_img_src()),
$post->ID);
}
/**
* From product-thumbnails.php
*/
$attachment_ids = $product->get_gallery_attachment_ids();
$loop = 0;
// Avada Edit
//$columns = apply_filters('woocommerce_product_thumbnails_columns', 3);
foreach ($attachment_ids as $attachment_id ) {
// Avada Edit
/*
$classes = array('zoom');
if ($loop == 0 || $loop % $columns == 0)
$classes[] = 'first';
if (( $loop + 1 ) % $columns == 0)
$classes[] = 'last';
*/
$classes[] = 'image-'.$attachment_id;
$image_link = wp_get_attachment_url($attachment_id);
if (! $image_link)
continue;
// Avada Edit
// modified image size to shop_single from thumbnail
$image = wp_get_attachment_image(
$attachment_id,
apply_filters('single_product_small_thumbnail_size',
'shop_single'));
$image_class = esc_attr(implode(' ', $classes));
$image_title = esc_attr(get_the_title($attachment_id));
$image_caption = get_post_field('post_excerpt', $attachment_id);
// Avada Edit
echo apply_filters('woocommerce_single_product_image_html',
sprintf(
'<li><a href="%s" itemprop="image" class="woocommerce-main-image zoom" title="%s" data-rel="iLightbox' .
$gallery .
'" data-title="%s" data-caption="%s">%s</a></li>',
$image_link,
$image_title,
$image_title,
$image_caption,
$image),
$attachment_id,
$post->ID,
$image_class);
//echo apply_filters(
// 'woocommerce_single_product_image_thumbnail_html',
// sprintf(
// '<a href="%s" class="%s" title="%s" data-rel="prettyPhoto[product-gallery]">%s</a>',
// $image_link,
// $image_class,
// $image_title,
// $image),
// $attachment_id,
// $post->ID,
// $image_class);
$loop++;
}
?>
</ul>
</div>
<?php do_action('woocommerce_product_thumbnails'); ?>
</div>
File: Content-product.php
<?php
/**
* The template for displaying product content within loops
*
* This template can be overridden by copying it to
* yourtheme/woocommerce/content-product.php.
*
* HOWEVER, on occasion WooCommerce will need to update template
* files and you (the theme developer) will need to copy the
* new files to your theme to maintain compatibility. We try
* to do this as little as possible, but it does happen. When
* this occurs the version of the template file will be bumped and
* the readme will list any important changes.
*
* @see http://docs.woothemes.com/document/template-structure/
* @author WooThemes
* @package WooCommerce/Templates
* @version 2.5.0
*/
if (! defined( 'ABSPATH')) {
exit; // Exit if accessed directly
}
global $product, $woocommerce_loop;
// Store loop count we're currently on
if (empty( $woocommerce_loop['loop'])) {
$woocommerce_loop['loop'] = 0;
}
// Store column count for displaying the grid
if (empty( $woocommerce_loop['columns'])) {
$woocommerce_loop['columns'] = apply_filters('loop_shop_columns', 4);
}
// Ensure visibility
if (! $product || ! $product->is_visible()) {
return;
}
// Increase loop count
$woocommerce_loop['loop']++;
// Extra post classes
$classes = array();
if ( 0 === ($woocommerce_loop['loop'] - 1) % $woocommerce_loop['columns'] ||
1 === $woocommerce_loop['columns'] ) {
$classes[] = 'first';
}
if ( 0 === $woocommerce_loop['loop'] % $woocommerce_loop['columns'] ) {
$classes[] = 'last';
}
?>
<li <?php post_class( $classes ); ?>>
<?php
/**
* woocommerce_before_shop_loop_item hook.
*
* @hooked woocommerce_template_loop_product_link_open - 10
*/
do_action('woocommerce_before_shop_loop_item');
?>
<?php if ('clean' != Avada()->settings->get('woocommerce_product_box_design')) : ?>
<a href="<?php the_permalink(); ?>" class="product-images">
<?php endif;?>
<?php
/**
* woocommerce_before_shop_loop_item_title hook.
*
* @hooked woocommerce_show_product_loop_sale_flash - 10
* @hooked woocommerce_template_loop_product_thumbnail - 10
*/
do_action('woocommerce_before_shop_loop_item_title');
?>
<?php if ('clean' != Avada()->settings->get('woocommerce_product_box_design')) : ?>
</a>
<?php endif; ?>
<div class="product-details">
<div class="product-details-container">
<?php
/**
* woocommerce_shop_loop_item_title hook.
*
* @hooked woocommerce_template_loop_product_title - 10
*/
do_action('woocommerce_shop_loop_item_title');
?>
<div class="clearfix">
<?php
/**
* woocommerce_after_shop_loop_item_title hook.
*
* @hooked woocommerce_template_loop_rating - 5
* @hooked woocommerce_template_loop_price - 10
*/
do_action('woocommerce_after_shop_loop_item_title');
?>
</div>
</div>
</div>
<?php
/**
* woocommerce_after_shop_loop_item hook.
*
* @hooked woocommerce_template_loop_product_link_close - 5
* @hooked woocommerce_template_loop_add_to_cart - 10
*/
do_action('woocommerce_after_shop_loop_item');
?>
</li>
I use a WordPress theme: Avada
Products was imported with plugin: WP All import
If you need any more information, I will give it to you. Just ask :)
Answer
WooCommerce uses a template for those images. They are product-thumbnails.php and 'product-image.php' files located in single-product folder in your WooCommerce templates folder.
For me these files are located in theme/woocommerce/single-product/ and "theme" is your theme (in this case Avada).
Based on what your theme does to WooCommerce templates (some themes rewrite them completely) you can just change some of those template files directly and add your links.
But the cleaner way would be to use actions that are used widely in WooCommerce and add your link to the images using them. The way I see it in an older version of Avada the themes modifies 'woocommerce_single_product_image_html' filter hook which shows the product main image.
If you share the files product-thumbnails.php and product-image.php with us we could find an easy solution.
I personally don't have access to your themes to see what exactly it does with images.
For now, you can put this code in your functions.php file and see how it turns out:
add_filter('woocommerce_single_product_image_html', 'change_product_image_link', 10, 2);
function change_product_image_link( $html, $product_id) {
$product = wc_get_product($product_id);
if (is_singular('product') &&
$product &&
$product->is_type('external')){
$attachment_count = count($product->get_gallery_attachment_ids());
$gallery = $attachment_count > 0 ? '[product-gallery]' : '';
$props = wc_get_product_attachment_props(get_post_thumbnail_id(), $post);
$image = get_the_post_thumbnail(
$post->ID,
apply_filters('single_product_large_thumbnail_size',
'shop_single'),
array(
'title' => $props['title'],
'alt' => $props['alt'],
));
return sprintf(
'<a href="%s" itemprop="image" class="woocommerce-main-image zoom" title="%s">%s</a>',
$product->get_product_url(),
esc_attr($props['caption']),
$image
);
}
else {
return $html;
}
}
To add external links to archive product images you can put this code in your functions.php:
remove_action('woocommerce_before_shop_loop_item', 'woocommerce_template_loop_product_link_open');
add_action('woocommerce_before_shop_loop_item_title', 'woocommerce_template_loop_product_link_open', 15);
add_action('woocommerce_before_shop_loop_item', 'woocommerce_add_aff_link_open', 10);
add_action('woocommerce_before_shop_loop_item_title', 'woocommerce_add_aff_link_close', 10);
function woocommerce_add_aff_link_open(){
$product = wc_get_product(get_the_ID());
if ($product->is_type('external'))
echo '<a href="' .
$product->get_product_url() .
'" class="woocommerce-LoopProductImage-link">';
}
function woocommerce_add_aff_link_close(){
$product = wc_get_product(get_the_ID());
if ($product->is_type('external'))
echo '</a>';
}
The second changes mixed with Avada's content-product.php file (I strongly suggest removing #2 edits from functions.php before using this edit):
<?php
/**
* The template for displaying product content within loops
*
* This template can be overridden by copying it to yourtheme/woocommerce/content-product.php.
*
* HOWEVER, on occasion WooCommerce will need to update template
files and you (the theme developer) will need to copy the new
files to your theme to maintain compatibility. We try to do this
as little as possible, but it does happen. When this occurs the
version of the template file will be bumped and the readme will
list any important changes.
*
* @see http://docs.woothemes.com/document/template-structure/
* @author WooThemes
* @package WooCommerce/Templates
* @version 2.5.0
*/
if (! defined('ABSPATH')) {
exit; // Exit if accessed directly
}
global $product, $woocommerce_loop;
// Store loop count we're currently on
if (empty($woocommerce_loop['loop'])) {
$woocommerce_loop['loop'] = 0;
}
// Store column count for displaying the grid
if (empty( $woocommerce_loop['columns'])) {
$woocommerce_loop['columns'] = apply_filters('loop_shop_columns', 4);
}
// Ensure visibility
if (! $product || ! $product->is_visible()) {
return;
}
// Increase loop count
$woocommerce_loop['loop']++;
// Extra post classes
$classes = array();
if ( 0 === ($woocommerce_loop['loop'] - 1 ) % $woocommerce_loop['columns'] ||
1 === $woocommerce_loop['columns']) {
$classes[] = 'first';
}
if ( 0 === $woocommerce_loop['loop'] % $woocommerce_loop['columns']) {
$classes[] = 'last';
}
?>
<li <?php post_class($classes); ?>>
<?php
/**
* woocommerce_before_shop_loop_item hook.
*
* @hooked woocommerce_template_loop_product_link_open - 10
*/
do_action('woocommerce_before_shop_loop_item');
?>
<?php
if ('clean' != Avada()->settings->get('woocommerce_product_box_design')) {
if ($product->is_type('external')) {
echo '<a href="' .
$product->get_product_url() .
'" class="product-images">';
}
else {
echo '<a href="' .
get_permalink() .
'" class="product-images">';
}
}
?>
<?php
/**
* woocommerce_before_shop_loop_item_title hook.
*
* @hooked woocommerce_show_product_loop_sale_flash - 10
* @hooked woocommerce_template_loop_product_thumbnail - 10
*/
do_action('woocommerce_before_shop_loop_item_title');
?>
<?php
if ('clean' != Avada()->settings->get('woocommerce_product_box_design')) :
?>
</a>
<?php endif; ?>
<div class="product-details">
<div class="product-details-container">
<?php
/**
* woocommerce_shop_loop_item_title hook.
*
* @hooked woocommerce_template_loop_product_title - 10
*/
do_action('woocommerce_shop_loop_item_title');
?>
<div class="clearfix">
<?php
/**
* woocommerce_after_shop_loop_item_title hook.
*
* @hooked woocommerce_template_loop_rating - 5
* @hooked woocommerce_template_loop_price - 10
*/
do_action('woocommerce_after_shop_loop_item_title');
?>
</div>
</div>
</div>
<?php
/**
* woocommerce_after_shop_loop_item hook.
*
* @hooked woocommerce_template_loop_product_link_close - 5
* @hooked woocommerce_template_loop_add_to_cart - 10
*/
do_action( 'woocommerce_after_shop_loop_item');
?>
</li>