How to display shopping cart details on a WordPress menu

The only WordPress newsletter you need Join 1000's of fans and customers just like you. Always awesome and never spam.

Email*

Phone

This field is for validation purposes and should be left unchanged.

Δdocument.getElementById( "ak_js_1" ).setAttribute( "value", ( new Date() ).getTime() );

gform.initializeOnLoaded( function() {gformInitSpinner( 2, 'https://slocumthemes.com/wp-content/plugins/gravityforms/images/spinner.svg', true );jQuery('#gform_ajax_frame_2').on('load',function(){var contents = jQuery(this).contents().find('*').html();var is_postback = contents.indexOf('GF_AJAX_POSTBACK') >= 0;if(!is_postback){return;}var form_content = jQuery(this).contents().find('#gform_wrapper_2');var is_confirmation = jQuery(this).contents().find('#gform_confirmation_wrapper_2').length > 0;var is_redirect = contents.indexOf('gformRedirect(){') >= 0;var is_form = form_content.length > 0 && ! is_redirect && ! is_confirmation;var mt = parseInt(jQuery('html').css('margin-top'), 10) + parseInt(jQuery('body').css('margin-top'), 10) + 100;if(is_form){jQuery('#gform_wrapper_2').html(form_content.html());if(form_content.hasClass('gform_validation_error')){jQuery('#gform_wrapper_2').addClass('gform_validation_error');} else {jQuery('#gform_wrapper_2').removeClass('gform_validation_error');}setTimeout( function() { /* delay the scroll by 50 milliseconds to fix a bug in chrome */ jQuery(document).scrollTop(jQuery('#gform_wrapper_2').offset().top - mt); }, 50 );if(window['gformInitDatepicker']) {gformInitDatepicker();}if(window['gformInitPriceFields']) {gformInitPriceFields();}var current_page = jQuery('#gform_source_page_number_2').val();gformInitSpinner( 2, 'https://slocumthemes.com/wp-content/plugins/gravityforms/images/spinner.svg', true );jQuery(document).trigger('gform_page_loaded', [2, current_page]);window['gf_submitting_2'] = false;}else if(!is_redirect){var confirmation_content = jQuery(this).contents().find('.GF_AJAX_POSTBACK').html();if(!confirmation_content){confirmation_content = contents;}jQuery('#gform_wrapper_2').replaceWith(confirmation_content);jQuery(document).scrollTop(jQuery('#gf_2').offset().top - mt);jQuery(document).trigger('gform_confirmation_loaded', [2]);window['gf_submitting_2'] = false;wp.a11y.speak(jQuery('#gform_confirmation_message_2').text());}else{jQuery('#gform_2').append(contents);if(window['gformRedirect']) {gformRedirect();}}jQuery(document).trigger("gform_pre_post_render", [{ formId: "2", currentPage: "current_page", abort: function() { this.preventDefault(); } }]); if (event && event.defaultPrevented) { return; } const gformWrapperDiv = document.getElementById( "gform_wrapper_2" ); if ( gformWrapperDiv ) { const visibilitySpan = document.createElement( "span" ); visibilitySpan.id = "gform_visibility_test_2"; gformWrapperDiv.insertAdjacentElement( "afterend", visibilitySpan ); } const visibilityTestDiv = document.getElementById( "gform_visibility_test_2" ); let postRenderFired = false; function triggerPostRender() { if ( postRenderFired ) { return; } postRenderFired = true; jQuery( document ).trigger( 'gform_post_render', [2, current_page] ); gform.utils.trigger( { event: 'gform/postRender', native: false, data: { formId: 2, currentPage: current_page } } ); if ( visibilityTestDiv ) { visibilityTestDiv.parentNode.removeChild( visibilityTestDiv ); } } function debounce( func, wait, immediate ) { var timeout; return function() { var context = this, args = arguments; var later = function() { timeout = null; if ( !immediate ) func.apply( context, args ); }; var callNow = immediate && !timeout; clearTimeout( timeout ); timeout = setTimeout( later, wait ); if ( callNow ) func.apply( context, args ); }; } const debouncedTriggerPostRender = debounce( function() { triggerPostRender(); }, 200 ); if ( visibilityTestDiv && visibilityTestDiv.offsetParent === null ) { const observer = new MutationObserver( ( mutations ) => { mutations.forEach( ( mutation ) => { if ( mutation.type === 'attributes' && visibilityTestDiv.offsetParent !== null ) { debouncedTriggerPostRender(); observer.disconnect(); } }); }); observer.observe( document.body, { attributes: true, childList: false, subtree: true, attributeFilter: [ 'style', 'class' ], }); } else { triggerPostRender(); } } );} );

A customer’s navigating experience is a huge deal with business websites, even more so with eCommerce. If you are selling something on the web, every page click is an opportunity for the shopper to lose interest and bounce from your site.

Fine-tuning every element of the online shopping experience is critical for this reason.

Constant access to shopping cart details are one of those nice touches that makes the user experience more personal and gives faster access to the content that matters. “How much is the stuff in my cart, and where can I check out?”

Learn how to add shopping cart details to the top menu of your page either with WordPress code or using our Simple Shop Pro theme.

Code to add this cart functionality to WordPress

First, we are addressing WooCommerce as the eCommerce plugin of choice, because it is the most popular, is the one we have most experience with, and was recently acquired by WordPress.

There are two steps to adding the code to the website:

Step 1: Add the WordPress functionality

In your functions.php file in your WordPress child theme, you will want to paste in this code. The attached code will get you started with displaying cart functionality, though you may need to modify it slightly depending on how your website is set up:

Our code is developed to be used with WooCommerce and can also be used with the popular free Easy Digital Downloads plugin.

If you are trying to understand the development of this code, it performs two operations. The first operation it performs is to change the display of the WooCommerce cart page in a menu to display the number of items in the cart and the price.

The second operation takes the code provided and allows it to refresh (using AJAX requests) as items are added and removed from the shopping cart. This sort of live feedback allows for a simpler user experience.

Step 2: Display the cart details in a menu

Before you can display information from your cart, you will need a cart page. We have a good tutorial on setting up a WooCommerce website, and we will refer there for now.

With the functionality active, you now need to display it on your WordPress website. To do this is a very simple process. Navigate to Appearance > Menus from the WordPress backend. Go to the Pages dropdown on the left side of the menu screen and select the page that has been assigned as the WooCommerce menu page.

Wherever you place the Cart page in the menu, the display will show the amount of items and total price of the cart.

Our recommendation is to put the cart link your Top Menu or whatever menu navigation is at the top of your WordPress website.

The easy way to add shopping cart details

How do we understand how to do this? Our newest WordPress theme — Simple Shop Pro — has the feature built right in to the theme. No need to add code at all. All you need to do is set up the menu item for the cart page.

If you are not experienced with code or need a simpler solution to your eCommerce problem, using Simple Shop Pro as your WordPress theme is a simpler way to keep people attached to the page.

We hope that you enjoy our content. If you decide to make a purchase after clicking on one of our affiliate links, we’ll earn a small commission at no extra cost to you. Thanks for reading! View our Affiliate Disclosure

Share Tweet Share