Get WooCommerce Menu in to my theme builder

If you ever found your self in a situation where your menu on website blog and page sections are different on WooCommerce pages, you can simply inject WooCommerce Menu in to your theme template page or directly in to your theme builder as a shortcode.

First investigate, find what tigers your WooCommerce Menu. To do that, go to your theme files and search for WooCommerce folder, on any page where you know that the menu is present.

Now you know that it is get_header(‘shop’); function which tigers the display of your menu. Go ahead and place it in your shortcode. Just remember that this particular function generates immediate output, so you will need to catch it and then return as below:

/* In function.php of your child theme - if you don't have one create it */
function customShortcodeShopHeader(){
	ob_start(); // catch output of get_header function - stops from immediate output while registering shortcode.
	get_header( 'shop' );
	return ob_get_clean(); // return cached output of get_header function. You can use similar technique to output template parts of your theme through shortcode.
}

add_shortcode('ShopMenu', 'customShortcodeShopHeader' );

Now you can place your shortcode directly through your theme builder interface. Check your theme builder for instruction on how to add shortcodes:

[ShopMenu]

Adding shortcode in Guttenberg Editor is very simple. Simple search for shortcode block and paste shortcode name as in the example above. Adding shortcode to a widget or using classic WP editor is also very easy. Simple paste the shortcode name, and it will get generated on the front end.

You could also place it in a theme file code… But for that you do not need to generate shortcode. You can use get_header( 'shop' ); directly in any theme file.