WooCommerce - where can I edit HTML generated by hooks?

Question

I'm new to WooCommerce. Anyhow, I want to create my own theme, so I followed the guidelines and copied accross the core template files to /mywordpresstheme/woocommerce/.

That all works great and I'm editing the templates just fine.

However, the way hooks and actions work in WooCommerce is baffling me and I can't work out where certain parts of generated HTML are coming from.

For example, in content-product.php, there is a hook that gets the image:

<?php
/*
* woocommerce_before_shop_loop_item_title hook
*
* @hooked woocommerce_show_product_loop_sale_flash - 10
* @hooked woocommerce_template_loop_product_thumbnail - 10
*/
do_action( 'woocommerce_before_shop_loop_item_title' );
?>

But what is this? Where does it come from?? Is there any clue in the action name as to where I could locate the HTML being generated for the purpose of editing it?

I've read the article on 'hooks and filters' on WooCommerce, but it explains nothing regarding where or how to change these on a case for case basis.

Any help would be greatly appreciated.

I'm new to this system and I'm sure I'm simply over-looking something very obvious.

Thanks, Mikey.

Kumquat

Answer 1

But what is this? Where does it come from?? Is there any clue in the action name as to where I could locate the HTML being generated for the purpose of editing it?

This is an action hook. It isn't doing anything by itself per say, but the functions listed in the comments hook into it and therefore run when this function is triggered. It says in the comments that function woocommerce_template_loop_product_thumbnail is the function responsible for getting the thumbnail. You can find this function inside the Woocommerce plugin. I use the Sublime Text editor (though I think others will do this too) to search the whole folder for that phrase and it tells me exactly what file it is in. In this case it is what is called a pluggable function and is located in woocommerce-template.php. (It's now called wc-template-hooks.php in version 2.1+)

A pluggable function means that you define a new version of the function with the same name in your theme's functions.php

function woocommerce_template_loop_product_thumbnail(){
  echo "apple";
}

If you put the above in your functions.php then instead of Woo's woocommerce_template_loop_product_thumbnail() you'd merely see the word apple.

I've read the article on 'hooks and filters' on WooCommerce, but it explains nothing regarding where or how to change these on a case for case basis.

You will make all changes in your theme's functions.php and a case by case basis isn't necessary. All hooks and filters behave the same. That said, they aren't the easiest thing to learn so have patience with yourself. I found filters to be especially tough to wrap my head around.

In a spot of gratuitous self-promotion I wrote a series of articles on the basics of WordPress hooks and filters (one article says it is for Thematic hooks, but a hook is a hook! ) that are all the things I wish people had told me at the beginning of my WordPress career.

Mestas

Thanks for this, it's been a help in nodding me to the right direction. I just wish WooCommerce had better docs...they are...scarce, at best! Thanks again. – Kumquat

You're welcome. If you have bought anything from them they are usually pretty good with support. – Mestas

And hooked functions is inside wc-template-functions.php – Paver

Answer 2

The answer to this question pointed me in the right direction, as well as the discussion here:

https://www.webdesignvista.com/how-to-show-different-product-image-in-woocommerce-shop-category-and-single-product-pages/

I needed to use separate images for woocommerce product catalog thumbnails. The images needed to be specific, unique, 300x300 images that would only be used for the catalog thumbs and not appear on the product pages.

Here is my solution:

If a separate catalog thumb image was to be used, I named it productSKU_shopthumb.jpg where productSKU is the unique woocommerce product SKU for the product. Each image is optimized for display at the default catalog thumb size of 300x300 (woocommerce pre-defined size "woocommerce_thumbnail"). I uploaded the images to a separate directory under the uploads directory. Lets call it wc_custom_thumbs

If a custom catalog thumb image is not found for a product, the code reverts back to the default behavior of using the cropped main product image. This way, custom catalog thumbs can be created over time.

Here is my code:

// Replace the default product thumbnail displayed on the shop browsing pages
// with a custom image prepared especially to display well as a square.

add_action( 'woocommerce_init', 'cm_display_custom_shop_image');

// Display a custom image prepared especially to display well as a square.
// If a custom image is not available, revert to default behavior which is
// to display the product main image cropped into a square (cropped into
// whatever the thumbnail size is defined to be... usually a square).
//
// Note that custom images must be named with product SKU to be found.
// This code will look for a custom shop image named <product SKU>_shopthumb.jpg
// 

function cm_display_custom_shop_image()
{
  remove_action( 'woocommerce_before_shop_loop_item_title', 'woocommerce_template_loop_product_thumbnail', 10 );

  function cm_replace_product_thumbnail()
  {
    global $product;
    
    $prod_sku = $product->get_sku();
    $uploads = wp_get_upload_dir();
    if ( $uploads && false === $uploads['error'] )
    {
      // Check that a custom shop thumb exists
      // in the wc_custom_thumbs uploads directory.
      $uploads_url = $uploads['baseurl'];
      $uploads_path = $uploads['basedir'];
      $custom_shop_thumb_filename = $uploads_path . '/wc_custom_thumbs/' . $prod_sku . '_shopthumb.jpg';

      if (file_exists($custom_shop_thumb_filename))
      {
        echo "<img src='" . $uploads_url . '/wc_custom_thumbs/' . $prod_sku . "_shopthumb.jpg'>";
      }
      else
      {
        // There is no custom image present.
        // Revert back to the default behavior.
      
        echo woocommerce_get_product_thumbnail();      
      }
    }
    else
    {
      // Error.
      // The uploads dir does not exist. This should never happen.
      // Revert back to the default behavior.
      
      echo woocommerce_get_product_thumbnail();

    } // end else

  } // end function cm_replace_product_thumbnail
    
  add_action( 'woocommerce_before_shop_loop_item_title', 'cm_replace_product_thumbnail', 10 );
    
} // end function cm_display_custom_shop_image

Oneiromancy