Elementor with WooCommerce Sticky Add To Cart Bottom Bar - No Code or Plugins Needed!

[@LytboxStudio]

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?

[@carlomontana514]

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!

[@babelson6]

What about the mobile?

[@chunkitkuo6721]

Could we have a tutorial for this sticky add-to-cart bar but for variable product + ajax add to cart? Appreciate it !!

[@fixbhiindia8692]

variable attributes sticky add to cart and buy now bar is most searched features in google

[@lifechangingwords7466]

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?

[@arturo5050]

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

[@StudioInnate]

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

[@munirshah7432]

I did the same functionality in a recent project using CSS, but this video really helps me. Thanks.

[@leonilsson9310]

How to make with CSS?

[@munirshah7432]

@@leonilsson9310 You can do it by using position fixed property in CSS.

[@damianmigaa7474]

Bro, amazing. I want more content with woocommerce and elementor! Greets

[@LytboxStudio]

You got it! More coming up 💪

[@akvstudios1]

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!

[@LytboxStudio]

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

[@leonilsson9310]

Hi @akvstudios1 how did you fix this? Huge white gap under footer. Did you use lytbox method above?

[@clonify207]

Can we add quantity select in the bar too?

[@jadehill-thomson2927]

Great video, but how do you make the pop-up disappear when the user scrolls back to the top?

[@Lexxieeeee]

Thank you, great tutorial

[@LytboxStudio]

@@Lexxieeeee 🙏

[@dawoodhamayun1184]

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.

[@LytboxStudio]

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!

[@NVMarketingPacificPines]

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.

[@josepgonzalez6145]

Did you find any solution?

[@thassiopaganucci]

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!

[@joshshephard4733]

same issue for me, have you found a solution to this yet?

[@adrian.or.]

Please do more videos with woocomerce :) Thanks!

[@carlomontana514]

Amazing!! I was looking for a similar thing for a couple days now. Thank you very much!

[@LytboxStudio]

That’s great! Thanks 🙏

[@chunkitkuo6721]

Could we have a tutorial for this sticky add-to-cart bar but for variable product + ajax add to cart? Appreciate it !!

[@LytboxStudio]

It on my list of coming up tutorials! I hope to have it done soon. Cheers!

[@arturo5050]

@@LytboxStudio Hello, Did you pulled up?

[@LytboxStudio]

@@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

[@arturo5050]

@@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

[@matthewfarrar4693]

Did this video get published thanks!

[@T.L-m7f]

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 :)

[@LytboxStudio]

Much love for 🇫🇷! It’s going to need custom coding to do that

[@leomarkconstantino4451]

Great tutorial How can I remove the x mark to close the sticy add to cart bottom?

[@luxmediq]

Great tutorial! Have you succeeded in making the sticky cart button work with products with variations as well?

[@novidadedodia2693]

