Custom Field URL Option for Woocommerce Product Thumbnail

Question

Currently I'm using the Woocommerce plugin for affiliate products. I would like to be able to click on the thumbnail on the main page and go directly to amazon, for example. Currently it's setup so that once clicked it goes to the product detail page on my site. From there you can get to the amazon page. However, fewer clicks the better.

So I found the hook in the content-product.php page. What I did was wrap the whole thing in a URL and used a custom field to add in the URL. Doesn't work as intended. What happens is that the URL goes to amazon only when using one of the sale flash options. When turned off, the URL does not go to amazon, but to the product page on my site. I don't know where else to place the URL wrapper.

So i tried looking for the <a href="<?php the_permalink(); ?>"> that is currently controlling where the thumbnail goes. I traced the function to the woocommerce-template.php file. That's where I hit a dead end. I'm not sure where it is for the thumbnail currently.

Here is my modified code that works partially in the content-product.php page:

<div class="thumbnail-wrapper">
        <a href="<?php echo get_post_meta( $post->ID, 'URLThumb', true ); ?>">
        <?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' );
        ?>  
        </a>
</div>

Here is the thumbnail function that I can't seem to drill down further to find the existing <a href="<?php the_permalink(); ?>"> to change. This is on the woocommerce-template.php page.

if ( ! function_exists( 'woocommerce_template_loop_product_thumbnail' ) ) {

/**
 * Get the product thumbnail for the loop.
 *
 * @access public
 * @subpackage  Loop
 * @return void
 */
function woocommerce_template_loop_product_thumbnail() {
    echo woocommerce_get_product_thumbnail();
}
}

Answer 1

File Name: woocommerce.php

File Location: wp-content/themes/'your-theme'/theme/woocommerce.php

Solution: Target external products via query of product type, looping in $product_url when external, and looping in get_permalink() when simple/variable. This code also accounts for opening external products in a new tab.

I'm going to post one version of what the code looked like before, and then another with my additions + modifications. In my theme, the first line of code I pasted exists on line 374 within woocommerce.php (this will differ depending on your theme, and some themes may not have a modified woocommerce.php file. If that is the case, just drag woocommerce.php into your theme directory from the plugin.

Code Before Addition/Modification:

