Fix for WooCommerce Navigation Disappears

Recently, I have dealt with a few clients who had WordPress themes that were not built with WooCommerce (or any e-commerce system) in mind. One of the issues they were experiencing was that when viewed on a tablet or phone, their theme (which are responsive themes) would not load the navigation menu. As it turns out, Google Chrome is also throwing an error. To fix this, and get your menus back, do the following:

 

Change the following:

wp-content/plugins/woocommerce/assets/js/jquery-cookie/jquery.cookie.js
wp-content/plugins/woocommerce/assets/js/jquery-cookie/jquery.cookie.min.js

To:

wp-content/plugins/woocommerce/assets/js/jquery-cookie/jquery_cookie.js
wp-content/plugins/woocommerce/assets/js/jquery-cookie/jquery_cookie.min.js

(You are chaing the . to an _ in the file name.)

Next, you need to add the following to your theme’s functions.php file:

add_action( 'wp_enqueue_scripts', 'custom_frontend_scripts' );

function custom_frontend_scripts() {

  	global $post, $woocommerce;

		$suffix = defined( 'SCRIPT_DEBUG' ) && SCRIPT_DEBUG ? '' : '.min';
		wp_deregister_script( 'jquery-cookie' ); 
		wp_register_script( 'jquery-cookie', $woocommerce->plugin_url() . '/assets/js/jquery-cookie/jquery_cookie' . $suffix . '.js', array( 'jquery' ), '1.3.1', true );

}

Once this is done, you should see the error disappear and the top navigation menu return.