Change order of items in Storefront Theme Header

Question

I am using a child theme of the Wordpress, WooCommerce theme Storefront.

Storefront header hooked functions are ordered this way:

<?php
        /**
         * Functions hooked into storefront_header action
         *
         * @hooked storefront_skip_links                       - 0
         * @hooked storefront_social_icons                     - 10
         * @hooked storefront_site_branding                    - 20
         * @hooked storefront_secondary_navigation             - 30
         * @hooked storefront_product_search                   - 40
         * @hooked storefront_primary_navigation_wrapper       - 42
         * @hooked storefront_primary_navigation               - 50
         * @hooked storefront_header_cart                      - 60
         * @hooked storefront_primary_navigation_wrapper_close - 68
         */
        do_action( 'storefront_header' ); ?>

I would like to change the order so the product_search comes before the secondary_navigation.

I have been through the storefront files and cannot find where this order is set, only the items individually.

Can anyone please help me to hook or do what is needed to change the order please?

Answer 1

The suggestion from @loictheaztec was missing the add_action as below -

add_action( 'init' , 'add_and_remove' , 15 );
function mh_add_and_remove() {
        remove_action( 'storefront_header', 'storefront_product_search', 40 );
        add_action( 'storefront_header', 'storefront_product_search', 25 );
}

Answer 2

For that purpose you will need first to remove it with remove_action() function and then you will hook it again with add_action() function, changing the priority from 40 to 25.

Priority 25 is located between:
@hooked storefront_site_branding - priority 20 and @hooked storefront_secondary_navigation - priority 30

Paste this code snippet in function.php of your active theme folder (or better in your active child theme folder):

remove_action( 'storefront_header', 'storefront_product_search', 40 );
add_action( 'storefront_header', 'storefront_product_search', 25 );

Answer 3

Not sure if Loic got his answer to solve the duplicate issue, but to all that may need an answer, it needs to be wrapped in a function as suggested by Scott Eldo initially.

So...

add_action( 'init' , 'add_and_remove' , 15 );
function mh_add_and_remove() {
        remove_action( 'storefront_header', 'storefront_product_search', 40 );
        add_action( 'storefront_header', 'storefront_product_search', 25 );
}

as opposed to just putting it in function.php as such...

remove_action( 'storefront_header', 'storefront_product_search', 40 );
add_action( 'storefront_header', 'storefront_product_search', 25 );

Answer 4

I tried editing the accepted answer, got rejected...

Every answer in this post has an error, the function name is not coincident with the add_action command....

So, it should be...

add_action( 'init' , 'change_header_order' , 15 );
function change_header_order() {
        remove_action( 'storefront_header', 'storefront_product_search', 40 );
        add_action( 'storefront_header', 'storefront_product_search', 25 );
}

Answer 5

You can remove the actions, then add them in the order you would like them to appear:

add_action( 'init' , 'mh_add_and_remove' , 15 );
function mh_add_and_remove() {
    remove_action( 'storefront_header','storefront_header_container', 0 );
    remove_action( 'storefront_header','storefront_skip_links', 5 );
    remove_action( 'storefront_header', 'storefront_site_branding', 20);
    remove_action( 'storefront_header','storefront_secondary_navigation', 30);
    remove_action( 'storefront_header', 'storefront_product_search', 40 );
    remove_action( 'storefront_header', 'storefront_header_container_close', 4);

    add_action( 'storefront_header','storefront_header_container', 69 );
    add_action( 'storefront_header','storefront_skip_links', 90 );
    add_action( 'storefront_header', 'storefront_site_branding', 91);
    add_action( 'storefront_header','storefront_secondary_navigation', 92);
    add_action( 'storefront_header', 'storefront_product_search', 93 );
    add_action( 'storefront_header', 'storefront_header_container_close', 94);
}