function woocommerce_template_loop_product_thumbnail() {

global $product, $woocommerce_loop;


$i = 0;
$attachments = array();

$attachments[] = get_post_thumbnail_id();
$attachments = array_merge( $attachments, $product->get_gallery_attachment_ids() );

$original_size = wc_get_image_size( 'shop_catalog' );


if ( $woocommerce_loop['view'] == 'masonry_item' ) {
    $size = $original_size;
    $size['height'] = 0;
    YIT_Registry::get_instance()->image->set_size('shop_catalog', $size );
}

switch  ( $woocommerce_loop['products_layout'] ) {

    case 'zoom':
        if( isset( $attachments[1] ) ) {

            echo '<a href="' . get_permalink() . '" class="thumb">' . woocommerce_get_product_thumbnail() . '</a>';
            echo '<div class="attachments-thumbnail">';
            while( $i < 3 ){
                if( ! isset( $attachments[ $i ] ) ) break;
                $src = wp_get_attachment_image_src( $attachments[ $i ], 'shop_catalog' );
                $active = ( $i == 0 ) ? 'active' : '';
                echo '<div class="single-attachment-thumbnail ' . $active . '" data-img="' . $src[0] . '">';
                yit_image( "id=$attachments[$i]&size=shop_thumbnail&class=image-hover" );
                echo '</div>';
                $i++;
            }
            echo '</div>';
        }
        else {
            echo '<a href="' . get_permalink() . '" class="thumb">' . woocommerce_get_product_thumbnail() . '</a>';
        }
        break;

    case 'flip':
        if( isset( $attachments[1] ) ) {
            echo '<a href="' . get_permalink() . '" class="thumb backface"><span class="face">' . woocommerce_get_product_thumbnail() . '</span></a>';
            echo '<span class="face back">';
            yit_image( "id=$attachments[1]&size=shop_catalog&class=image-hover" );
            echo '</span></a>';
        }
        else {
            echo '<a href="' . get_permalink() . '" class="thumb"><span class="face">' . woocommerce_get_product_thumbnail() . '</span></a>';
        }
        break;
}

Code After Addition/Modification:

    function woocommerce_template_loop_product_thumbnail() {

global $product, $woocommerce_loop;

if(!is_single() ) {
    if( $product->is_type( 'external' ) ){
    $product_url = $product->get_product_url() . '"target="_blank""';
        } else( $producenter code heret_url = get_permalink());
} else ($product_url = get_permalink());

$i = 0;
$attachments = array();

$attachments[] = get_post_thumbnail_id();
$attachments = array_merge( $attachments, $product->get_gallery_attachment_ids() );

$original_size = wc_get_image_size( 'shop_catalog' );


if ( $woocommerce_loop['view'] == 'masonry_item' ) {
    $size = $original_size;
    $size['height'] = 0;
    YIT_Registry::get_instance()->image->set_size('shop_catalog', $size );
}

switch  ( $woocommerce_loop['products_layout'] ) {

    case 'zoom':
        if( isset( $attachments[1] ) ) {

            echo '<a href="' . $product_url . '" class="thumb">' . woocommerce_get_product_thumbnail() . '</a>';
            echo '<div class="attachments-thumbnail">';
            while( $i < 3 ){
                if( ! isset( $attachments[ $i ] ) ) break;
                $src = wp_get_attachment_image_src( $attachments[ $i ], 'shop_catalog' );
                $active = ( $i == 0 ) ? 'active' : '';
                echo '<div class="single-attachment-thumbnail ' . $active . '" data-img="' . $src[0] . '">';
                yit_image( "id=$attachments[$i]&size=shop_thumbnail&class=image-hover" );
                echo '</div>';
                $i++;
            }
            echo '</div>';
        }
        else {
            echo '<a href="' . $product_url . '" class="thumb">' . woocommerce_get_product_thumbnail() . '</a>';
        }
        break;

    case 'flip':
        if( isset( $attachments[1] ) ) {
            echo '<a href="' . $product_url . '" class="thumb backface"><span class="face">' . woocommerce_get_product_thumbnail() . '</span></a>';
            echo '<span class="face back">';
            yit_image( "id=$attachments[1]&size=shop_catalog&class=image-hover" );
            echo '</span></a>';
        }
        else {
            echo '<a href="' . $product_url . '" class="thumb"><span class="face">' . woocommerce_get_product_thumbnail() . '</span></a>';
        }
        break;
}

Code Added:

  if( $product->is_type( 'external' ) ){
    $product_url = $product->get_product_url() . '"target="_blank""';
        } else( $product_url = get_permalink());
} else ($product_url = get_permalink());

Code Modified:

With the exception of the code that was added above, replace all instances of get_permalink() with $product_url.

Answer 2

Figured out a work around. Since the SalesFlash image was the one being triggered, I just used a blank PNG image to overlay ontop of the product image. Turned all my products into sale items and it works. Not perfect, but I don't need the sale icon anyway.

But if anyone does know of a proper programming solution, I would change it. Thanks.

Answer 3

this on worked for me in the content-product.php without asking the meta data

  <div class="thumbnail-wrapper"><a href="<?php echo $product->product_url; ?>">
    <?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' );
        ?>  </a>
    </div

I did the same in thing in loop/add-to-cart.php for the "Add More" and "Details" buttons in lines 21 get_permalink() and 57 $link by replacing them respectively like this: LINE 27

$details  = sprintf('<a href="%s" rel="nofollow" title="%s" class="details">%s</a>', get_permalink(), apply_filters('yit_details_button', __( 'Details', 'yit' )), apply_filters('yit_details_button', __( 'Details', 'yit' )) );

REPLACE get_permalink() with $product->product_url AND IN LINE 57

   $add_to_cart = sprintf('<a href="%s" rel="nofollow" class="view-options" title="%s">%s</a>', apply_filters( 'yit_external_add_to_cart_link_loop', $link, $product ), $label, $label);

REPLACE again $link with $product->product_url . I had no problems untill now. I was wondering if you Finally found a clear solution so we could do the same thing for thumnails and product images ,without adding a blank image on top of them.Im not much of code so i would appreciate if someone Knows how to put an external link on the product images on the front page.Thank you