Replacing Woocommerce Storefront header with a shortcode

Question

I am using Woocommerce Storefront theme and I want to replace the original header with a custom header that I created in elementor. I have a shortcode for the new header but I don't know how to insert it into the code. I am using a blank storefront child theme and there is a function.php file and style.css file.

Thanks for the help.

Answer 1

You can do this in your child theme by using a hook on init

Something like this:

add_action('init', 'replace_header' );

function replace_header(){
    remove_action( 'storefront_header', 'storefront_primary_navigation', 50 );
    add_action('storefront_header', 'my_custom_header', 50);
}
function my_custom_header(){
    do_shortecode('[your_elementor_header_shortcode attr1="value1"]')
}