Modification to WooCommerce for WordPress featured image link - wordpress

I need to change the link code that is being used for external products for woo commerce.
This is the code that generates the product image:
<?php
/**
* Single Product Image
*
* #author WooThemes
* #package WooCommerce/Templates
* #version 2.0.3
*/
if ( ! defined( 'ABSPATH' ) ) exit; // Exit if accessed directly
global $post, $woocommerce;
?>
<div class="images">
<?php
if ( has_post_thumbnail() ) {
$image = get_the_post_thumbnail( $post->ID, apply_filters( 'single_product_large_thumbnail_size', 'shop_single' ) );
$image_title = esc_attr( get_the_title( get_post_thumbnail_id() ) );
$image_link = wp_get_attachment_url( get_post_thumbnail_id() );
$attachment_count = count( get_children( array( 'post_parent' => $post->ID, 'post_mime_type' => 'image', 'post_type' => 'attachment' ) ) );
if ( $attachment_count != 1 ) {
$gallery = '[product-gallery]';
} else {
$gallery = '';
}
echo apply_filters( 'woocommerce_single_product_image_html', sprintf( '%s', $image_link, $image_title, $image ), $post->ID );
} else {
echo apply_filters( 'woocommerce_single_product_image_html', sprintf( '<img src="%s" alt="Placeholder" />', woocommerce_placeholder_img_src() ), $post->ID );
}
?>
<?php do_action( 'woocommerce_product_thumbnails' ); ?>
So I just want to change out the image link to the external link url so if someone clicks on the picture, they will go to the external link instead of a blow up of the image
The code to do so is within the add to cart code, but I don't know how to apply it to the image:
<?php
/**
* Loop Add to Cart
*
* #author WooThemes
* #package WooCommerce/Templates
* #version 1.6.4
*/
if ( ! defined( 'ABSPATH' ) ) exit; // Exit if accessed directly
global $product;
?>
<?php if ( ! $product->is_in_stock() ) : ?>
<?php echo apply_filters( 'out_of_stock_add_to_cart_text', __( 'Read More', 'woocommerce' ) ); ?>
<?php else : ?>
<?php
$link = array(
'url' => '',
'label' => '',
'class' => ''
);
$handler = apply_filters( 'woocommerce_add_to_cart_handler', $product->product_type, $product );
switch ( $handler ) {
case "variable" :
$link['url'] = apply_filters( 'variable_add_to_cart_url', get_permalink( $product->id ) );
$link['label'] = apply_filters( 'variable_add_to_cart_text', __( 'Select options', 'woocommerce' ) );
break;
case "grouped" :
$link['url'] = apply_filters( 'grouped_add_to_cart_url', get_permalink( $product->id ) );
$link['label'] = apply_filters( 'grouped_add_to_cart_text', __( 'View options', 'woocommerce' ) );
break;
case "external" :
$link['url'] = apply_filters( 'external_add_to_cart_url', get_permalink( $product->id ) );
$link['label'] = apply_filters( 'external_add_to_cart_text', __( 'Read More', 'woocommerce' ) );
break;
default :
if ( $product->is_purchasable() ) {
$link['url'] = apply_filters( 'add_to_cart_url', esc_url( $product->add_to_cart_url() ) );
$link['label'] = apply_filters( 'add_to_cart_text', __( 'Add to cart', 'woocommerce' ) );
$link['class'] = apply_filters( 'add_to_cart_class', 'add_to_cart_button' );
} else {
$link['url'] = apply_filters( 'not_purchasable_url', get_permalink( $product->id ) );
$link['label'] = apply_filters( 'not_purchasable_text', __( 'Read More', 'woocommerce' ) );
}
break;
}
echo apply_filters( 'woocommerce_loop_add_to_cart_link', sprintf('%s', esc_url( $link['url'] ), esc_attr( $product->id ), esc_attr( $product->get_sku() ), esc_attr( $link['class'] ), esc_attr( $product->product_type ), esc_html( $link['label'] ) ), $product, $link );
?>
Sorry I'm such a nube, but I can't figure out how to get the link code the same as the 'add to cart' link code, thanks for the help!

Why not copy product-image.php to your theme or template (this will overwrite the Woocommerce default) and then change the following:
echo apply_filters( 'woocommerce_single_product_image_html', sprintf( '%s', $image_link, $image_title, $image ), $post->ID );
Where it says
<a href="%s"
Replace %s with your link, or you can register a custom post field and have a different link for each of your products.
You can ignore the "add to cart" code if this is all you are trying to accomplish. I might have misunderstood - so let me know if it's still unclear.

Related

WooCommerce: How do I add a product thumbnail image to added to cart message?

