Display random categories on the front page (Finding and Editing Theme Functions)

The real question here is: How do I find “TheirCode” which is
responsible for this selection using tools such as firefox dev bar and
the actual source?

If you are referring to the HTML output/source, then for example on the official Storefront theme demo site, just right-click on the “Product Categories” heading or section and then you can easily inspect that section. See the MDN doc for other options such as the “Select Element” icon.

Now for the “the actual source” (i.e. the PHP code or function which generates the “Product Categories” section on Pages using the “Homepage” template), you can find it in inc/storefront-template-functions.php.

if ( ! function_exists( 'storefront_product_categories' ) ) {
    /**
     * Display Product Categories
     * Hooked into the `homepage` action in the homepage template
     *
     * @since  1.0.0
     * @param array $args the product section args.
     * @return void
     */
    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' ),
            ) );

            ...
        }
    }
}

So storefront_product_categories() is the PHP function that you’re looking for and which you can completely override if you want to (see https://docs.woocommerce.com/document/set-up-and-use-a-child-theme/#section-5). But if you just want to display the product categories in random sorting, then you can simply use the storefront_product_categories_args to filter the query arguments (which in your case would be orderby):

add_filter( 'storefront_product_categories_args', function( $args ){
    $args['orderby'] = 'rand';
    return $args;
} );

That filter is called from within the storefront_product_categories() function, and these are the other filter/actions you can use:

• Filter: storefront_product_categories_shortcode_args

• Action: storefront_homepage_before_product_categories

• Action: storefront_homepage_after_product_categories_title

• Action: storefront_homepage_after_product_categories

See this if you’re not sure of the differences between an “action” and a “filter”.

---

UPDATE: How could you find the code?

Browse through the Storefront theme documentation:

• Homepage “actions”

• Storefront template functions

• Check Storefront Filters example: Change the number of products displayed per page.

I’m looking for a way to find a function in a theme that WooCommerce
(the company) designed or in any theme really.

• First, check (and read) the theme’s documentation.

• If none or you didn’t/couldn’t find the information you needed, then try what @motivast had suggested — Inspect the elements on the page, find the appropriate HTML code and/or CSS class/id, then search the theme files for that HTML or CSS class/id until you found the right file or PHP code/function.

For example, on the Storefront theme demo site, the HTML of the product categories section is:

<section class="storefront-product-section storefront-product-categories" aria-label="Product Categories">
    ...
</section>

So you could search the theme files using one of these keywords: (I’d start from the most specific or closest match to the generated HTML)

• <section class="storefront-product-section storefront-product-categories"

• class="storefront-product-section storefront-product-categories"

• storefront-product-categories

• storefront-product-section

Assuming you didn’t know about the Storefront/theme documentation, performing the above searches would eventually bring you to the right file or PHP code/function.

If you need further assistance, let me know and I’ll update this answer accordingly.