I have a short piece of code that changes store images through the first gallery image.
This works great, but how do you change this code for displaying cart thumbnails as the first gallery image?
Any help or pointers to what I should be doing to achieve this would be very much appreciated.
My code:
add_action( 'woocommerce_init', 'new_replace_loop_product_thumbnail' );
function new_replace_loop_product_thumbnail() {
remove_action( 'woocommerce_before_shop_loop_item_title', 'woocommerce_template_loop_product_thumbnail', 10 );
function new_replace_product_thumbnail() {
global $product;
$attachment_id = $product->get_gallery_attachment_ids()[0];
echo "<img src='" . wp_get_attachment_url( $attachment_id ) . "'>";
}
add_action( 'woocommerce_before_shop_loop_item_title', 'new_replace_product_thumbnail', 10 );
}
You could use the woocommerce_cart_item_thumbnail filter hook.
Note: wp_get_attachment_image() contains several (optional) parameters with which the HTML img element that is returned can be adjusted.
Parameters
$attachment_id
(int) (Required) Image attachment ID.
$size
(string|array) (Optional) Image size. Accepts any valid image size, or an array of width and height values in pixels (in that order).
Default value: 'thumbnail'
$icon
(bool) (Optional) Whether the image should be treated as an icon.
Default value: false
$attr
(string|array) (Optional) Attributes for the image markup.
'src'
(string) Image attachment URL.
'class'
(string) CSS class name or space-separated list of classes. Default attachment-$size_class size-$size_class, where $size_class is the image size being requested.
'alt'
(string) Image description for the alt attribute.
'srcset'
(string) The 'srcset' attribute value.
'sizes'
(string) The 'sizes' attribute value.
'loading'
(string|false) The 'loading' attribute value. Passing a value of false will result in the attribute being omitted for the image. Defaults to 'lazy', depending on wp_lazy_loading_enabled().
Default value: ''
Return
(string) HTML img element or empty string on failure.
So to answer your question, you could use:
function filter_woocommerce_cart_item_thumbnail( $thumbnail, $cart_item, $cart_item_key ) {
// Get product
$product = $cart_item['data'];
// Get gallery image ids
$attachment_ids = $product->get_gallery_image_ids();
// NOT empty
if ( ! empty ( $attachment_ids ) ) {
// First
$attachment_id = $attachment_ids[0];
// New thumbnail
$thumbnail = wp_get_attachment_image( $attachment_id, 'woocommerce_thumbnail' );
}
return $thumbnail;
}
add_filter( 'woocommerce_cart_item_thumbnail', 'filter_woocommerce_cart_item_thumbnail', 10, 3 );
Related
I'm building a website with some articles accessible only for Members. All articles, accessible or not are shown on a page and i would like to add an icon on top of the featured image for people to understand which articles they can see for free or not.
Could you help ? I've already read the doc about featured image but my brain can't make the whole thing...
Here's what i already tried :
function article_reserve( $title ) {
if ( has_tag( 'abonne' ) ) {
$title = 'test ' . $title;
}
return $title;
}
add_filter( 'the_title', 'article_reserve' );
It change the title but i'm trying to change the featured image
Also tried that after comments :
function wpse_post_thumbnail_html( $html, $post_id, $post_thumbnail_id, $size, $attr ) {
// Optionally add any logic here for determining what markup to output.
// $html will be an empty string if there is no post thumbnail.
if ( has_tag( 'abonne' ) ) {
$new_html = '<img src="https://placekitten.com/g/600/600" alt="kitten">';
}
return $new_html;
}
add_action( 'post_thumbnail_html', 'wpse_post_thumbnail_html', 10, 5 );
How can I get the URL of the first image that is uploaded to the product gallery?
I am not talking about the featured image.
I would appreciate any suggestions.
The following will give you the first image Url from the product gallery:
global $post, $product;
if( is_a($product, 'WC_Product'))
$product = wc_get_product($post->ID);
$product = wc_get_product(40);
// Get the array of the gallery attachement IDs
$attachment_ids = $product->get_gallery_image_ids();
if( sizeof($attachment_ids) > 0 ){
$first_attachment_id = reset($attachment_ids);
$link = wp_get_attachment_image_src( $first_attachment_id, 'full' )[0];
// Output
echo $link;
}
I tried using suggestions from other posts but they do not work. I am looking to not show the featured product image in my product images area/image gallery because I am using the featured image in the header as a background image and its too wide to be in the gallery.
So far this is the closest thing to working but I get an error. It does however do what I need.
Any way to fix this so i do not get the error?
Here is my code:
add_filter('woocommerce_single_product_image_thumbnail_html', 'remove_featured_image', 10, 3);
function remove_featured_image($html, $attachment_id, $post_id) {
$featured_image = get_post_thumbnail_id($post_id);
if ($attachment_id != $featured_image) {
return $html;
}
return '';
}
And here is the error:
Missing argument 3 for remove_featured_image() in /home/…/plugins/my-custom-functions/inc/php/functional.php(93) : eval()'d code on line 4
Warning: Missing argument 3 for remove_featured_image() in /home…/plugins/my-custom-functions/inc/php/functional.php(93) : eval()'d code on line 4
There is only 2 arguments for woocommerce_single_product_image_thumbnail_html filter hook.
So you have to change a little bit your code to avoid the error, this way:
add_filter('woocommerce_single_product_image_thumbnail_html', 'remove_featured_image', 10, 2);
function remove_featured_image($html, $attachment_id ) {
global $post, $product;
$featured_image = get_post_thumbnail_id( $post->ID );
if ( $attachment_id == $featured_image )
$html = '';
return $html;
}
Code goes in function.php file of your active child theme (or theme) or also in any plugin file.
References for filter hook woocommerce_single_product_image_thumbnail_html:
woocommerce templates: single-product/product-image.php
woocommerce templates: single-product/product-thumbnails.php
This is what I did, hope it's helpful.
I used the Meta Box plugin to create a custom checkbox in the product edit page (in the Wordpress backend). The checkbox is basically "Hide featured image from product gallery" and here's the code (to be placed in the functions.php file):
function hide_first_img( $meta_boxes ) {
$prefix = 'meta_box';
$meta_boxes[] = array(
'id' => 'hide_img',
'title' => esc_html__( 'Hide first image', 'custom_meta_boxes' ),
'post_types' => array('product'),
'context' => 'advanced',
'priority' => 'default',
'autosave' => 'false',
'fields' => array(
array(
'id' => $prefix . '_hide_first_image',
'name' => esc_html__( 'Hide first image in product gallery', 'custom_meta_boxes' ),
'type' => 'checkbox',
'desc' => esc_html__( 'Check to hide the first image in the gallery', 'custom_meta_boxes' ),
),
),
);
return $meta_boxes;
}
add_filter( 'rwmb_meta_boxes', 'hide_first_img' );
Then I used LoicTheAztec's code, which works great, to remove the image ONLY if the checkbox is checked, like this (to be placed in the functions.php file):
function remove_featured_image($html, $attachment_id ) {
if( rwmb_meta( 'meta_box_hide_first_image' )){
global $post, $product;
$featured_image = get_post_thumbnail_id( $post->ID );
if ( $attachment_id == $featured_image )
$html = '';
}
return $html;
}
add_filter('woocommerce_single_product_image_thumbnail_html', 'remove_featured_image', 10, 2);
Finally, only for FLATSOME THEME users, to also hide the first thumbnail in the gallery, I directly edited the following file in my child theme folder: \flatsome-child\woocommerce\single-product\product-gallery-thumbnails.php
Maybe there's some similar file for the default Woocomerce gallery or for other themes:
// show first thumbnail only if meta box is NOT checked
<?php if( !rwmb_meta( 'meta_box_hide_first_image' )) : ?>
<div class="col is-nav-selected first">
<a>
<?php
$image_id = get_post_thumbnail_id($post->ID);
$image = wp_get_attachment_image_src( $image_id, apply_filters( 'woocommerce_gallery_thumbnail_size', 'woocommerce_'.$image_size ) );
$image_alt = get_post_meta( $image_id, '_wp_attachment_image_alt', true );
$image = '<img src="'.$image[0].'" alt="'.$image_alt.'" width="'.$gallery_thumbnail['width'].'" height="'.$gallery_thumbnail['height'].'" class="attachment-woocommerce_thumbnail" />';
echo $image;
?>
</a>
</div>
<?php endif; ?>
I can confirm that this is working live on my site right now.
I want to display brand logos on all product pages.
I've uploaded the logos in the theme editor by going to products->attributes->brands...clicking on the sprocket allows one to upload a thumbnail image.
There are several plugins that can achieve the same thing, but there must be a way to retrieve the information of the brand thumbnail.
If you're using the WooCommerce Brands plugin, the following code supports obtaining a brand thumbnail URL:
global $post;
$brands = wp_get_post_terms( $post->ID, 'product_brand' );
if ( $brands )
$brand = $brands[0];
if ( ! empty( $brand ) ) {
$thumbnail = get_brand_thumbnail_url( $brand->term_id );
$url = get_term_link( $brand->slug, 'product_brand' );
echo '<img class="woocommerce-brand-image-single" src="'. $thumbnail . '"/>';
}
.. If you are looking up via a term ID, then the following code will also obtain the thumbnail URL:
$url = get_brand_thumbnail_url( $term->term_id, 'full' );
I need a help on woo-commerce to override the cart product image thumbnail.
I am creating a plugin for customizing the product in the detail page and if we do "add to cart" it will be updated in the cart page with a customized thumbnail.
If any hook is available for overriding the image, please let me know.
I've spent many hours searching for the answer also and even asked a Stackoverflow question (WooCommerce: change product image permalink with filter/action hook) which now happens to be duplicate (could not find this question prior to submitting my own).
The answer:
The hook is woocommerce_cart_item_thumbnail.
So in your functions.php add
function custom_new_product_image($a) {
$class = 'attachment-shop_thumbnail wp-post-image'; // Default cart thumbnail class.
$src = [PATH_TO_YOUR_NEW_IMAGE];
// Construct your img tag.
$a = '<img';
$a .= ' src="' . $src . '"';
$a .= ' class="' . $class . '"';
$a .= ' />';
// Output.
return $a;
}
add_filter( 'woocommerce_cart_item_thumbnail', 'custom_new_product_image' );
and your thumbnails will be replaced (more processing needed if you want to change each thumbnail individually).
To change thumbnail image size of WooCommerce cart page you need next steps:
In function.php create the size you need:
if ( function_exists( 'add_image_size' ) ) {
add_image_size( 'custom-thumb', 100, 100, true ); // 100 wide and 100 high
}
In cart.php which should be located in your_theme\woocommerce\cart\cart.php find
$thumbnail = apply_filters( 'woocommerce_cart_item_thumbnail', $_product->get_image( 'custom-thumb' ), $cart_item, $cart_item_key );
Please review the WooCommerce cart templates in woocommerce/templates/cart/cart.php.
There is a clear filter woocommerce_cart_item_thumbnail for the product thumbnail in the cart.
$thumbnail = apply_filters( 'woocommerce_cart_item_thumbnail', $_product->get_image(), $cart_item, $cart_item_key );
Change 'medium' for your required image size:
/**
* Update cart product thumbnail
*/
function woocommerce_cart_item_thumbnail_2912067($image, $cartItem, $cartItemKey)
{
$id = ($cartItem['variation_id'] !== 0 ? $cartItem['variation_id'] : $cartItem['product_id']);
return wp_get_attachment_image(get_post_thumbnail_id((int) $id), 'medium');
}
add_filter('woocommerce_cart_item_thumbnail', 'woocommerce_cart_item_thumbnail_2912067', 10, 3);
This results in your not having to update the core WooCommerce template files.