I'm using this snippet below to slightly modify Woocommerce's added to cart message. It redirects to the cart page from product pages. I'd like to add the product's thumbnail image to that Woocommerce message notification to show it clearer to the customer what has been added to the cart. Any solutions? I've tried a bunch of different ways, but no success.
function ace_add_to_cart_message_html( $message, $products ) {
$count = 0;
$titles = array();
foreach ( $products as $product_id => $qty ) {
$titles[] = ( $qty > 1 ? absint( $qty ) . ' Ɨ ' : '' ) . sprintf( _x( 'ā€œ%sā€', 'Item name in quotes', 'woocommerce' ), strip_tags( get_the_title( $product_id ) ) );
$count += $qty;
}
$titles = array_filter( $titles );
$added_text = sprintf( _n(
'%s has been added to your cart.', // Singular
'%s are added to your cart.', // Plural
$count, // Number of products added
'woocommerce' // Textdomain
), wc_format_list_of_items( $titles ) );
$message = sprintf( '%s %s', esc_url( wc_get_checkout_url() ), esc_html__( 'Proceed to checkout', 'woocommerce' ), esc_html( $added_text ) );
return $message;
}
You can use wc_add_to_cart_message action hook. try the below code.
function add_product_image_wc_add_to_cart_message_html( $message, $product_id ){
if ( has_post_thumbnail( $product_id ) ):
$image = wp_get_attachment_image_src( get_post_thumbnail_id( $product_id ), 'single-post-thumbnail' );
endif;
$message = sprintf( '<img src="'.$image[0].'" style="height: 50px;width: 50px;float: left;margin-right: 10px;" />%s', $message );
return $message;
}
add_filter( 'wc_add_to_cart_message', 'add_product_image_wc_add_to_cart_message_html', 10, 2 );
Tested and Works

Woocommerce - How to add one link "add to cart" to the loop product thumbnail?

I've tried several things adding the code to functions.php.
I think that the time I've been closer was with this code:
printf('<a class="button" href=" ..... "?>');
echo woocommerce_get_product_thumbnail();
printf('</a>');
}
But I don't know what to href on there.
previously, I removed the other liks with:
/*remove links to loop, add link to title*/
remove_action('woocommerce_before_shop_loop_item', 'woocommerce_template_loop_product_link_open', 10);
remove_action('woocommerce_after_shop_loop_item', 'woocommerce_template_loop_product_link_close', 5);
add_action('woocommerce_before_shop_loop_item_title', 'woocommerce_template_loop_product_link_open', 5);
add_action('woocommerce_before_shop_loop_item_title', 'woocommerce_template_loop_product_link_close', 20);
function woocommerce_template_loop_product_title() {
echo sprintf('<h2 class="woocommerce-loop-product__title"><a title="%2$s" href="%1$s">%2$s</a></h2>',
get_the_permalink(),
get_the_title()
);
}
Thank you very much
There may be some modifications that need to be made for it to fit your scenario.
Add the following code to your functions.php file.
This will only add the link to the thumbnail if you are on the products page.
function add_link_woocommerce_single_product_image_thumbnail_html( $html, $post_thumbnail_id ) {
/**
* This will only add the link on a single product page.
*/
if ( is_product() ) :
global $product;
$product_id = $product->get_id();
$product_url = get_permalink( $product_id );
$main_image = true;
$flexslider = (bool) apply_filters( 'woocommerce_single_product_flexslider_enabled', get_theme_support( 'wc-product-gallery-slider' ) );
$gallery_thumbnail = wc_get_image_size( 'gallery_thumbnail' );
$thumbnail_size = apply_filters( 'woocommerce_gallery_thumbnail_size', array( $gallery_thumbnail['width'], $gallery_thumbnail['height'] ) );
$image_size = apply_filters( 'woocommerce_gallery_image_size', $flexslider || $main_image ? 'woocommerce_single' : $thumbnail_size );
$full_size = apply_filters( 'woocommerce_gallery_full_size', apply_filters( 'woocommerce_product_thumbnails_large_size', 'full' ) );
$thumbnail_src = wp_get_attachment_image_src( $post_thumbnail_id, $thumbnail_size );
$full_src = wp_get_attachment_image_src( $post_thumbnail_id, $full_size );
$alt_text = trim( wp_strip_all_tags( get_post_meta( $post_thumbnail_id, '_wp_attachment_image_alt', true ) ) );
$image = wp_get_attachment_image(
$post_thumbnail_id,
$image_size,
false,
apply_filters(
'woocommerce_gallery_image_html_attachment_image_params',
array(
'title' => _wp_specialchars( get_post_field( 'post_title', $post_thumbnail_id ), ENT_QUOTES, 'UTF-8', true ),
'data-caption' => _wp_specialchars( get_post_field( 'post_excerpt', $post_thumbnail_id ), ENT_QUOTES, 'UTF-8', true ),
'data-src' => esc_url( $full_src[0] ),
'data-large_image' => esc_url( $full_src[0] ),
'data-large_image_width' => esc_attr( $full_src[1] ),
'data-large_image_height' => esc_attr( $full_src[2] ),
'class' => esc_attr( $main_image ? 'wp-post-image' : '' ),
),
$post_thumbnail_id,
$image_size,
$main_image
)
);
$html = '<div data-thumb="' . esc_url( $thumbnail_src[0] ) . '" data-thumb-alt="' . esc_attr( $alt_text ) . '" class="woocommerce-product-gallery__image">' . $image . '</div>';
return $html;
endif;
return $html;
}
add_filter( 'woocommerce_single_product_image_thumbnail_html', 'add_link_woocommerce_single_product_image_thumbnail_html', 10, 2 );