didnt work here with variations too :( unless i use show quantity option on custom add to cart button

[@wildatease8325]

@@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?

[@LytboxStudio]

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.

[@carolinaortegax]

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!

[@LytboxStudio]

Hey sorry for the late reply. I use Crocoblock now for Woo sites their menu cart. Many Thanks 🙏

[@gregagregy]

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?

[@LytboxStudio]

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.

[@klitos15]

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?

[@LytboxStudio]

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!

[@klitos15]

@@LytboxStudio Thank you! Looking forward to it!

[@arturo5050]

Can you add like a padding so looks like its floating in the page?

[@LytboxStudio]

You can adjust the margins in the pop to give space around it giving it a floating look

[@AlexSanches13]

Awesome video! But how can we make it work with variations products?

[@LytboxStudio]

I have that on my list of upcoming tutorials.

[@mochamadrizky8610]

Thank you! I need this for my project. Btw, what plugin for review rating products in woocommerce do you use?

[@LytboxStudio]

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.

[@valentinassuodys5862]

Great content, thank you!!!

[@LytboxStudio]

Thanks Valentinas! I really appreciate that! 🙏

[@trixt4r]

Hi Jeffrey, how to have the thumbnail of the product as well in the bottom bar?

[@m.hassaanakhtar817]

thanks Lytbox

[@LytboxStudio]

Many Thanks 🙏💜

[@MikaNL602]

really helpful and good put together!!

[@OscarObians]

Wow. On another note, could the pop-up be setup in a different way so it can be used for a navbar?

[@LytboxStudio]

It can. It can also work as a mobile menu. There's all kinds of ways to get creative with ELementor's popups

[@thomasvandijen8561]

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?

[@LytboxStudio]

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!

[@pawecioko3835]

@@LytboxStudio Any update about it?

[@Maxtunes2590]

"Enable AJAX add to basket buttons on archives" must be enable ?

[@LytboxStudio]

Good question. Yes, AJAX should be enabled. By default it usually is.

[@TheJasonVitug]

Thanks this was helpful!

[@LytboxStudio]

Glad it was helpful! Many Thanks 🙏💜

[@PrakashSahw-vr6bm]

Really Appreciated 🤩

[@LytboxStudio]

🙏

[@Maxtunes2590]

and what to do in variable products and mobile version of the web ?

[@LytboxStudio]

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.

[@Maxtunes2590]

@@LytboxStudio that would be awesome ! when is that updated video out ? Im going to schedule that !

[@beautys7254]

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.

[@LytboxStudio]

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.

[@beautys7254]

@@LytboxStudio that will be great. Thank you!

[@lynxrogue6684]

Great!!! But how to Fade-Out the Popup, when user is scrolling up again?

[@fancylook4243]

??

[@Anomaliayt]

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.

[@debajitdas6464]

Awsome video 😀

[@LytboxStudio]

🙏

[@basikbasilik7294]

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 !

[@fancylook4243]

??

[@devtanvir]

Thanks for the tutorial! It is really helpful for my projects.

[@LytboxStudio]

I'm glad it helps thanks 🙏

[@diegoxntvo]

Amazing!, thanks so much!

[@LytboxStudio]

Thanks! I appreciate that 🙏

[@darbomusic]

This works amazing, thank you

[@WeladwBanatdontNET]

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.

[@LytboxStudio]

This is a solution for a simple product type. It’ll need more custom development to make it more flexible.

[@omerta3393]

Great tip

[@LytboxStudio]

Thanks!

[@robertozsvath]

How can I adapt it for mobile and add the option to select options in a variable product?

[@LytboxStudio]

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

[@Zainora-c7t]

SUPER THANKS ON YOUR VIDEO!!!!

[@BlazPerus]

Nice, thanks!

[@BlazPerus]

Actually really really good, always used a plugin for that when Elementor is more than enough for simple products :)

[@LytboxStudio]

I'm always looking for ways to remove plugins. Glad this helped!

[@hindu_holy_tales]

How to hide for out of stock products?

[@LytboxStudio]

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

[@risingstars23]

U r awesome

[@LytboxStudio]

Many Thanks 🙏💜

[@jskrbk]

The problem is the popup doesn't hide when scrolling back to the top of the product page. It just stays there

[@LytboxStudio]

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.

[@arturo5050]

@@LytboxStudio did you make that possible?

[@PsyformSamples]

@@LytboxStudio How to made it hide again when scrolling up?

[@eliaselias2993]

But botton quantity ? Input type number box quantity ?

[@LytboxStudio]

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.

[@lifeonearth6906]

thanks how to remove close button

[@LytboxStudio]

You can do this in the Pop Up settings or with a line of CSS

[@stateofnomind]

Legend.

[@LytboxStudio]

Cool 😎

[@Perfect2buy]

Wat about variation

[@niltonccf]

faz um vídeo atualizado, com variações

[@arriolaluis]

How do I edit the texts? Since they disappeard when I set them to show on products.

[@LytboxStudio]

YOu need to remove the dynamic tags and style up. Once styling is complete, then make the titles dynamic

[@MikaNL602]

bro there's a mistake in your youtube background on your profile. end of the sentence says: togther

[@tareknnassar]

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.

[@walidberriche7113]

It will not working with variation products

[@LytboxStudio]

True, this is for simple products. I have been working on a new tut for variable products and is on my up next list.

[@walidberriche7113]

@@LytboxStudio thank you so much , i'am waiting bro

[@cuttingcoffee]

add variations where things gets tricky

[@LytboxStudio]

It sure is. And it's on my list! I'll have an update in this soon

[@champsonu3959]

Not working

[@bravo1oh1]

lame.. u need elementor pro for this..

[@LytboxStudio]

You need Elementor Pro to do anything