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!

  • First of all, welcome to SE: Wordpress Development. :) And secondly, what do you mean by "markup code"? Do what to use the output from echo $shortcode_content; in your function, that hook into the action 'homepage'?
    – user141080
    Commented Aug 21, 2018 at 19:04
  • @user141080 thank you for your attention! :) echo $shortcode_content; outputs an unordered list. I would like to return pretty much the same content but in different elements and structure. I was able to track down this action through the hook, but I hit a wall on the code above. I'm interested in what would another, more experienced developer do. At this point I'm considering rewriting the whole action and not using the storefront_do_shortcode( 'product_categories'... part at all. Commented Aug 21, 2018 at 19:58

1 Answer 1


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 ]);


    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.

  • thank you a lot; your explanation is spot-on. Up until this point I was doing mostly basic template editing and my brain just wasn't noticing that a function is returning another one instead of just outputting some html code. But if you search in the WooCommerce plugin folder you will find that class. this line is key and if I didn't stumble upon this file yesterday you would have been the person to push me to look in the plugin... This template can be overridden by copying it to yourtheme/woocommerce/.... I never looked. Thanks again! :) Commented Aug 26, 2018 at 15:29
  • PS: Now it makes perfect sense. By storing it's template files in the plugin folder WooCommerce ensures that it can be patched to other themes like the twenty bunch. Commented Aug 26, 2018 at 15:34

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.