Add to cart button with quentity filed under image woocommerce

I want to add add to cart button with quantity filed under image in single product page. i have tried many code but not luck. one code which work but issue is that quantity not adding properly. i add below code my-theme/woocommerce/single-product/product-image.php before do_action( 'woocommerce_product_thumbnails' ); hook.
if ( ! is_shop() && ! is_product_taxonomy() ) {
$quantity_field = woocommerce_quantity_input( array(
'input_name' => 'product_id',
'input_value' => ! empty( $product->cart_item['quantity'] ) ? $product->cart_item['quantity'] : 1,
'max_value' => $product->backorders_allowed() ? '' : $product->get_stock_quantity(),
'min_value' => 0,
), $product, false );
$quantity_field = str_replace( array( '<div class="quantity">', "</div>" ), '', $quantity_field );
echo str_replace( '<input ', '<input style="max-width: 70px" ', $quantity_field );
}
echo apply_filters( 'woocommerce_loop_add_to_cart_link',
sprintf( '<a rel="nofollow" href="%s" data-quantity="%s" data-product_id="%s" data-product_sku="%s" class="%s">%s</a>',
esc_url( $product->add_to_cart_url() ),
esc_attr( isset( $quantity ) ? $quantity : 1 ),
esc_attr( $product->id ),
esc_attr( $product->get_sku() ),
esc_attr( isset( $class ) ? $class : 'button' ),
esc_html( $product->add_to_cart_text() )
),
$product );
Hi add this hook in your function file.
remove_action( 'woocommerce_single_product_summary','woocommerce_template_single_add_to_cart',30 );
add_action( 'woocommerce_product_thumbnails','woocommerce_template_single_add_to_cart',30 );
display as like default WC
http://screencast.com/t/u8giinLfKmzt

Woocommerce: Featured image different than product image revision needed

