The post How to Setup Menu Cart with WooCommerce appeared first on WP Knowledge Base.
In this guide we’re running through Menu Cart, and addon for WooCommerce that can easily add the buyer’s cart to a regular WordPress Menu.
Step 1) To find the add-ons available to WooCommerce users, head to the Dashboard and click on “WooCommerce”. From the dropdown, choose “Add-ons”, and then find the “Free” section of the toolbar at the top of the page.
Step 2) Scroll down until you find WooCommerce Menu Cart, and give it a click.
Step 3) This will redirect you to the WordPress.org plugin directory, and you can read all about the plugin here, before clicking ‘Download’. This will send the .zip file to your computer, ready for you to upload and install onto your website.
Step 4) Head to the “Plugins” section of your Dashboard, and click on “Add New”. Once on the “Install Plugins” page, click on “Upload”.
Step 5) On the next page, click on “Choose File” and find your .zip file for the plugin. When you have clicked on that, hit the “Install Now” button. This will take a few moments to unpack and install.
Step 6) When the package is unpacked, click on “Activate Plugin”. You’re ready to get started with the Menu Cart plugin for WooCommerce. Whoop whoop!
Step 7) The next step is to choose “Menu Cart Setup” from the “Settings” section of your Dashboard.
Step 9) Going through the settings one by one… The first section will ask which plugin you would like the Menu cart to work with. Choose WooCommerce in this instance.
Step 10) From the dropdowns provided, you can choose which menus you would like to display the Menu cart to your customers. These should be your product/shop sections.
Step 11) Tick or untick the boxes below, based on whether you feel you need to always have your Menu Cart on display or not. It is completely up to your own discretion.
Step 12) There are a few design options available as to which cart icon will be displayed on your site. Click on which cart you prefer.
Step 13) The final section asks whether you would like to display items only, price only or both price and items in the menu.
Step 14) Depending on your preference, you can alter the alignment of your menu to left, right or the default alignment.
Step 15) If you want to change the appearance of your Menu Cart, you can add a custom CSS class in the box provided. Save your changes when you are finished.
Here’s how it looks on our test site: