WooCommerce - Custom thumbnails and default fall back image placeholder
Asked Answered
S

2

6

I just want to insert a wrapper to the woocommerce_get_product_thumbnail I can see that my wrapper appeared but It doesn't have a fall back image if there's no image.

How do I output the default woocommerce thumbnail?

This is my incomplete code:

remove_action( 'woocommerce_before_shop_loop_item_title', 'woocommerce_template_loop_product_thumbnail', 10);
add_action( 'woocommerce_before_shop_loop_item_title', 'woocommerce_template_loop_product_thumbnail', 10);

if ( ! function_exists( 'woocommerce_template_loop_product_thumbnail' ) ) {
    function woocommerce_template_loop_product_thumbnail() {
        echo woocommerce_get_product_thumbnail();
    } 
}
if ( ! function_exists( 'woocommerce_get_product_thumbnail' ) ) {   
    function woocommerce_get_product_thumbnail( $size = 'shop_catalog', $placeholder_width = 0, $placeholder_height = 0  ) {
        global $post, $woocommerce;
        $output = '<div class="col-lg-4">';

        if ( has_post_thumbnail() ) {               
            $output .= get_the_post_thumbnail( $post->ID, $size );
        } else {
            how to show the default woocommerce thumb 
        }                       
        $output .= '</div>';
        return $output;
    }
}
Serpentine answered 12/7, 2016 at 5:35 Comment(1)
Why don't you just put echo woocommerce_get_product_thumbnail(); in your else part of the conditional?Ferree
J
13

I have add an init hook for remove_action & add_action at the beginning to fire it when WordPress/WooCommerce Initialises…

As $placeholder_width = 0, $placeholder_height = 0 is deprecated since woocommerce version 2.0 (see this). You don't need them anymore and it could be part of your problem.

Note: The answer of pallavi is correct for $output .= wc_placeholder_img( $size ); in your else statement. I have already up voted him for this…

So I have changed a little bit your code:

add_action('init', function(){
    remove_action( 'woocommerce_before_shop_loop_item_title', 'woocommerce_template_loop_product_thumbnail', 10);
    add_action( 'woocommerce_before_shop_loop_item_title', 'woocommerce_template_loop_product_thumbnail', 10);
});

if ( ! function_exists( 'woocommerce_template_loop_product_thumbnail' ) ) {
    function woocommerce_template_loop_product_thumbnail() {
        echo woocommerce_get_product_thumbnail();
    } 
}

if ( ! function_exists( 'woocommerce_get_product_thumbnail' ) ) {   
    function woocommerce_get_product_thumbnail( $size = 'shop_catalog' ) {
        global $post, $woocommerce;
        $output = '<div class="col-lg-4">';

        if ( has_post_thumbnail() ) {               
            $output .= get_the_post_thumbnail( $post->ID, $size );
        } else {
             $output .= wc_placeholder_img( $size );
             // Or alternatively setting yours width and height shop_catalog dimensions.
             // $output .= '<img src="' . woocommerce_placeholder_img_src() . '" alt="Placeholder" width="300px" height="300px" />';
        }                       
        $output .= '</div>';
        return $output;
    }
}
Jumna answered 12/7, 2016 at 13:47 Comment(3)
I'm facing the same issue as the OP, wondering if we should put this block of code in the functions.php under our child theme or directly in wc-template-functions.php?Jarrell
@Jarrell Oh sorry, Yes this code goes in function.php file of your active child theme (or theme) … but certainly not in wc-template-functions.phpJumna
It looks like we're missing a closing ); at the end of the add_action init function at the top.Yvoneyvonne
H
11

Try below code

remove_action( 'woocommerce_before_shop_loop_item_title', 'woocommerce_template_loop_product_thumbnail', 10);
add_action( 'woocommerce_before_shop_loop_item_title', 'woocommerce_template_loop_product_thumbnail', 10);

if ( ! function_exists( 'woocommerce_template_loop_product_thumbnail' ) ) {
    function woocommerce_template_loop_product_thumbnail() {
        echo woocommerce_get_product_thumbnail();
    } 
}
if ( ! function_exists( 'woocommerce_get_product_thumbnail' ) ) {   
    function woocommerce_get_product_thumbnail( $size = 'shop_catalog', $placeholder_width = 0, $placeholder_height = 0  ) {
        global $post, $woocommerce;
        $output = '<div class="col-lg-4">';

        if ( has_post_thumbnail() ) {               
            $output .= get_the_post_thumbnail( $post->ID, $size );
        } else {
             $output .= wc_placeholder_img( $size );
        }                       
        $output .= '</div>';
        return $output;
    }
}
Harner answered 12/7, 2016 at 6:1 Comment(0)

© 2022 - 2024 — McMap. All rights reserved.