Woocommerce Question posted in
The official Woocommerce documentation can be found here.

Create function to display an image or placeholder image for a single product – Woocommerce

I am looking to create a function that would allow me to display an image with the "slug name" of the product, but only if this image is present in the folder, and which displays a placeholder image if this image does not exist !

Here is my current code:

function custom_hero_image( $post_id ) { 
    $product = get_post( $post_id ); 
    $slug = $product->post_name; 

    if ( is_product( $post_id ) ) {
        if ( has_post_thumbnail() ) {
            $html = '<img class="jarallax-img" src="'. get_template_directory_uri() .'/inc/assets/img/shop/hero/'.$slug.'_hero.jpg">';
        }
    } else {
        $html = '<img class="jarallax-img" src="'. get_template_directory_uri() .'/inc/assets/img/hero/shop-hero.jpg">';
    }
    return $html;
}

And this is the code for the single-product.php file

<?php
  // get the post ID outside the Loop
  $post_id = get_queried_object_id();
  // print the <img>
  echo custom_hero_image( $post_id );
?>

In this code, the image is well displayed when it exists but when there is no image to display, the placeholder image is not displayed!

Could you help me and tell me where is my mistake?

Let me know if you have any questions.

Tags:

2

Answers


  1. 0 
    function custom_hero_image( $post_id ) {
    $product = get_post( $post_id );
    $slug    = $product->post_name;

    if ( is_product( $post_id ) ) {
        if ( has_post_thumbnail() ) {
            $html = '<img class="jarallax-img" src="' . get_template_directory_uri() . '/inc/assets/img/shop/hero/' . $slug . '_hero.jpg">';
        } else {
            $html = '<img class="jarallax-img" src="' . get_template_directory_uri() . '/inc/assets/img/hero/shop-hero.jpg">';
        }
    }
    return $html;
}
    Login or Signup to reply.
  2. 0

    you can just simply use onerror attribute on the image tag, this will fired if the image cannot be accessed, or use file_exists function to determine if the image is exists,

    Simple ways:

    function custom_hero_image( $post_id ) { 
    $product = get_post( $post_id ); 
    $slug = $product->post_name; 

    // Rearrange the script to better readibility:
    $placeholder_image = get_template_directory_uri() .'/inc/assets/img/hero/shop-hero.jpg';
    $slug_image =  get_template_directory_uri() .'/inc/assets/img/shop/hero/'.$slug.'_hero.jpg';

    // Build the image tag
    $html = '<img class="jarallax-img" src="'. $slug_image . '" onerror="this.onerror=null;this.src=`'. $placeholder_image .' `">';
    
    // Explanation:
    // - onerror="this.onerror=null;this.src=`'. $placeholder_image .' `";
    //   ^^^^^^^  ^^^^^^^^^^^^^^^^^ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    //    (1)        (2)                      (3)
    //
    // 1. Add `onerror` handle which will be fired if the image (`slug_image`) 
    //    cannot be accessed,
    // 2. Set `this.onerror` to null which will remove (assign the handler to null) 
    //    the halder because if the `placeholder_image` is also not accessible,
    //    there will not causing infinity loop of `onerror`
    // 3. Set current source (`src` tag) to `placeholder_image`

    
    return $html;
}

    Using file_exists:

    function custom_hero_image( $post_id ) { 
    $product = get_post( $post_id ); 
    $slug = $product->post_name; 

    // Change the if Condition
    //                      Change the position to here, instead of nested `if-else`
    //                         vvvvvvvvvvvvvvvvvvvvvvvv
    if ( is_product( $post_id ) && has_post_thumbnail() ) {
        $html = '<img class="jarallax-img" src="'. get_template_directory_uri() .'/inc/assets/img/shop/hero/'.$slug.'_hero.jpg">';
    } else {
        $html = '<img class="jarallax-img" src="'. get_template_directory_uri() .'/inc/assets/img/hero/shop-hero.jpg">';
    }
    return $html;
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search