Add WooCommerce Cart To Nav Menu Widget In Genesis

This code adds the WooCommerce cart icon with the total amount of items and price to a navigation widget in the before header utility bar.

Requires the activation of both the WooCommerce & Genesis Connect for WooCommerce plugins.

Demo Video

Shows the WooCommerce Cart Total Added to the Navigation Menu widget in the before header utility bar.

Tested using the Parallax Pro child theme by StudioPress however will work in other Genesis child themes where some modification of the CSS might be needed.

Installation Steps

1. # Copy & paste the PHP code ( without the opening PHP tag ) to the end of your child themes functions.php file.

 


2. # Copy & paste the CSS from the style.css file to the end of your child themes style sheet and clear caching.

 


3. # Create a new menu named before-header without the need to add any menu items like this:

 


4. # Add widgets to the Before Header widget area including the Navigation Menu widget selecting the before-header menu as seen in the following screenshot and demo video.

 

Download Folder

Related Tutorials

• Add WooCommerce Cart Count & Total Price To Genesis Nav Menu