Display WordPress WooCommerce Hooks In Exact Location On Page

What I’ve been searching for for the past week+ is a way to display the name of a WordPress Hook (actions & filters) on the WooCommerce product page – in their exact location on the page – so I can see how everything is laid out. Like how Google Maps displays business names next to the business.

Some PHP functions print WordPress Hooks on the page, but damn if they’re all friggin’ debug mode and dump the info in the footer or header or wherever.

Most of the plugins I found were too old and didn’t work or just debug-dumped info and covered the whole page.

Finally found Debugging with the “all” hook on WordPress.org.

It’s a start:

function wporg_debug() {
	echo '<p style="color:purple;">' . current_action() . '</p>';
}
add_action( 'woocommerce_before_single_product', 'wporg_debug' );
add_action( 'woocommerce_before_single_product_summary', 'wporg_debug' );
add_action( 'woocommerce_single_variation', 'wporg_debug' );
add_action( 'woocommerce_before_shop_loop_item_title', 'wporg_debug' );