WooCommerce Product & Cart & Checkout ALL on the SAME PAGE - Elementor Wordpress
Vložit
- čas přidán 19. 03. 2023
- Join our 'How to Start a Web Design Business' Course - and use strategies to grow, get clients, and generate recurring income: websquadron.co.uk/how-to-star...
Book your 1-2-1 Consultation: websquadron.co.uk/socials
This is how to Create a One Page WooCommerce Product and Cart and Checkout on the same page - Elementor Wordpress. Just a creative method without any code or 3rd party plugins.
Show and share and convert on the same page.
Add this Code to Remove the Continue Shopping Button: www.codesnippets.cloud/snippe...
Add this FREE Plugin if you want to add an 'Increase or Decrease or Remove Item' to the Checkout: wordpress.org/plugins/change-...
We love to create - share - respond - and deliver.
🧐 Learn with our Mastery Modules: websquadron.co.uk/web-design-...
🔗 All of our Important Links: websquadron.co.uk/socials/
😃 Join our Facebook Group: / 3309523509284305
😃 Get Code Snippets Pro: r.freemius.com/10565/3304295/
😃 Get Elementor Pro: be.elementor.com/visit/?bta=2...
😃 Boost your CZcams Analysis: www.tubebuddy.com/websquadron
👕 Get our Merchandise: websquadron.co.uk/merchandise
🥹 Support us: paypal.me/Websquadron
Hire us to work on your Website!
💌 info@websquadron.co.uk
👩💻 Visit websquadron.co.uk - Jak na to + styl
Brilliant! Just catching up on all your missed videos for the past week! Day job has been crazy and got sick to boot! Cant wait to join in for the live tomorrow :)
Your energy level and content is unbeatable. Great work
Thanks a lot 😊
you post excellent practical stuff and videos are packed with nuggets! keep it up
Thank you for this channel and your energy in explaining stuff...
Love your tutos, absolutely great work!
Great tutorial! Direct on point.
Thanks dear, it helped a lot!
Thanks mate, That's actually really amazing and nice content
terrific video, many many thanks !
This is a game changer, thanks
you got a subscriber man!
Thank u so much
How customizable is the checkout? Can i enable caching in the main page for site speed?
Is there any way to remove the other sections (billing details, payments, coupons...) from the checkout widget and just keep the Order Summary?
Ok I’m a customer, how do I have to change the quantity? Do I have to click on the "buy" button many times?
When I click on the 'Add to cart button' twice then it redirects me to the product details page. How can I fix that please? 🙂
Very nice brother, does it works with variable products also?
Was trying to create separate checkout page for certain products .
Option followed > template >single page > checkout widget > condition > products > certain products name .
I don’t know it it’s gonna be ok? Does anyone created this format before @everyone
hi imran , thanks for tutorial, i've followed ur steps and it works flawlessly. one thing thou, i did use elementor forms and redirect to add to cart produk link. any way to make it anchor links for addtocarts?
Not sure, I'll have a think
Interesting. The page you are modifying is the checkout page? ( the page you set as checkout page) i did not completely understand which page you were on initially ( not native english sorry)
I merged the woo cart with the woo checkout with a bit of code. So the woo cart is skipped. And you land on the checkout page.
But i would love this for upsell products for example
Basically it's a New Page that contains one or a few products. And then you add the Checkout Widget beneath.
So it's not the Checkout Page as standard - until you assign it to be that page.
Great video. I appreciate the time you take to put these together. Question, when I delete the quantity or add/delete an item, the page refreshes and shoots me to the top of the page. Any way to have it stay put at the cart section we created? Thanks!
It should stay there unless the cart is further down the page?
@@websquadron thanks for the reply. the cart on my site is setup just like you have it underneath the container that has the add to cart button. When I hit add to cart, it jumps to the top of my webpage. Once I scroll to the cart it does have the item in the cart.
Hello, how can I change the "apply" text of the apply discount code button?
I need to put "apply" in Spanish, but I can't do it
May need to use Loco Translate for that
great tutorial, can you please suggest a plugin to make add to cart button pop up order form like a mini checkout in a pop up in single product page
I’ll have a think
Good one again man. Love to watch your content.
Btw, do you know how to align icons with the text ? All my icons are a bit above the text,are not aligned. Either in icon list or price table.
I try to align from settings with vertical alignment, after i try custom css but the code is not responsive and it overrides the settings for icons in all pages. I mention taht i use flex containers
Version 3.12 when it releases will sort that out
@@websquadron thank you, be blessed
Hello, thank you very much for your video. I have the following problem: I have an online store with physical products. Here the shopping cart button fits me quite well. I now sell online courses and would like to set up a direct checkout only for these online courses. Is this possible? Can I set up the checkout page for actually only one product?
Might need some code written for that. Have you asked ChatGPT to create some code where only a particular product ID goes to the checkout page?
Great video🎉
Quick question. Let's say I have just 2 products, the one a Basic version and the other the most popular option, which is like the basic plus added benefits, but ofcourse I want anyone who would like to pick the other to be able to add that to their order using a checkbox.
How can I achieve that?
That would need a 1-2-1 Consultation to brainstorm.
@Web Squadron thanks for your reply. I have since updated my knowledge a little more, looking around. What I want to achieve can be done with a one-click upsell type of plugin. But I have a few ideas to implement from what you shared in this video.
Thanks once again.
Excellent tutorial but I have a question, is it possible to create a button to clear the cart?
Yes indeed = czcams.com/video/9BMhwXgs92M/video.htmlfeature=shared
THANK YOU!
This is exactly what I was looking for BUT, i'm a new, and it's not working 100% for me.
Issues:
I can see the form without clicking the checkout button.
My checkout button takes me to the product page.
Thank you for any and all help. Hopefully, you can use this information from the perspective of someone new.
@3:58 This is what is unclear, and I think causing part of the issue. The cart, checkout, and homepage are just one page? I labeled home...😑
Woow super nice! One client asked me lately if it is possible to have both. For some product items show the cart page and for some products not. Do you think this is possible?
I’m sure I saw a snippet for that but it could get messy
thank you for your amazing content - maybe you will be able to answer that I was looking for all over and can't fund - how would it work in the mobile? I wanted to show the users their buy summery and then for them to fill their details - but nowhere could I found how to change the order of the sections in the checkout page
You could use the order setting in the advanced tab. Give your items a number and it will rearrange the widgets
thank you but how can I give numbers within the plugin? it's in one "block" and not separated into sections
This is great! What if they need to make changes to their cart?
They can do.
Wow, bro! Its really good tutorial. Somehow there are no any good videos about such a popular type of websites as selling landing page for wordpress.
Is it possible to make a cart as a pop up and add option to choose product's size (s,m,l,xl) on the same page (or as another pop up with product details) Almost finished my landing, but having issues with those 2 things. Will aprecciate for your help!
Yes as you could enable the popup to show a particular product template that only shows the relevant fields like variable etc. You'd need to test it.
So you have to set THAT page as the cart page as well as the checkout page in that Hamburger woocommerce settings area?
If so that makes all of my products redirect to that page after they are added to a cart.. correct?
Question: Can a User/Reader Remove the unnecessary product that has been added by him/her by mistake or in case the user's mind changes ??
I don't have that feature because it's only meant to be for 1 product with no quantity, and they only purchase when they complete the order.
I wouldn't use this if you're planning to have may products.
Just loved the video. Imran, one quick suggestion though - We all know that you are a wonderful person and an awesome tutor. But, the round thumbnail of yours were quite annoying - please reduce the size of it or place it in a corner where it does not over powers the visibility. Just a suggestion. 🙂
Yup, I'll mess around with reducing it.
In the page setting is not able to set the same page on cart page as well as the checkout page as you did. 🤔 (I mean with the same Page ID).
Doesn't always work - I tried it. But you may prove me wrong :)
Go to the site setting to change it， video time：3:50🤣
Not working with signle product page . We can use only for 1 product only.
Yup that's what I said in the video.
Can you do this in Bricks Builder? If so, please can you do a tutorial on that?
I’ll have a think
You're a genius. However, would this work with a product that has variations? one price, but different colours and styles?
Yes and you may want to wait till you see the video that comes out on Thursday with regards to the variations
Also, do you have any tutorials on how to properly connect woocommerce with social media such as Instagram, TikTok and Facebook in order to sell there as well? Adding or deleting products from the Woocommerce store that would reflect Social media? Is that possible?@@websquadron
I suggest that you also show how it looks on mobile view..... Not just on this one but on all your tutorial vids. ✌️
Next time I will but it's easy to visualise as it's container so you can stack it however you want or even hide some.
I love watching your videos... The desktop view is always easier than mobile view. But people are more on their mobile than desktop nowadays. I just thought that mobile view should always be incorporated in the tutorials because that is the reality for all web designers.
is it possible with elementor free version?
No
i am bit confused about the Elementor #11 thing, can you help me out please.
Could you tell me the Timestamp so I can advise better
@@websquadron I apologize for the delay in my response. Currently, I am working on a single product using Elementor and implementing a product loop. Additionally, I have incorporated some variation swatches. However, my current concern is that I want to clear the shopping cart every time the page is refreshed. Is it possible to achieve this? I would greatly appreciate your assistance.
@@websquadron sir please reply
its the page to put checkout and cart same time, you can try create any page and folow the tutorial above to test
Hi, you always make great videos, I wanted to test this on myself, but I can't get it to work.
When I click on the add to card button, I am always redirected to checkout.
What am I doing wrong?
Did you go to Wordpress > WooCommerce > Settings > Products > Then tick the box to direct to the Checkout after an Item is added.
Don't skip the part of the video when I go over the WooCommerce settings.
@@websquadron Hi,
I had a look at that, but it doesn't work.
"Add to cart" behavior -behaviorForward to shopping cart after successful addition
-Enable AJAX Add to Cart buttons in archives
For me, there are dikese points to choose from.
@@heiko2261 Sorry but I know it works as long as you make sure that both of these are selected.
1) Redirect to the cart page after successful addition
and
2) Enable AJAX add to cart buttons on archives
Did you also assign the Page to be the Checkout as in my video?
@@websquadron Hi, now it works for me too, thanks.
@@heiko2261 Cool. What did you do to make it work?
Doesn't seem to work with variable items, or am I doing something wrong?
Which bit didn’t work?
@@websquadron When I click it still redirects me to product page because i must select 1 variable in order to purchase
Did you find a solution for this? I have the same issue.@@valorant_official
It's working for multiple products ?
You could add more than 1 on the page
Awesome content. One thing though when I clicked on the add to cart it take me to the product page. I followed the steps carefully. I feel I am missing something. Can you help. Pleeeeeaaaasssseeee!!!!! Thanks
You need to change the button to be an Add to Cart Button
@@websquadron It's on "custom add to cart"
@@websquadron when I click it it take me to the product page
@@actionmoviessynopsis In that case it could be another setting, etc, so unless we did a 1-2-1 - I can't help much :( :(
@@websquadron okay if the client that suggested it is willing to proceed I will notify. Thanks a bunch. I will tell him.
My problem is that my checkout is at the bottom of the page, and when the customer adds the product to the cart, the page is updated and returns to the top, so the customer needs to scroll down to the bottom of the page to complete the purchase.
Could the height of items be altered or some checkout fields removed?
@@websquadron I solved the problem by adding a script that adds `#checkout' to the end of the add to cart button links, because the buttons by default have the href format `yoursite/?add-to-cart=(ProductID)&quantity=1&e -redirect=yoursite/. Every time the page is loaded, the script automatically adds the anchor link at the end of the href and when clicking add to cart, the customer adds it and is redirected to the checkout section.
@@BryanBusch Could I get this script? Where did you add it?
@@BryanBuschhello. can you give us more details about this tweak? Thank you in advance.
I don't think imran sir it's a complete tutorial. please make a complete tutorial on this.
It’s a one page tutorial for a single product so it’s fine
How to I do this on every single product page?
Not recommended as you'll have issues with multiple Checkout Pages. Are you selling Virtual or Downloadable products or tangible products?
Tangible products
@@mairajuddin4816 I think it also works for several products. I don't see where the problem would be.
Dont´t work ;/
How so as it does work. Could be one of your settings or method.
This only works well if you sell 1 product :I
Exactly
What kind of Voodoo magic is that?