How to Merge Woocommerce Cart and Checkout Page?
Vložit
- čas přidán 10. 07. 2024
- In this video I’m going to show you how to merge Woocommerce cart and checkout page in a way that they work on a one page. It’ll take only couple of minutes to accomplis that.
All the snippets shown in the video are here: wpsimplehacks.com/merge-wooco...
Blocksy and Kadence are currently two of the best WordPress themes. So, if you’re interested, then you can grab:
🅱️ Blocksy theme wpsimplehacks.com/blocksy (SAVE 10% Coupon WPSH10)
🔵 Kadence theme here: wpsimplehacks.com/kadence (SAVE 10% Coupon SIMPLEHACKS)
✅ If you want to be the first to be notified about the new tutorials then please subscribe to this channel. / channel
✅ BEST WORDPRESS THEMES:
Blocksy theme: wpsimplehacks.com/blocksy (SAVE 10% Coupon WPSH10)
Kadence Theme: wpsimplehacks.com/kadence (SAVE 10% Coupon SIMPLEHACKS)
Astra Theme: wpsimplehacks.com/astra
GeneratePress: wpsimplehacks.com/generatepress
OceanWP: wpsimplehacks.com/oceanwp (SAVE 10% Coupon WPSH10)
✅ MY FAVOURITE WEBHOSTING PROVIDERS:
Verpex Hosting wpsimplehacks.com/verpex
A2 hosting wpsimplehacks.com/a2-hosting
Cloudways wpsimplehacks.com/cloudways
✅ AWESOME WORDPRESS PLUGINS:
WPCodeBox wpsimplehacks.com/wpcodebox (SAVE 20% Coupon WPSH20)
WooLentor Elementor/Gutenberg add-on wpsimplehacks.com/woolentor (SAVE 20% Coupon WPSH20)
Best Wordpress Backup, Migration and Staging plugin - WpVivid Pro wpsimplehacks.com/wpvidid (SAVE 20% Coupon WPSH20)
Best Gutenberg Blocks addon - Kadence Blocks wpsimplehacks.com/kadenceblocks (SAVE 10% Coupon SIMPLEHACKS)
Best forms plugin - Fluent Forms: wpsimplehacks.com/fluentforms (SAVE 20% Coupon: WPSH20)
Best for email marketing - Fluent CRM: wpsimplehacks.com/fluentcrm (SAVE 20% Coupon: WPSH20)
Best events calendar and ticket selling plugin - WP Eventin wpsimplehacks.com/wp-eventin (SAVE 20% Coupon: WPSH20)
Best for creating tables - Ninja Tables wpsimplehacks.com/ninjatables (SAVE 20% Coupon: WPSH20)
Best Wordpress LMS - Tutor LMS wpsimplehacks.com/tutorlms (SAVE 20% Coupon thmwelcome20)
✅ AWESOME WOOOCOMMERCE EXTENSIONS:
Best Woocommerce Swiss Knife tool - Kadence WooExtras wpsimplehacks.com/wooextras (SAVE 10% Coupon SIMPLEHACKS)
Advanced Dynamic Pricing Pro wpsimplehacks.com/dynamic-pri... (SAVE 20% Coupon: WPSH20)
Phone orders For Woocommerce Pro wpsimplehacks.com/phone-order... (SAVE 20% coupon: WPSH20)
Advanced Orders Export Pro wpsimplehacks.com/export-orde... (SAVE 20% coupon: WPSH20)
Best Woocommerce sidecart plugin - Woocommerce Cart in One wpsimplehacks.com/cartinone
TIMESTAMPS
00:00 How to Merge Woocommerce Cart and Checkout Page?
00:35 Install Code Snippets plugin
01:32 Merge Woocommerce cart and checkout page
02:29 Redirect Woocommerce cart page to checkout page
03:18 Redirect empty cart and checkut page to shop page
04:30 Customize Woocommerce checkout page - Jak na to + styl
What kind of scenarios in your shop are those that need a cart and checkout page to be merged? Let me know in the comments.
I can't remove an item, i get this Sorry there was a problem removing
best teacher on YT, no BS, simple, fast, efficient!
Glad you think so ☺️
You my man, are a hero! I used the 'Alternative option' as I don't have a shop page allocated. Thanks alot
You're welcome 😊
Great Piece of Content very well explained! Thank you
You're very welcome!
Your videos are not only very well explained they are also very very practical. Thanks my Suomalainen friend :)
Thanks 😊
PS! No Suomalainen. I'm Estonian 😏
@@wpsimplehacks You're welcome, ahah the accents are similar I guess :)
Estonia and Finland are neighbours and our languages are a bit similar, hence the similarities
Thanks! you saved my day. Just made a donation 😍
Thank you for the beer 😊
Another excellent video. Thank you.
Thanks 😊
Total gold once again!
Thanks ☺️
thank you so much sir!
You're welcome 😊
Thank you so much for this tutorial, it was very easy to follow! However, I have currently come into a problem where I only get a faulty message in the checkout when one of the items in cart is out of stock. The fault is something like this: "there are some problems with the articles in your cart, go back and fix it", and then a button to return to cart. Unfortunately, this button does nothing as the cart is redirected. Do you know of any way of making the checkout able to deal with this issue without refering back to the cart?
See this wpsimplehacks.com/merge-woocommerce-cart-and-checkout/#step-4-automatically-remove-out-of-stock-products-from-cart
This code checks each item in the cart and automatically removes it if it's out of stock. It also displays an error notice to the user to let them know that one or more items have been removed.
Thanks but when i try to remove item on basket. İt say "Sorry there was a problem removing" :( Can you help ?
It's hard to tell what's up with that. Maybe som incompatibility with a plugin or theme.
I used your code, but I have problem. With you when you delete something out of the cart its super fast. But with me it takes 4 seconds instead of 2. because it gives an extra redirect on the removal. Probably cause when the cart gets changed it needs to add an extra redirect to make the checkout part up to date. So how did you make removing products so fast? Thank you
Hi,
I haven’t modified or tweaked anything on my site and everything works well and fast out of the box. Therefore, unfortunately I am unable to hepl you with it.
if i want to redirect an emty checkout page to another page? Not to shop but to home per example ( or the learndash course overview page)
already found my own answer. you can just put the slug of the page in the safe redirect function
☺️
Firstly, thank you for your hard work. Secondly, I would like to ask you about something. When the cart is empty, a message appears, “There are no products in the cart,” and at the bottom is a “Continue Shopping” button. I would like to change these texts to my native language, but I do not know how. I tried customization. Editing using Elementor but it does not work. I cannot edit these texts
Loco Translate plugin allows you to translate everything coming from the plugins and themes. See here wordpress.org/plugins/loco-translate/
Hi, first thanks a lot for your videos. I have a custom thank you page, (redirect to custom page), how do I display order details in the custom thank you page? Thanks a lot for your time
Sorry, I can't help with this
@@wpsimplehacks thanks anyway
Nice 👍🏽 Also show the responsive view.
Noted
super totally amazing keep it sir
Thanks 😊
Awesome tutorial, however cross selling products that are normally in the cart gone after this merge ;)
Yeah, unfortunately this hack is not bulletproof for every case.
Thank you for this great Video. I would like to redirect to the home page what I have to change in this part: wp_safe_redirect( get_permalink( wc_get_page_id( 'shop' ) ) );
changing shop with home did not work.
See whether this helps you out wpsimplehacks.com/how-to-merge-learndash-and-woocommerce/#step-4-redirect-user-to-the-learndash-courses-tab-after-login
You would need to remove role based conditions though
🌳🌳🌾🌾🍁🍁🌔🌔🌍🌍Good way, good tutorial
Stay connected :)
What theme are you using Sire :)
It is Blocksy theme (Pro version). It also has a free version you can test before buying Pro.
If you need a Pro version, then here you can get it with the 10% discount wpsimplehacks.com/blocksy (SAVE 10% Coupon WPSH10)
Would love if you do a video on removing Woo scripts from non product/category pages.
See whether this post helps you out wpbeaches.com/override-woocommerce-css-styles-conditionally/
WP Simple Hacks - Wordpress tips and tricks nice I’ll give that a try. Thanks!
For some reason the redirect isn’t working for me. My slug for the shop page is ‘buy-crypto’ I have updated it in the code snippet but I get a blank page whenever I remove an item from the checkout page. Am I missing something? Thanks for these useful tips btw.
Somehow it seems that it works only with "shop" slug and not others. Maybe it is because of the Woo updates, I really don’t know.
Here is the alternative for you:
1) Delete the snippet that should redirect the user to the shop page.
2) Use this snippet here below. It will add "Return to shop" button to the empty checkout page.
add_filter( 'woocommerce_checkout_redirect_empty_cart', '__return_false' );
add_filter( 'woocommerce_checkout_update_order_review_expired', '__return_false' );
I have the same issue. But i have the dutch alternative to “shop” slug. He does not like that either. The return to shop button is perfect solution.
@@wpsimplehacks This works very well. Thank you!
Please Create a Video using Snippets on woocommerce Product Image Flip on Hover or Zoom on HOver .
Flip cannot be solved with the simple snippet. Hover effect is shown in this video here (see at 27.41 mark) czcams.com/video/Q14xDtH-AcE/video.html
Good hack 👍. i want to see a hack to disable "view your cart" message please.
Try with this one here:
a.added_to_cart.wc-forward {display:none}
Goes to Customizer >> Additional CSS
@@wpsimplehacks
Thank you🙏. The CSS works but the add to cart button disables when i click on it.
On my theme it works well which means you would need to inspect the Css of your theme's View cart button and change the CSS accordingly.
@@wpsimplehacks
I use the Kadence theme and product grid. But the add to cart button disables when i click add to cart. It was also before the CSS code.
@AA A
In Kadence you have two options:
1. Go to Customizer >> Woocommerce >> Add to cart behaviour and deactivate "Ajax add to cart". This disable the View cart which appears after adding product to the cart. Although, “Hoodie” has been added to your cart. >> View cart will appear on top of the product and this is default Woocommerce behaviour.
2. If you don’t want to disable Ajax add to cart then use this CSS snippet here below. This disable View cart button on the single product page only BUT since no notification about products added ise shown the now your customer has to somehow figur eout whether the product was added to the cart. If you have a Kadence Pro then you should activate Popup cart for option for header cart element. At least it opens up after adding the product into cart.
Although I don’t think that hidind View cart button is a good move.
/* HIDES VIEW CART BUTTON ON SINGLE PRODUCT PAGE */
.woocommerce div.product div.summary a.added_to_cart.wc-forward {
display:none
}