i've been trying to implement the modification discussed on the page: Woocommerce: Featured image different than product image
But it doesn't seem to work with the latest release of woocommerce v2.4.7
does anyone have any ideas on how to fix it?
Here is the current code from v2.4.7 i'm trying to replace. when the fix is applied it breaks the page.
<div class="images">
<?php
if ( has_post_thumbnail() ) {
$image_title = esc_attr( get_the_title( get_post_thumbnail_id() ) );
$image_caption = get_post( get_post_thumbnail_id() )->post_excerpt;
$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,
'alt' => $image_title
) );
$attachment_count = count( $product->get_gallery_attachment_ids() );
if ( $attachment_count > 0 ) {
$gallery = '[product-gallery]';
} else {
$gallery = '';
}
echo apply_filters( 'woocommerce_single_product_image_html', sprintf( '%s', $image_link, $image_caption, $image ), $post->ID );
} else {
echo apply_filters( 'woocommerce_single_product_image_html', sprintf( '<img src="%s" alt="%s" />', wc_placeholder_img_src(), __( 'Placeholder', 'woocommerce' ) ), $post->ID );
}
?>
<?php do_action( 'woocommerce_product_thumbnails' ); ?>
</div>
And here the original modified code from the page mentioned above:
<div class="images">
<?php
$attachment_ids = $product->get_gallery_attachment_ids();
isset ($placeholder_width)? : $placeholder_width=0;
isset ($placeholder_height)? : $placeholder_height=0;
if ( $attachment_ids ) {
$attachment_id = $attachment_ids[0];
if ( ! $placeholder_width )
$placeholder_width = $woocommerce->get_image_size( 'shop_catalog_image_width' );
if ( ! $placeholder_height )
$placeholder_height = $woocommerce->get_image_size( 'shop_catalog_image_height' );
$output = '<div class="imagewrapper">';
//$classes = array( 'imagewrapper' );
$classes = array();
$image_link = wp_get_attachment_url( $attachment_id );
if ( $image_link ) {
$image = wp_get_attachment_image( $attachment_id, apply_filters( 'single_product_thumbnail_size', 'shop_thumbnail' ) );
$image_class = esc_attr( implode( ' ', $classes ) );
$image_title = esc_attr( get_the_title( $attachment_id ) );
echo apply_filters( 'woocommerce_single_product_image_html', sprintf( '%s', $image_link, $image_title, $image ), $post->ID );
} else {
echo apply_filters( 'woocommerce_single_product_image_html', sprintf( '<img src="%s" alt="Placeholder" />', woocommerce_placeholder_img_src() ), $post->ID );
}
}
?>
<?php do_action( 'woocommerce_product_thumbnails' ); ?>
</div>
Any help would be much appreciated.
Thanks
Darrell
I've been struggling with the same here, but this seems to have done the trick for me:
<div class="images">
<?php
$attachment_ids = $product->get_gallery_attachment_ids();
isset ($placeholder_width)? : $placeholder_width=0;
isset ($placeholder_height)? : $placeholder_height=0;
if ( $attachment_ids ) {
$attachment_id = $attachment_ids[0];
if ( ! $placeholder_width )
$size = wc_get_image_size( 'shop_catalog' );
$placeholder_width = $size['width'];
if ( ! $placeholder_height )
$size = wc_get_image_size( 'shop_catalog' );
$placeholder_width = $size['height'];
$output = '<div class="imagewrapper">';
//$classes = array( 'imagewrapper' );
$classes = array();
$image_link = wp_get_attachment_url( $attachment_id );
if ( $image_link ) {
$image = wp_get_attachment_image( $attachment_id, apply_filters( 'single_product_large_thumbnail_size', 'shop_single' ) );
$image_class = esc_attr( implode( ' ', $classes ) );
$image_title = esc_attr( get_the_title( $attachment_id ) );
echo apply_filters( 'woocommerce_single_product_image_html', sprintf( '%s', $image_link, $image_caption, $image ), $post->ID );
} else {
echo apply_filters( 'woocommerce_single_product_image_html', sprintf( '<img src="%s" alt="%s" />', wc_placeholder_img_src(), __( 'Placeholder', 'woocommerce' ) ), $post->ID );
}
}
?>
<?php do_action( 'woocommerce_product_thumbnails' ); ?>
Just recently figured it out, so it possibly needs some finishing touches, but might point you in the right direction.
However, I'm not able to remove the product image from the gallery. The code that's supposed to make that happen is this (added to the product-thumbnails.php):
unset($attachment_ids);
All this does for me is removing ALL of the gallery thumbnails. Maybe you have figured this one out?
Put this:
unset($attachment_ids); // Don't display first image in product gallery, only as product image
right before the foreach loop in product-thumbnails.php. It's working fine for me.
Hege got it right with the replacement code for page product-image.php
To remove just the first thumbnail, and not all of them, use
unset($attachment_ids[0]);
on product-thumbnails.php

WooCommerce product image zoom

I am currently working on a Wordpress website that supports WooCommerce. I've created a product, and I've uploaded a featured image and other photos for the gallery. But there is a problem i can't figure out. It doesn't matter how big the photo is, if I put the cursor on it, it zooms almost 200%, and that's too much. Does anyone know how to reduce (or remove) the zoom feature? I've been to "sinlge-product/product-image.php" but it seems I can't find any zoom option in the code:
<?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;
?>
<div class="images">
<?php
if ( has_post_thumbnail() ) {
$image_title = esc_attr( get_the_title( get_post_thumbnail_id() ) );
$image_caption = get_post( get_post_thumbnail_id() )->post_excerpt;
$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,
'alt' => $image_title
) );
$attachment_count = count( $product->get_gallery_attachment_ids() );
if ( $attachment_count > 0 ) {
$gallery = '[product-gallery]';
} else {
$gallery = '';
}
} else {
echo apply_filters( 'woocommerce_single_product_image_html', sprintf( '<img src="%s" alt="%s" />', wc_placeholder_img_src(), __( 'Placeholder', 'woocommerce' ) ), $post->ID );
}
?>
<?php do_action( 'woocommerce_product_thumbnails' ); ?>
</div>
Thank you!
Copy / Paste this code to functions.php on your child theme. Tested and approved ;)
remove_action( 'woocommerce_after_single_product_summary', 'woocommerce_output_related_products', 20 );
add_filter( 'woocommerce_gallery_full_size', 'change_magnifier_lightbox_image_size', 20, 1 );
function change_magnifier_lightbox_image_size( $size ){
$thumbnail_id = get_post_thumbnail_id( get_the_id() );
$attachment = wp_get_attachment_metadata( $thumbnail_id, FALSE );
// Always return a value in a filter hook
return ( $attachment['width'] > 3071 || $attachment['height'] > 3071 ) ? 'preview' : 'large';
}

Resources