I'm using Woocommerce for a 1800+ product e-shop. Woocommerce comes with a built-in PrettyPhoto lightbox plugin. By default it loads the original Wordpress image size when you click to zoom the image in the lightbox.
Woocommerce calls for this original image in the template 'product-image.php'. I can modify that one. The variable $image_link calls the original size. I would like to call a custom size that I already made. I just don't know how to call it, I've looked for over a day in docs, forums and sites but can't find it.
I need to modify $image_link so that it calls my custom image size (that I added via add_image_size). But how? I know this is Wordpress basics but I'm unable to get it done...
Example of my site (click to zoom, it shows a reduced image of 1600px wide image, but I want a smaller one): http://www.affichesmarci.com/shop/the-railys-cycling-act/
<?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( $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_title, $image ), $post->ID );
} else {
echo apply_filters( 'woocommerce_single_product_image_html', sprintf( '<img src="%s" alt="Placeholder" class="bigbox" />', woocommerce_placeholder_img_src() ), $post->ID );
}
?>
<?php do_action( 'woocommerce_product_thumbnails' ); ?>
I found the solution myself.
Original variable that calls the full size image.
$image_link = wp_get_attachment_url( get_post_thumbnail_id() );
New variable that calls a custom size 'zoom'.
$image_link = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), 'zoom' );
If you already set "add_image_size" in functions, I think you could easily edit
$image = get_the_post_thumbnail( $post->ID, apply_filters( 'single_product_large_thumbnail_size', 'shop_single' ) );
to
$image = get_the_post_thumbnail( $post->ID, apply_filters( 'your_thumbnail_name', 'shop_single' ) );
you could also use WP's default sizes which is "thumbnail", "medium", "large" and "full"
ok, adding large size instead of full
$image_link = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), 'large');
Now change $image_link to $image_link[0]
echo apply_filters( 'woocommerce_single_product_image_html', sprintf( '%s', $image_link[0], $image_title, $image ), $post->ID );
Thanks for ideas :)
for get src url use this code:
$image_link = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), 'thumbnail');
and for use to tag image by alt and size:
echo '<a href="' . get_permalink() . '" class="thumb"><span class="face">
<img src="' . $image_link[0]. '" width="'.$image_link[1].'"
height="'.$image_link[2].'" loading="lazy" alt="'.get_the_title().'" /></span></a>';
Related
I develope a woo-commerce website all product image is shown but these images are not shown full size in Cart page, and I want that product images are shown full size, please help me?
$thumbnail = apply_filters( 'get_the_post_thumbnail_url', $_product->get_image(), $cart_item, $cart_item_key, 'full' );
if ( ! $product_permalink ) {
echo $thumbnail;
} else {
printf( '%s', esc_url( $product_permalink ), $thumbnail );
}
Try this code.
You need to add full in $_product->get_image('full')
<?php
$thumbnail = apply_filters( 'woocommerce_cart_item_thumbnail', $_product->get_image('full'), $cart_item, $cart_item_key );
if ( ! $product_permalink ) {
echo $thumbnail; // PHPCS: XSS ok.
} else {
printf( '%s', esc_url( $product_permalink ), $thumbnail ); // PHPCS: XSS ok.
}
?>
I want to display woocommerce product gallery to post page with galleries effect on my custom theme (based twentysixteen).
Status WooCommerce Version : 3.5.1
For display the product gallery, i using the below code:
<?php
if ( ! function_exists( 'wc_get_gallery_image_html' ) ) {
return;
}
global $product;
$columns = apply_filters( 'woocommerce_product_thumbnails_columns', 4 );
$post_thumbnail_id = $product->get_image_id();
$wrapper_classes = apply_filters( 'woocommerce_single_product_image_gallery_classes', array(
'woocommerce-product-gallery',
'woocommerce-product-gallery--' . ( $product->get_image_id() ? 'with-images' : 'without-images' ),
'woocommerce-product-gallery--columns-' . absint( $columns ),
'images',
'flex-control-thumbs0',
'woocommerce-product-gallery__trigger',
) );
?>
<div class="<?php echo esc_attr( implode( ' ', array_map( 'sanitize_html_class', $wrapper_classes ) ) ); ?>" data-columns="<?php echo esc_attr( $columns ); ?>" style="opacity: 1; transition: opacity .25s ease-in-out;">
<figure class="woocommerce-product-gallery__wrapper">
<?php
if ( $product->get_image_id() ) {
$html = wc_get_gallery_image_html( $post_thumbnail_id, true );
} else {
$html = '<div class="woocommerce-product-gallery__image--placeholder">';
$html .= sprintf( '<img src="%s" alt="%s" class="wp-post-image" />', esc_url( wc_placeholder_img_src( 'woocommerce_single' ) ), esc_html__( 'Awaiting product image', 'woocommerce' ) );
$html .= '</div>';
}
echo apply_filters( 'woocommerce_single_product_image_thumbnail_html', $html, $post_thumbnail_id ); // phpcs:disable WordPress.XSS.EscapeOutput.OutputNotEscaped
do_action( 'woocommerce_product_thumbnails' );
?>
</figure>
</div>
The product gallery now already displayed, but just image. Not has effect slider or zoom.
You can see the screenshot of my page on this link:
https://imgur.com/a/FnBJhtf
How i must do for show the effect of slider and zoom?
After WooCommerce 3.0, there is a significant frontend change that can be broken down into three separate new features;
Image zoom / magnification
Lightbox
Slider
To enable each of these features in your theme you must declare support using add_theme_support() like so;
add_action( 'after_setup_theme', 'yourtheme_setup' );
function yourtheme_setup() {
add_theme_support( 'wc-product-gallery-zoom' );
add_theme_support( 'wc-product-gallery-lightbox' );
add_theme_support( 'wc-product-gallery-slider' );
}
Code goes in functions.php
I want to change the layout of the storefront theme of woocommerce. So far I'm getting the product image by:
echo $product->get_image('full');
It displays the image without the lightbox and zoom effect. How do I add the "regular" storefront style to it?
If you look to the woocommerce template file single-product/product-image.php, you will need some similar code to get the displayed WooCommerce image with the Zoom and the style.
This code should be:
global $post, $product;
if( ! is_object ( $product ) && $post->post_type = 'product' )
$product = wc_get_product($post->ID);
if( is_object ( $product ) ):
$columns = apply_filters( 'woocommerce_product_thumbnails_columns', 4 );
$thumbnail_size = apply_filters( 'woocommerce_product_thumbnails_large_size', 'full' );
$post_thumbnail_id = get_post_thumbnail_id( $post->ID );
$full_size_image = wp_get_attachment_image_src( $post_thumbnail_id, $thumbnail_size );
$placeholder = has_post_thumbnail() ? 'with-images' : 'without-images';
$wrapper_classes = apply_filters( 'woocommerce_single_product_image_gallery_classes', array(
'woocommerce-product-gallery',
'woocommerce-product-gallery--' . $placeholder,
'woocommerce-product-gallery--columns-' . absint( $columns ),
'images',
) );
?>
<div id="product-<?php the_ID(); ?>" <?php post_class(); ?>>
<div class="<?php echo esc_attr( implode( ' ', array_map( 'sanitize_html_class', $wrapper_classes ) ) ); ?>" data-columns="<?php echo esc_attr( $columns ); ?>" style="opacity: 0; transition: opacity .25s ease-in-out;">
<figure class="woocommerce-product-gallery__wrapper">
<?php
$attributes = array(
'title' => get_post_field( 'post_title', $post_thumbnail_id ),
'data-caption' => get_post_field( 'post_excerpt', $post_thumbnail_id ),
'data-src' => $full_size_image[0],
'data-large_image' => $full_size_image[0],
'data-large_image_width' => $full_size_image[1],
'data-large_image_height' => $full_size_image[2],
);
if ( has_post_thumbnail() ) {
$html = '<div data-thumb="' . get_the_post_thumbnail_url( $post->ID, 'shop_thumbnail' ) . '" class="woocommerce-product-gallery__image"><a href="' . esc_url( $full_size_image[0] ) . '">';
$html .= get_the_post_thumbnail( $post->ID, 'shop_single', $attributes );
$html .= '</a></div>';
} else {
$html = '<div class="woocommerce-product-gallery__image--placeholder">';
$html .= sprintf( '<img src="%s" alt="%s" class="wp-post-image" />', esc_url( wc_placeholder_img_src() ), esc_html__( 'Awaiting product image', 'woocommerce' ) );
$html .= '</div>';
}
echo apply_filters( 'woocommerce_single_product_image_thumbnail_html', $html, get_post_thumbnail_id( $post->ID ) );
// Uncommenting this will display the product thumbnails gallery below the main image
// do_action( 'woocommerce_product_thumbnails' );
?>
</figure>
</div>
</div>
<?php
endif;
This will display the image with the zoom in a classic storefront styling
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
I set up a WooCommerce Theme. Now I'm trying to visualize the Product Gallery Images on the Product Detail-Pages with Flexslider.
I implemented the ".js" and the Styles that are needed.
But Im not quite sure where to put in which Code. Im guessing I have to manipulate the "product-image.php" inside the "WooCommerce/single-product"-Folder.
This is what I have done so far inside that File:
echo apply_filters( 'woocommerce_single_product_image_html', sprintf( '
<div class="flexslider">
<ul class="slides">
<li>
%s
</li>
</ul>
</div>', $image_link, $image_caption, $image ), $post->ID );
I want it to look something similar to this:
http://www.twothirds.com/product/aruba_sand/
Any Ideas of what am I doing wrong so far?
Looking forward for any help :)
Custom Flexslider for Woocommerce.
* This template needs be overridden by copying it to yourtheme/woocommerce/single-product/product-thumbnails.php. replace the contents of this template with code provided. Woocommerce Version 2.5.5 April 2016.
if ( ! defined( 'ABSPATH' ) ) {
exit; // Exit if accessed directly
}
global $post, $product, $woocommerce;
$attachment_ids = $product->get_gallery_attachment_ids();
if ( $attachment_ids ) {
$loop = 0;
$columns = apply_filters( 'woocommerce_product_thumbnails_columns', 3 );
?>
<div id="shop-slider" class="flexslider">
<ul class="slides"><?php
foreach ( $attachment_ids as $attachment_id ) {
$image_link = wp_get_attachment_url( $attachment_id );
if ( ! $image_link )
continue;
$image_title = esc_attr( get_the_title( $attachment_id ) );
$image_caption = esc_attr( get_post_field( 'post_excerpt', $attachment_id ) );
$image = wp_get_attachment_image( $attachment_id, apply_filters( 'single_product_small_thumbnail_size', 'shop_single' ), 0, $attr = array(
'title' => $image_title,
'alt' => $image_title
) );
echo apply_filters( 'woocommerce_single_product_image_thumbnail_html', sprintf( '<li>%s</li>', $image ), $attachment_id, $post->ID, $image_class );
$loop++;
}
?></ul>
</div>
<?php
}
Then follow this tutorial to get flexslider going http://flexslider.woothemes.com/.
Hope this helps.