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 :)
thanks imran, can i ask possible to make it into a elementor nested tab, so when click on "monthy" tab, it loads the monthly product plan and yearly -> year plan? and just show the checkout form directly
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
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
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?
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.
Is there a way to integrate a checkout form in a regular page? I'm selling a single product and I want a real single page - product description with images, benefits, testimonials, FAQs and the checkout form directly in that same page.
@@websquadron Hey man, thank you for your response! I didn't express myself right. What I meant was, is there a way the checkout form to be automatically shown? Meaning that it will not appear when a button will be clicked (like in the video 'Add to Cart' and then the checkout appears) but it will be already there and just ready to be filled with the customer details? My goal is to have a couple of buttons on the page like 'YES! I WANT TO START TODAY" and when clicked, the customer will be jumped/scrolled to the section/container with the checkout form already shown and ready to be filled?
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?
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
@@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.
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.
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?
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.
@@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.
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!
@@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, 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?
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?
you may want add a snippet to empty the cart first, like below: add_filter( 'woocommerce_add_to_cart_validation', 'check_cart' ); function check_cart( $cart_item_data ) { wc_empty_cart(); return true; }
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!
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
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?
@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.
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. 🙂
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.
Your energy level and content is unbeatable. Great work
Thanks a lot 😊
Thank you for your teaching. One question is does this page apply to all product checkout or its meant for one product?
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 :)
terrific video, many many thanks !
One of the best tutorials on UA-cam!. Thanks
Thank you for this channel and your energy in explaining stuff...
Ron weasly: Bluddy hell! Thats still an overwhelmingly huge checkout page...you ought to through the forms into accordions.
You may have missed the remove checkout fields snippet I shared a few weeks ago
Love your tutos, absolutely great work!
you post excellent practical stuff and videos are packed with nuggets! keep it up
thanks imran, can i ask possible to make it into a elementor nested tab, so when click on "monthy" tab, it loads the monthly product plan and yearly -> year plan? and just show the checkout form directly
Not sure. Have you seen the New Calculated Logic Elementor Form Select Options and Pay with PayPal video I released on Monday?
How customizable is the checkout? Can i enable caching in the main page for site speed?
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
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
Great tutorial! Direct on point.
Thanks dear, it helped a lot!
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?
Does the page refresh after clicking the add-to-cart or is there an ajax call?
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...😑
Is there any way to remove the other sections (billing details, payments, coupons...) from the checkout widget and just keep the Order Summary?
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
Ok I’m a customer, how do I have to change the quantity? Do I have to click on the "buy" button many times?
Excellent tutorial but I have a question, is it possible to create a button to clear the cart?
Yes indeed = ua-cam.com/video/9BMhwXgs92M/v-deo.htmlfeature=shared
Is there a way to integrate a checkout form in a regular page? I'm selling a single product and I want a real single page - product description with images, benefits, testimonials, FAQs and the checkout form directly in that same page.
This should do that for you.
@@websquadron Hey man, thank you for your response! I didn't express myself right. What I meant was, is there a way the checkout form to be automatically shown? Meaning that it will not appear when a button will be clicked (like in the video 'Add to Cart' and then the checkout appears) but it will be already there and just ready to be filled with the customer details? My goal is to have a couple of buttons on the page like 'YES! I WANT TO START TODAY" and when clicked, the customer will be jumped/scrolled to the section/container with the checkout form already shown and ready to be filled?
@@Deyanxch How many products will you be selling and what kind of products are they?
@@websquadron One digital product consisting of 5 PDF files - An eBook guide with 4 bonuses
@@websquadron 1 digital product consisting of 5 PDF files - An eBook guide with 4 bonuses.
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
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
Very nice brother, does it works with variable products also?
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🤣
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
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
This is great! What if they need to make changes to their cart?
They can do.
you got a subscriber man!
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.
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
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.
@@BryanBusch ?
Not working with signle product page . We can use only for 1 product only.
Yup that's what I said in the video.
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
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.
Can you do this in Bricks Builder? If so, please can you do a tutorial on that?
I’ll have a think
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, 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?
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?
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? 🙂
you may want add a snippet to empty the cart first, like below:
add_filter( 'woocommerce_add_to_cart_validation', 'check_cart' );
function check_cart( $cart_item_data ) {
wc_empty_cart();
return true;
}
Thanks mate, That's actually really amazing and nice content
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.
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
This is a game changer, thanks
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.
is it possible with elementor free version?
No
is there a tutorial from 0 to finish?
It's working for multiple products ?
You could add more than 1 on the page
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.
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.
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.
Can's see the snippet code, this is painful
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
Dont´t work ;/
How so as it does work. Could be one of your settings or method.
Thank u so much
This only works well if you sell 1 product :I
Exactly
Your tutorial does not work. Watched your tutorial multiple times and it does not work. Please remake with more step by step process. Thank you
Which bit didn’t work as it worked for me.
What kind of Voodoo magic is that?
Next time mention it in the title of the video or say it at the start of the video that you need elementor Pro, you just waisted 4 minutes of my time.