1

How can I show images for just some of the items but not for others?

I'm working on a restaurant menu with online ordering, displaying the food menu (woocommerce products) with shortcodes - eg. [product_category category="starters" orderby="date" order="asc"] etc.

A lot of the items do not require an image, but I've found that if a product does not have an image assosciated with it then woocommerce automatically adds an ugly placeholder to the listings.

I can turn off all the thumbnails, but I still need thumbnail support for any products that do require an image.

If I delete the default placeholder image it gets replaced with text "placeholder"!

If I replace their placeholder with a small transparent .png then that gets upscaled to whatever size the thumbs are, creating an undesirable "missing image" gap.

No idea what else to try? Thanks

0

3 Answers 3

6

woocommerce_template_loop_product_thumbnail is pluggable so you can override it with your own code. Any time you see a function anywhere in a WordPress setting that looks like this:

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();
}
}

the if ( ! function_exists('something' ) ) check indicates a pluggable function that you can override by creating a function of the same name in you theme or child theme.

Woo's function essentially shows the thumbnail if it exists and the placeholder if it does not, so you'd just need to eliminate that part in your own version, like so:

function woocommerce_template_loop_product_thumbnail() {
    global $post;
    if ( has_post_thumbnail() )
          echo get_the_post_thumbnail( $post->ID, 'shop_catalog' );
}
1
  • Thanks for that Helga (the viking) :) And thanks for taking the time to explain how & why it works - very useful Aug 5, 2013 at 16:02
4

Found an answer elsewhere http://www.peterrknight.com/woocommerce-tutorial-better-product-listings-for-imageless-products-part-1/ which I include. Could probably be tidied-up or simplified, but appears to work perfectly by removing the default image placeholder for any products which don't have an image:

function before_imageless_product() {
if( !has_post_thumbnail( get_the_id() ) ){
    remove_action( 'woocommerce_before_shop_loop_item_title', 'woocommerce_template_loop_product_thumbnail', 10 );
    echo '<div class="no-image">';
}
}
add_action( 'woocommerce_before_shop_loop_item', 'before_imageless_product', 9 );

function after_imageless_product() {
if( !has_post_thumbnail( get_the_id() ) ){
    add_action( 'woocommerce_before_shop_loop_item_title',      'woocommerce_template_loop_product_thumbnail', 10 );
    echo '</div>';
}
}
add_action( 'woocommerce_after_shop_loop_item', 'after_imageless_product', 9 );
1
  • Thanks for the code, works great for products. Is there a way to modify this for product categories instead? Dec 13, 2018 at 11:33
-2

this is an easy way to remove placeholder default image. just follow the steps:

1: go to to woocommerce plugin
2: go to templates folder
3: then go to single product folder

there you will find product-image.php file. open it and only remove the below mentioned code

 else {
   echo apply_filters( 'woocommerce_single_product_image_html', sprintf( '<img src="%s" alt="Placeholder" />', woocommerce_placeholder_img_src() ), $post->ID );
 }

your problem will be solve.:)

thanks

1
  • 3
    You should never hack WP core, theme and plugin files (at least not, if there are other ways). As soon as you update the plugin etc., your changes are gone.
    – tfrommen
    Dec 19, 2013 at 12:39

Not the answer you're looking for? Browse other questions tagged or ask your own question.