Reverse engineering of WooCommerce Storefront filters

Good day, first I would like to apologize for the more theoretical question, but I’m in a desperate need of a lead and my Google searches didn’t led to anything.

I need an explanation on how to find and edit the markup code produced by functions like the following:

function storefront_product_categories( $args ) {

    if ( storefront_is_woocommerce_activated() ) {

        $args = apply_filters( 'storefront_product_categories_args', array(
            'limit'             => 3,
            'columns'           => 3,
            'child_categories'  => 0,
            'orderby'           => 'name',
            'title'             => __( 'Shop by Category', 'storefront' ),
        ) );

        $shortcode_content = storefront_do_shortcode( 'product_categories', apply_filters( 'storefront_product_categories_shortcode_args', array(
            'number'  => intval( $args['limit'] ),
            'columns' => intval( $args['columns'] ),
            'orderby' => esc_attr( $args['orderby'] ),
            'parent'  => esc_attr( $args['child_categories'] ),
        ) ) );

        /**
         * Only display the section if the shortcode returns product categories
         */
        if ( false !== strpos( $shortcode_content, 'product-category' ) ) {

            echo '<section class="storefront-product-section storefront-product-categories" aria-label="' . esc_attr__( 'Product Categories', 'storefront' ) . '">';    
            do_action( 'storefront_homepage_before_product_categories' );    
            echo '<h2 class="section-title">' . wp_kses_post( $args['title'] ) . '</h2>';    
            do_action( 'storefront_homepage_after_product_categories_title' );    

            echo $shortcode_content;

            do_action( 'storefront_homepage_after_product_categories' );    
            echo '</section>';    
        }
    }
}

This function for example was hooked to do_action('homepage');. I managed to make my function and hook it to the 'homepage' action but I couldn’t find the markup that was produced after this line echo $shortcode_content;; I would like to be able to look into it, because often there is some chunk of code that I would like to reuse; the categories’ thumbnails in this case.

My question is how would a more experienced user approach a situation like this? What to search for/ look for while reverse engineering?

Thank you in advance!

Storefront is an ecommerce theme for WooCommerce. It is build by the guys from WooCommerce and on the WooCommerce website it is displayed as the “official” theme for WooCommerce.

Ok, what does that mean for us?

The link between this theme and WooCommerce is stronger than in most of the other themes. As you look in the code of the function storefront_do_shortcode you can see, that this function is only a wrapper for the PHP function call_user_func.

function storefront_do_shortcode( $tag, array $atts = array(), $content = null ) {
    global $shortcode_tags;
    if ( ! isset( $shortcode_tags[ $tag ] ) ) {
        return false;
    }
    return call_user_func( $shortcode_tags[ $tag ], $atts, $content, $tag );
}

The PHP function call_user_func is used for dynamical function calls on runtime. The first paramter of this function defines the callback. If we extend the function storefront_do_shortcode by an output of $shortcode_tags[ $tag ], we can “look” at that callback parameter.

function storefront_do_shortcode( $tag, array $atts = array(), $content = null ) {
    global $shortcode_tags;

    if ( ! isset( $shortcode_tags[ $tag ] ) ) {
        return false;
    }

    if($tag == 'product_categories' )
    {
        var_dump($shortcode_tags[ $tag ]);

        die();
    }


    return call_user_func( $shortcode_tags[ $tag ], $atts, $content, $tag );
}

The output is WC_Shortcodes::product_categories.

If you search in the theme folder of the storefront theme for a class with the name WC_Shortcodes, you will find out that there is no class with this name.

But if you search in the WooCommerce plugin folder you will find that class.

The class WC_Shortcodes is the place where WooCommerce defines its shortcodes and the function product_categories creates your shortcode.

To render the categorie data WooCommerce used the content-product_cat.php template. That template defines a bunch of action maybe one them helps you.