How to Use the WooCommerce Menu Cart Widget in Elementor [PRO]
Vložit
- čas přidán 10. 07. 2024
- 👋🏼 Help us improve by answering this short survey: elemn.to/survey-time
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!
Don’t forget to subscribe to our channel!
Get Elementor: elementor.com
Get Elementor Pro: elementor.com/pro
See also: elementor.com/blog/introducin...
00:00 - The Menu Cart Abilities & Importance
00:56 - Menu Cart Layout & Settings
03:55 - Styling Our Menu Cart & Cart Icon
07:21 - Positioning the Menu Cart to Inline
![How to Use the WooCommerce Checkout Widget in Elementor [PRO]](http://i.ytimg.com/vi/_5IaA32RAh8/mqdefault.jpg)
Do not have the most, most important: increasing qty in the Cart. And what about the labels? How to put in my idiom?
And why product (in the page product) can not show a increasing quantity button? Thanks
The "Automatically Open Cart" does not work on the Product Page... Would appreciate it if this is optimized for the single product page template to increase the user experience.
Elementor is a great plugin hands down
What template is used in the video?
When on product page the side cart doesn't open even with the AJAX setting that you show here.
Also when there are more items the user can't scroll them. Please fix those, many people will be happy! :)
Keep up the great job Elementor team!
"Almost" perfect... We still lack the option to use a custom icon, either by Font Awesome or any icon we upload.
Waiting for the update that the Cart and Checkout page can be updated without having to rely on third-party plugins like Crocoblock...
which theme is this ?
Hi Denison, this is coming soon 😊 czcams.com/video/zUBG27llWKQ/video.html
Hi Jubaer, we used the Hello theme, together with the Elementor Pro and WooCommerce plugins.
Hola buen vídeo, en mi caso tengo un problema, el menú de carrito no se deja modificar. He intentado por todos los medios pero no deja cambiar de posición los botones, el ancho y cosas así. Será que es algo del tema Astra pro, que no me deja editarlo
Thank you so much this helped a lot!!!! You saved my life
Thank you!
is there a way to simply open the cart page when someone clicks this icon? instead of showing the side cart?
which theme is this ?
And again, there is no option for custom cart icon !!?? Why it was so hard for the Elementor developers ??? Please update this option ASAP .
Hi Goran, great idea! Please add them to GitHub so our Devs will see them elemn.to/GitHub
Super Awesome, toda.
Probably if you could add a plus and minus quantity button, it would have been great. It sucks just that you cannot edit the quantity button.
Is there any way to add quantity increase/decrease buttons on the side cart ?
Just tested on my site, the cart function having issue in mobile mode.
Same issue with me😭
Hello elementor
Can I change the button “checkout” in different language 🙏
It's been almost a year since this video and you still cant control quantity in the side cart? Also if a customer is on the cart page itself and removes the products from the cart widget the main cart page does not update until after you force refresh the page. Also how is it that there is no option to design or edit the "cart empty" section of the site as a redirect or something more useful to a customer?
Estou com o seguinte problema na opção pop-up do carrinho. Mesmo ele oculto, é possível clicar no botão cart-view ou check-out.
Um clique na página pode atingir o botão check-out do carrinho (miniatura), caso haja algo no carrinho, mesmo em modo oculto, entende?
I tried this but didn't worked .. the image shown is woocommerve shop archive and not the thumbnail.. the two buttons can't be modified .. in case of multiple product in the cart the cart doesn't have scroller .. tried both with elementor theme and Kaden theme
THANKS
I see there's a product image option in cart, can we select what image to show there if a product has a few? Round the corners of images?
Is there a way to change the font of the Items Indicator? It appears to use a global font, I can't change it, and it is barely readable for some quantities.
Special!
Is there a way to do this with the Hello Elementor theme without editing with the builder?
It would be very useful if I could change the text when the cart is empty! I use Greek language and I have this empty cart information in English. One solution is to make the font size very small so you can’t see it but I would like just to change the overall message. Thanks, Elementor is great tool!
Exactly! I have my website in Romanian and the empty cart message is in English. It's a bit disappointing after making an effort to remove any message/text in other languages, to have this pop-up. The only solution I see is to make the message the same color as the background, so when they have an empty cart it would appear as an empty side bar..
That text comes from WooCommerce & not Elementor. Use any plugin or JS to replace those text strings.
How to configure buton "View Cart" set your link page?
how i can customize the cart menu button If it takes the main settings from elmentor itself ???
i want to remove background but i cant do it
This widget is missing so many important things that it is basically useless. It doesn't work well with mobile. If you have a bunch of items in the cart, you won't be able to scroll down to see them all. You are not able to change the product quantity in the menu cart. You can't add other things to it like a place to add a coupon code. You can't add a logo. And you can't add custom messaging.
So basically, we all just have to wait until you make these improvements someday in the distant future? Because if I added this to my store as is, I think I'd lose money.
what are you using instead?
Help, why the cart icon don’t show in live website but in the editor is normal?
Hey Elementor, please let me know what website is shown here. I'd love to create something similar on mine! Pretty please!
hi elementor, i have recently seeing my menu cart icon not showing in browers after updating the latest pro 3.5.2 version. need anyone attention to help and solve this problem please.
The Menu cart does not work, it seems having some issue as there is no link to the cart page.
It shows "/#" instead of "/cart" at the end of the link...
same problem here. Did you find a solution ?
@@StefanFire Same problem here aswell. Did you mange to find a solution in the past 7 months? It's stressing me out.
I can't use the "Auto-open Cart", it doesn't open anything, I test on two sites ...
How do you change the navigation links of "View Cart" & "Checkout", I feel like that is something that should have been added to this tutorial..
Would be even better to have custom messages and to ask when they wanna delete from cart 'are you sure you want to delete/lose out on this item?' [and dynamically add the product name].
I cant change the background color of the menu icon. If I choose any color, the color is not changing. Every other color option is working fine, also the hoover color, but not the basic background color. What can I do?
me too , that's because its takes the main settings from elmentor itself
The icon is not showing when the user is not login. If you are login show without problem but is you logout the classes are not displaying correctly
Great video Elementor, after watching and implementing I seem to get the entire cart appear in my header when I press checkout, any ideas on how to stop this from happening please?
8 months and still no reply?
Hi, can we hide this cart from visitors? I want to show it to only logged in users. Thanks
1:01 when i search for menu cart, there's none?? why i don't have this option? thanks
Hi Isabela, please check to make sure that you've updated to the latest versions of Elementor and Elementor Pro and that you have WooCommerce installed.
I dont have "Cart" and "Additional Options" when I add it - any reason why?
Hi Juusu, please check to make sure that you've updated to the latest versions of Elementor and Elementor Pro and that you have WooCommerce installed.
I want to customize the message of the shopping cart
I dont have that menu cart widget in my elementor pro ?!
@pushingpandas6479 have you installed WooCommerce? If so, and you still don't see it, please contact support.
The cart doesn't open when I click on it.
Com problemas que impedem o funcionamento deste widget, e está prejudicando o correto funcionamento da minha loja e meu negócio.
agradeço se lançarem uma correção para este problema. os produtos do carrinho não aparecem no mini cart e nem no side cart.
Hye Jorge, have you joined the Elementor Community? It's a great place to ask questions like this, and get advice from other web creators. You can even share screenshots and links there: facebook.com/groups/Elementors. Alternatively, you can contact support from my.elementor.com.
ok now how does it look on mobile?
the cart widget is very broken!
but I would like just to change the overall message
MOST OF THE customization literally does nothing at my side?!
yeah same
It's a strange choice of video for number 2 in the playlist. Why not start with the basic ones.
Hi Dreubz, thanks for the suggestions. The videos are currently arranged in order of Publish date.
For those that were tearing their hair out trying to remove the border and background colour on focus, use this custom css.
Change the black to whatever colour you want.
.elementor-button-wrapper .elementor-button:hover, .elementor-button-wrapper .elementor-button:focus {
color: #000000!important;
background-color: #000000!important;
border-color: #000000!important;
border:none!important;
}
thx , but not working , what i can do .
the menu cart button takes the main settings from elmentor itself