In this tutorial we’ll learn how to add and customize the WooCommerce Menu Cart widget on your Elementor website. The shopping cart is a fundamental part of the e-commerce journey. You can use the Menu Cart to create a great shopping experience and convert potential customers into repeat clients.
The tutorial will cover:
✔︎ Setting up the Menu Cart content and layout
✔︎ Styling the Menu Cart to fit your design
✔︎ Creating more intuitive experiences with Open Cart options
✔︎ And much more!
See also: https://elementor.com/blog/introducing-elementor-pro-3-4
Hey there, it’s Aviva from Elementor. Today we’ll learn how to add and customize the WooCommerce Menu Cart widget on your Elementor website.
The Elementor Menu cart widget engages shoppers by allowing them to add products to their cart, view and edit them without leaving the page, and go directly to the checkout page, when ready to complete their purchase.
The shopping cart is a fundamental part of the e-commerce journey. By creating the best shopping experience possible, it will help you convert potential customers into repeat clients.
All right, let’s take a look at how to use this widget on our website.
Before starting, make sure you’ve installed and set up the WooCommerce plugin. I’d also recommend having at least a few products in your store, so you can follow along with the Menu Cart design. Ok great, let’s get started.
We’ll begin in our website header.
From the widget panel, select the Menu Cart widget and drag into the header. As you can see, I’ve already added a few items to my shopping cart.
The first set of Content options relate to the Menu Icon. We can choose from a variety of cart icons. We’ll select “Bag Medium.”
Next, from the Items Indicator, we can choose how to display the number of items in the cart. We can leave it on the default of Bubble…None, which removes the items indicator all together, or Plain, which places it to the left of the cart icon.
We can toggle Hide Empty to YES, to hide the indicator when the cart is empty. We also have the option to Hide the Subtotal, which we’ll select, for a more minimal design.
We can change the menu cart Alignment, if we’d like, but we’ll leave ours on the default setting.
Next we’ll move on to the Cart content options.
Let’s click the Menu Cart widget to preview our changes, as we make them.
Cool.
We can switch the Cart Type to Mini Cart, for a more compact layout, if preferred. Note that the mini cart has a minimum size, which can cause it to get cut off when placed near the edge of the screen, but we can adjust these settings here, to make sure it fits perfectly. For our example, we’ll set it back to Side Cart.
As you saw earlier, the cart opens On Click, which is the default setting, but we can also set it to open on Hover.
From here, you can control the alignment of the Cart Position. We can change it to the left, as is common for Right to Left language websites, or leave it on the default and align it to the right, as we’ll do here.
You can hide the Close Cart button. This works best when using the mini-cart. We’ll leave it on SHOW, to make it easy for our visitors to close the cart.
Next, you’ll find additional options for hiding and positioning the Remove Item buttons, Price & Quantity, and Cart Dividers. Go ahead and play around with them and see what fits your design.
The following settings in the cart are for the Buttons, where we can choose to either Hide or show the View Cart and Checkout Buttons. For our example, we’ll hide the View Cart button.
Hiding a button will bring up new options for changing the Checkout Button’s alignment, as well as its vertical position.
We have even more Additional options here.
We can set the cart to open each time an item is added Note that for this option to work, we must have AJAX enabled in our WooCommerce settings.
And we can set whether or not we want the to cart auto update without the need for a refresh.
We’ll leave both options on their defaults.
Great, our content is all set, so let’s move on to the Style tab.
We’ll close the Side Cart while we style the Menu Icon.
Begin by selecting the icon color. We’ll choose a preset Global color. We can also choose the Background color, Border Color, and add a box shadow, if desired.
We’ll set the border width to zero, to completely remove the border. We also have an option to change the border radius, but we’ll leave that as is, for our design.
Next we’ll change the icon size.
And here we can change the padding around the icon. We’ll click to unlink the padding values, and enter separate values for the right and left sides.
If you’ve selected Bubble as your indicator from the Content tab, you can change its color from here.
Ok let’s open the Side Cart again, and expand the Cart section for the styling options. First let’s set our cart’s Background color to match our site. Cool!
But since we haven’t yet styled the other elements, they don’t contrast well with this background. In order to see them better let’s set the background back to white for now, and update it, once we’ve styled the other elements.
Next we have settings for Border type, Border Radius, and Box Shadow, We’ll leave them on the defaults for our design. Then we’ll add Padding to the inside of the cart, to give it a little more breathing room.
For the Close Cart icon, we can change its size…and set its color. We can also set a color to change on hover.
Next we’ll set the styles for the Remove Item icon. We’ll change the size… and then set the color. You have a hover option for this icon as well.
Ok, now we’ll Style the Subtotal area. There are numerous options here to choose from. We’ll change the typography,… and unlink the border values…and set a value for just the top. Then we’ll change the color. Perfect.
Now let’s take a look at the Products area. Just like the areas we’ve already covered, it’s chock full of customizable settings.
We’ll style the Product Title…Product Price….Quantity….and Divider Style. Great! Our cart design is coming along nicely.
Our next step is to style the Checkout Button. We’ll change the Background Color and Background hover color, and set the border radius, to round it.
And finally, we’ll style the Cart Message. Let’s remove the products to preview the message. Now we’ll align it.
Great, Now that we’ve finished styling all the items in the cart, we’ll go back and match the background color of the cart to the page design.. Ok, all that’s left to do is to align it side-by-side with the menu.
To do this, we’ll go to Advanced, Positioning, and change its width to “Inline”. Remember the padding we added earlier? As you can see, it’s created a nice bit of space between the two buttons/elements.
Fantastic!
And that’s it! Now you know how to create an engaging menu cart for every shop you build.
How will you use the menu cart? Let us know in the comments below.
Thanks for watching! For more tutorials, subscribe to our YouTube channel. And don’t forget to hit that notifications bell!
