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.

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.