 By adding a sticky checkout button to the bottom of your product pages, you can increase the sales and conversion rates for the WooCommerce sites you build. We could do this with just Elementor. We don't need any additional plugins or even to add any additional code to make this work. What's up everyone? I'm Jeffrey at Lightbox and I love talking about web design and the business behind it. For this function and this trick we're going to build, all we're going to use is Elementor's pop-up feature. That is it. We're going to make it super easy, walk you through it. I guarantee you add this to your site or your client's sites. It will help increase the sales and conversions. The only thing we will need for this feature to work for this function is you're going to have to have Elementor Pro. If you don't have the Pro version yet, there is a link in the description. It does help support this channel. That's much appreciated. All right. Let's go ahead and get started. To get started, go back to your dashboard. From here, navigate over to your templates underneath Elementor and select on pop-ups. Now, we're going to create a new pop-up. Go ahead and give yours a name. I'm going to call mine sticky checkout and let's create the template. We're not going to use any of these pre-built templates. We're going to make our own so we can click that off. Let's go ahead and add a section. We're only going to use one column section. We don't need multiple columns. When we select on it, you can see by default, it's a small pop-up that's in the middle of the page. We need to style up this pop-up first. That way, it's full screen like a bar and it's stuck down here to the bottom. To do that, navigate over here to the bottom left-hand corner where it says settings. This is the settings for your pop-up. The first thing we're going to do is let's make this full width. Select on vertical width or the VW. The VW stands for vertical width and turn it to 100. On the vertical section, go ahead and put bottom. That's going to push it to the bottom where it will stick. For the overlay, we want to make sure we turn the overlay off because we don't want to block the product page with any overlay or any shade. Let's give it a cool entrance animation. We want something subtle. I personally like the fade-in up. It gives a cool little animation like it's sliding up. Then on exit, we want it fade out down. There we go. Let's reduce this duration. We don't want it to go slow. You want it to be fast and smooth. Point three is a good speed to go with. Underneath general settings, everything is good right here. Same thing with the preview settings. Everything's good. Now, let's go over to style. From here, you can style it up. You can give it a background color. You can make it a solid background color however you want to make it look. I like to change the box shadow up though because it is on the bottom. I want the box shadow to go up. Right here on the vertical, let's move this in negative because that's going to push the box shadow up instead of down. Then for the blur, I like to take minus 40, but you could customize yours as you like. I like to keep it under. Now for the advanced. What we need to do on this section right here is we need to prevent closing on overlay. Make sure to add this because there might be something on the page that a user might click on and we don't want it to disappear because of an accidental click or something else. I like to turn this one off right here. You can do the same thing with the escape key. That's pretty much it. Everything is set now for the settings inside our bar. Now let's add the elements. What we want to add here is we want to add the product name. We want to add the product price and we want to add the checkout button. Let's start by adding two headers. One header for the product name, another one for the price and the checkout button. Scroll down here. You'll see a WooCommerce section and then we have a custom add to cart button right here. All right. So now the next step is we just need to style up these right over here. So I'm going to style these up. What I'm going to do first is we're going to leave the text as it is. The last step I'm going to do is I'm going to make this dynamic and show the product name dynamically but I won't do it yet until it's styled up because if I do it right now it will disappear and it'll be hard to see. So let's first style it up. From here I got my colors. Let me do my typography and I'm going to use flex with this. I'm going to make this inline. So here we go. I got this one inline right here and I'm going to copy and paste the style just to make everything go quicker. Then you can style it up as the way that you like right here. For the cart I'm going to also make this inline. So let me go back here to my positioning, my width and make it inline. Now to make these spread out right here I'm going to click on my columns and from a column right here on the horizontal line select on space between. So this is a little trick right here on how to also use your elements inline. Now we could always add three columns here but adding multiple columns it could add a lot more below to your site and I'm always trying to build our sites fast. If there's ever a chance to keep everything inline I always try to do that. Okay so now we have all of our elements here. Now what we need to do is make this title right here dynamic. So click back on the edit heading. Let's go over to content. I'm going to keep it on the H2 because it is the product title so it's good to be an H2. Right here underneath title select on this dynamic tag. Scroll all the way down and what we're going to look for is the product title. So select product title and you'll see it disappear. Don't worry about it. It's because we're not on the product page while it's not showing. And we're going to do the same thing over here on this title. Let's do it to our price, select on here, go to content. Let's change the HTML tag though. I'm going to change this over to a diff. We don't need it to be a header tag. This is all for SEO right here. And then on the dynamic tag select on there, scroll down and select on product price. Again it'll disappear but don't worry about that. It's all good. All right next up select on publish. And I'm going to walk you through this right now. This is now setting up our conditions on where this is going to show and how it's going to show. So select on add condition and click on the drop down. Go to WooCommerce and we're going to select just products. That means it's going to show on all products. Now if you want this to show on a specific product you can even do that and type in the product that you want it to show on. For this though we want it to show on all products. And when we do this the bar is going to change, the title is going to change, the price is going to change and the checkout is going to be for the product that it's on. So no matter what product that you're on it's always going to change to that product. The next one is going to be your triggers. We want to do this one on scroll. So that way it's not showing as soon as you get on the product page because there's already a checkout button there. But when the user starts to scroll up the page we want the bar to pop up. That way it brings more attention to the checkout button right there. So let's click on there and right here this is how far we want the user to click now. I'm going to put on 15%. I want them to, I want this checkout button to scroll up pretty quick. I don't want to wait too long because I don't want the customer to leave the page before it pops up. We could even do 10%. Let's do 10. And we could leave everything as it is right here. So click on next. We do not need to set any of these up right here. We could go ahead and save and close. Now let's go ahead and check it out. Let's refresh our page here, scroll up and there is our checkout bar. We could still style it up more. We could make, you know, we could make this a little bit smaller. We could add padding in here. But it works and this is going to work on all of your product pages. Everything's going to be dynamic and it's always going to change the name and the price based on the product page. And you can see here we can click on add to cart and we just got our product added to the cart right over here. And that's it. As you can see it's super easy to set up and it's very effective too. It really makes the product pages stand out and it's a great tool to use to start increasing sales and conversions on the WooCommerce sites that you build. And don't forget to style it up for mobile. Scyling it up for mobile is just going to be like styling up any other element on Elementor with mobile. I always suggest to testing with the phone. Well I hope this helped out and if it did, you know, all that good YouTube stuff. Don't forget the likes and subscribes. If you have questions drop them in the comments. I get back to everyone. I really appreciate you watching and I'll be back again soon with more web design related content. All right. Thank you.