Elementor with WooCommerce Sticky Add To Cart Bottom Bar - No Code or Plugins Needed!
HTML-код
- Опубликовано: 25 авг 2024
- ✨ Join us in the Lytbox Academy Community:
lytboxacademy....
Adding a Sticky Add To Cart bottom bar on your product pages will increase sales and conversions. Here is a simple way to add this will Elementor.
My goal is to create a community for Web Designers, Developers, Freelancers, and Elementor enthusiasts to learn the design & business side of creating websites.
Got questions? You can reach me anytime - lytboxacademy....
/////
✨ Learn High-Level Web Design Skills With Me:
🟢 Master Elementor while learning web design skills:
lytboxacademy....
🟢 Learn powerful SEO in an easy-to-follow style for WordPress users and web designers:
lytboxacademy....
🟢 A step-by-step guide to building a WordPress Maintenance Business that results in high MRR:
lytboxacademy....
🟢 Become a Lytbox Academy Pro Member:
lytboxacademy....
/////
✨ My Recommended WordPress & Web Design Tools:
👉 The hosting I use:
Cloudways (use promo code LYTBOX for 30% off 3/months)
lytboxacademy....
xCloud:
lytboxacademy....
/////
👉 My WordPress Tools:
Elementor Pro:
lytboxacademy....
Breakdance Builder:
lytboxacademy....
Bricks Builder:
lytboxacademy....
Crocoblock:
lytboxacademy....
SEOPress (the best SEO tool for WordPress!):
lytboxacademy....
Perfmatters:
lytboxacademy....
InstaWP:
lytboxacademy....
WP Umbrella:
lytboxacademy....
/////
Thank you for supporting my channel 🙏 - Jeffrey @ Lytbox
#elementorstickybottombar #woocommercestickyaddtocartbottombar
In this tutorial, I went a bit faster, left out the styling and focused more in the functionality. What do you think, should I go more into details on the styling with Elementor or make shorter and more to the point?
Definitely yes!! I'm having a bit of trouble trying to style the mobile version of the sticky bar (especially the Add to Cart button). Looking forward for that video men!
What about the mobile?
Could we have a tutorial for this sticky add-to-cart bar but for variable product + ajax add to cart? Appreciate it !!
variable attributes sticky add to cart and buy now bar is most searched features in google
Great video. The way you made it works well for simple products but not variable products. is there a way to customize it even further for variable products?
Could we have a tutorial for this sticky add-to-cart bar but for variable product + ajax add to cart? Appreciate it !!
It on my list of coming up tutorials! I hope to have it done soon. Cheers!
@@LytboxStudio Hello, Did you pulled up?
@@arturo5050 I did work on this but it turned out to be quite complicated and on the advanced side. I’ll still put a video on it
@@LytboxStudio thanks I’ll really appreciated. I just make like a large button in the bottom of mobile with Aad to cart, but doesn’t get the Ajax. Also if you can help id so the pop up can hide when you scroll up I really appreciated
Bro, amazing. I want more content with woocommerce and elementor! Greets
You got it! More coming up 💪
Love Your Videos!!!!
One request could you make a speed art video in which you design a detailed Single Product template for WooCommerce. For example, you can remake the one you are using in this video with all the toggle FAQ and other details you used inside.
I have been thinking about doing this. The videos I am working on now are more focused on design and layouts using Elementor. Thanks for suggesting this!
Thanks for the video Jeff. is there a way of doing this with product variables, ideally with the preselected variable that you can set on the product variables tab in the product backend? Thanks in advance
Really Appreciated 🤩
🙏
Amazing!! I was looking for a similar thing for a couple days now. Thank you very much!
That’s great! Thanks 🙏
Please do more videos with woocomerce :)
Thanks!
Hello, thanks fot the video. I have a question, How can we Exit de pop ub when we go up in the page? The Button still there when we move up? Thanks PD: I dont know if we can do that in the settings or need some CCS code or JS
Awsome video 😀
🙏
Great content, thank you!!!
Thanks Valentinas! I really appreciate that! 🙏
thanks Lytbox
Many Thanks 🙏💜
Thanks this was helpful!
Glad it was helpful! Many Thanks 🙏💜
Awesome Video! For me, It works perfectly on Desktop! For mobile however, works, but stretches the page past the footer and shows at the bottom of the page with some white space in between. Could use some help. Thanks!
You’ll need to style up for mobile. In Elementor’s mobile view, change the positioning for the product title, price, and add to cart button to full width or default. You can find in advance > position. Then make all 3 center, reduce the size of the product title and price, and adjust the top and bottom padding until it looks right on the phone.
Another option is to hide the product title and price on mobile and only leave the add to cart button. This can be done going to advance > responsive. I hope this helps
really helpful and good put together!!
Amazing!, thanks so much!
Thanks! I appreciate that 🙏
This works amazing, thank you
Great video! What plug in or Elementor feature did you use to create your actual shopping cart? I like how the shopping cart icon sticks to the top of the page and doesn’t move or disappear and is always accessible to the customer. Once you clicked it, I really liked how the shopping cart popped up on the side like that. Thanks for the awesome video!
Hey sorry for the late reply. I use Crocoblock now for Woo sites their menu cart. Many Thanks 🙏
Yo! Really appreciate, i spent hours failling and just saw you video, its awesome mate thank's !
Just one question, could we remove the "view cart" texte from the popup when the user click on add to card ? Cheers from France :)
Much love for 🇫🇷! It’s going to need custom coding to do that
Wonderful video! Thank you! In my store, we have products with variations and in this specific kind it does not work well (when you click on add to cart, it just reload the page and do nothing). Would you know a way out of this problem? Thank you so much!
same issue for me, have you found a solution to this yet?
Great tip
Thanks!
SUPER THANKS ON YOUR VIDEO!!!!
Hey there, great video. Though how do we get to work with variable products? At the moment, I can get it to show the variations, but it won't let me select one or add it to cart.
Did you find any solution?
Nice, thanks!
Actually really really good, always used a plugin for that when Elementor is more than enough for simple products :)
I'm always looking for ways to remove plugins. Glad this helped!
and what to do in variable products and mobile version of the web ?
This method works for simple products, not variables. But I will be making an updated tutorial soon for more complex products with variables.
And for mobile, you just need to style for mobile and adjust the size and spacing. Also test on your mobile while styling it to get the best results.
@@LytboxStudio that would be awesome ! when is that updated video out ? Im going to schedule that !
Thanks for the tutorial! It is really helpful for my projects.
I'm glad it helps thanks 🙏
Great tutorial! Have you succeeded in making the sticky cart button work with products with variations as well?
didnt work here with variations too :(
unless i use show quantity option on custom add to cart button
@@novidadedodia2693 Yes, it worked for me as you're saying, but the problem is that the bar got huge... so, I cannot use this, unfortunately... or do you have a way to place this side by side so it can be smaller?
Hey sorry for the late reply. I plan on making a revised version of this tutorial that includes variations and a sticky bar that disappears when scrolling up. I hope to have it out soon.
Great tutorial How can I remove the x mark to close the sticy add to cart bottom?
Can you add like a padding so looks like its floating in the page?
You can adjust the margins in the pop to give space around it giving it a floating look
Thanks! Although once it's up, you can't click on any other add to cart button on the screen, and this doesn't seem to work with variable products. At least for me. I just want a simple 'add to cart' button stickied at the bottom which will put the default variation in cart. The page either refreshes with nothing added, or if I try another plug in, it forces the options, and even if I choose, it askes me to choose option/variation on product page.
The problem is the popup doesn't hide when scrolling back to the top of the product page. It just stays there
True. It's a simple solutions meant for a simple e-commerce site. I do have plans for an updated tutorial that hides when scrolling up and has variations.
@@LytboxStudio did you make that possible?
@@LytboxStudio How to made it hide again when scrolling up?
Hi Jeffrey, how to have the thumbnail of the product as well in the bottom bar?
Awesome tutorial! How would you optimize it for mobile view? Would you just put circle button with shop icon or you have some other idea?
Hey sorry for the late reply. I would keep the mobile simple and minimal and make sure the sticky bar does not take up too much space. Just the product name and Add to Cart button and keep in one line.
Great!!! But how to Fade-Out the Popup, when user is scrolling up again?
??
Awesome video! But how can we make it work with variations products?
I have that on my list of upcoming tutorials.
Great video, but how do you make the pop-up disappear when the user scrolls back to the top?
Thank you for your beautiful tutorials! The title widget that draws dynamically the product price does not work for Variable products. When I press "add to cart button" it reloads the page, even if I had selected one variation at the beginning. Is there any way to correct this?
Hey sorry for the late reply. I thanks for this feedback. I am planning to remake this tutorial to add variables. I hope to have it out soon!
@@LytboxStudio Thank you! Looking forward to it!
Thank you so much! I've created the Sticky Add To Cart, but how can I fix it to close the Sticky Add To Cart automatically when you scroll back to the top of the page?
Hey Thomas, sorry for the late reply. I have plans to remake this tutorial with something more advanced where the sticky bar disappears and can add variations. I hope to have it made soon!
@@LytboxStudio Any update about it?
How can I adapt it for mobile and add the option to select options in a variable product?
This is a very simplified solution. I’ve been working on creating for variable products. It’s a bit complicated but I still plan to put this out soon
Legend.
Cool 😎
Wow. On another note, could the pop-up be setup in a different way so it can be used for a navbar?
It can. It can also work as a mobile menu. There's all kinds of ways to get creative with ELementor's popups
Can we add quantity select in the bar too?
Wat about variation
Hi Mate
Thanks for the video, how about adding variations selection as well? when adding the elementor widget its liiks bad and so wonder if there is an option to scroll the page up to the variation selection once the visitor click on the "Add to Cart" in the pop up in variations items only. this way i can keep the pop up nice and clean with only the price and the button.
Hey sorry for the late reply. I plan on making a revised version of this tutorial that includes variations and a sticky bar that disappears when scrolling up. I hope to have it out soon.
@@LytboxStudio that will be great. Thank you!
Hello ^_^
I've added a custom Elementor add to cart button but with the "all" option in the product settings, it is doing nothing " No action" I have to select a product! But I need to make the pop-up button works for all the courses and products.
This is a solution for a simple product type. It’ll need more custom development to make it more flexible.
Thank you! I need this for my project. Btw, what plugin for review rating products in woocommerce do you use?
I’m glad to hear. And for the reviews, we started building our own reviews for WooCommerce using custom post types. I am not a fan of Woo’s reviews being linked to the comments. Many of our sites are multi-language and creates problems. I’ll be sharing our reviews solution soon.
How to hide for out of stock products?
Hey Sagar I plan to make an updated video on this and will induce this. It's a good questions and Idea and I got you! Cheers
thanks how to remove close button
You can do this in the Pop Up settings or with a line of CSS
"Enable AJAX add to basket buttons on archives" must be enable ?
Good question. Yes, AJAX should be enabled. By default it usually is.
U r awesome
Many Thanks 🙏💜
faz um vídeo atualizado, com variações
Hey Jeffrey, I really enjoyed your video (didn't know about the column trick). However, do you know how can I make my popup to goes out when scrolling up ? Thanks !
??
But botton quantity ? Input type number box quantity ?
Hey sorry for the late reply. I plan on making a revised version of this tutorial that includes variations and a sticky bar that disappears when scrolling up. I hope to have it out soon.
Its not as easy as you make it sound. First the QTY is disable in the popup add to cart button, you cant select qty there, and if you select qty in the original button it does not sync / reflect on the popup add to cart, also this works for simple products, for variable product you will have the same issue with the qty and the variations will break the design and make it look hideous. You will require some coding to make the 2 qty areas sync, and when a variation is selected (if any) in the top original button and you click on add to cart from the popup if will be reflected as well. I know this video is 3 years old but this also applies to today's version of elementor / pro and the way around it is not easy. if you have figured that out please share. thank you.
add variations where things gets tricky
It sure is. And it's on my list! I'll have an update in this soon
bro there's a mistake in your youtube background on your profile. end of the sentence says: togther
How do I edit the texts? Since they disappeard when I set them to show on products.
YOu need to remove the dynamic tags and style up. Once styling is complete, then make the titles dynamic
Not working
It will not working with variation products
True, this is for simple products. I have been working on a new tut for variable products and is on my up next list.
@@LytboxStudio thank you so much , i'am waiting bro
lame.. u need elementor pro for this..
You need Elementor Pro to do anything