WooCommerce Checkout Page Customization with Free plugin
ฝัง
- เผยแพร่เมื่อ 26 ก.ค. 2024
- Learn how to take a free WooCommerce Checkout Page plugin and customize your checkout and cart pages in minutes.
WooCommerce Checkout Page Customization has always been a bit of a black art, but with this free plugin from the developers of WooCommerce themselves, you can be sure that the process is going to integrate effortlessly.
I'm going to show you how you can customise the checkout and cart pages to provide a cleaner and more modern look and feel and help focus your customers on the buying experience.
Learn how to create a professional cart page with collapsible coupon section all wrapped up in a more fresh design.
Don't stop there, tweak the features on your WooCommerce checkout page in seconds to provide buyers with a much fresher and sleeker checkout process.
Get the plugin: wordpress.org/plugins/woo-gut...
Take your WordPress website and skills to the next level!
► THE TOOLS I LOVE ◄
If you like what we do and would like to support us, please consider using these affiliate links when purchasing any of the plugins covered in our tutorials. Thank you for your support.
► WORDPRESS VISUAL PAGE BUILDERS ◄
★ ELEMENTOR PRO: jo.my/1s0t2s2
★ Brizy Pro: bit.ly/2Ji97r8
★ WPBakery Page Builder (Formerly VISUAL COMPOSER): bit.ly/2NVbVNP
★ DIVI 3 Page Builder: bit.ly/2HiiDcE
► WORDPRESS THEMES ◄
★ GeneratePress Premium: bit.ly/2Ydn1SE
★ OCEANWP: bit.ly/2fRHBr0
★ DIVI Theme: bit.ly/2G8JMiA
★ Astra Pro: bit.ly/2zruoKn
► WORDPRESS TOOLS ◄
★ SMART SLIDER 3: bit.ly/2G0G1vB
★ CSSHERO: bit.ly/2qbrRl6
★ SLIDER REVOLUTION 6 - jo.my/sr6
► WORDPRESS PLUGINS ◄
★ SEOPress Pro: jo.my/seopress
► SUBSCRIBE ◄
bit.ly/2rX7rhu
► LETS CONNECT: ◄
/ wptutz
SUPPORT: Our website offers additional information and perks. Please check it out! wptuts.co.uk - แนวปฏิบัติและการใช้ชีวิต
Very cool. That's exactly what one of my clients needs for their ugly cart page messed up by the theme they stick to.
Awesome! Thanks for this clear explanation. 👍🏾
Seriously good video, so simple and so effective! Thank you so much.
GREAT video! This helped me so much.
Thank you! This was so helpful. I'm creating an Elementor site kit with Hello Theme as my base, but Hello's Woocommerce styling is abysmal! This plugin makes my cart and checkout page look light years better!
@Digital Diva Design how do you do to insert the "checkout" wordpress block into the Elementor page please ?
@@charlieguillo7081 I have the same question !
@@MrDiozem I believe its done by using the shortcode option in Elementor
Thousands of thanks !!!
Thanks so much this video was useful for me
Thank you for this clearly explained tutorial. I'm trying to implement this but I cannot see how the 'my account' page fits in it. Is there 'returning customer 'option?
Same as others have stated, Paypal and XRP payment Gateways do not display. If the Cart is Elementor/EA and the Checkout is Woo Blocks could be the issue, something for the Devs to look at maybe. Thanks for sharing, look forward to some updates as it looked great!
Very helpful video.. thankyou so much
Thank you! :-)
life saver :)
Very clear video. Thanks !
Does it wor with Elementor activated ?
My page preview interface doesn't look lie this at all. When I clic "checkout" page, I access a page with "modify with Elementor" and publication settings on the right column... Hox can I get the display you have on the video ?
Ouch, the reviews... OUCH. Looks great too, would LOVE something like this for my customers!!!
I can do this
impressive. jazaka'Allah
The plugin was explained nicely, I guess you should have mentioned the payment gateway compatibility also in the video. Nice plugin, but useless for me as it does not support any payment gateways in India.
Thanks for the tutorial. I had come across the WooCommerce Blocks plugin a while ago but it never worked for me. The problem is that I can't get the forms to stay within the 1040px width like the rest of my pages as the Cart and Checkout pages fill the full width of the screen and the checkout page even cuts of the step number and the decimal places on the total price. It would be great if you knew how to correct this issue. I am using the Hello theme from Elementor and Elementor Pro. Also in your video on the settings it shows Document and Block. On mine it shows Page and Block so I don't have the ability to change any document settings. Thanks in advance.
Nice video. I guess this has some issues while using elementor page builder. I had the same a month ago. is it fixed?
Great tutorial. Can you please make a tutorial on Tutor LMS free version ?
Sir the plug-in is vgood but when I tried to add cash on delivery option it's not showing up in payment method at checkout page
Seems a nice clean way to display the checkout however in the video it shows shipping and then billing. There seems to be no way to disable shipping so only billing can be displayed but when you show your refreshed page it only shows billing, where is the setting to make it work like the video?
Thank you..
This looks cool, but the plugin's ratings are scaring me off a bit...
Yeah cuz it doesn't support Paypal, GooglePay, Apple Pay, COD and God knows what other payment methods
@@RoshanZ wtf, paypal is not supported? jesus...
ONE paypal plugin seems not to work, but another one i had is working perfectly. so all is fine, and my checkout is smooth now. thanks!
@@adorodrums Yes it's not supported mate. Which plugin you using now?
Hello I'm having a problem I hope you can help me, I enabled the phone number on the checkout page using that woocommerce blocks plugin but when I preview it live phone number won't show up, and I just noticed that it doesn't appear also on your side on [5:43]
Thanks
Hi WPTuts, I have the checkout block, but I dont see any "basket" on the block, Could you help me advice please, thanks
Definitely much cleaner look. However, I lost PayPal Pay, Amazon Pay, and other options that I originally had configured for my checkout page. How do I get those back?
Thank you for uploading this video, very helpful. I have one question, is there a way to hide the stock quantity? Maybe through css?
I've got the answer for anyone that's had the same issue. Add the CSS to the section of your Customizer (Appearance > Customize).
.wc-block-components-product-low-stock-badge { display: none; }
Thank you for your great video, but I have problem when I go to checkout I get redirected to ... /step/checkout-page/ instead of only checkout.
Once I edite the slug in ceckout page it showed that the Slug is checkout and not step/....
Do you have any idea how to fix that?
Hello! Thanks for the video! I followed this video and my website was working as expected. However, I have an error on the cart page and I have no ideas how to fix it.... The checkout page is working well but only the cart page has a problem. If you could let me know that would be amazing. Thanks in advance.
Can you edit text on buttons from i.e place order to "send quote"? Basket totals to "Quote summary" or something similar?
Thankyou Paul I love your Cart Page...really fresh looking
All the best for you here in the new yewar 2024 ! I have the same checkout page like you in the video, but I not found out how I can change the Add note to the order text to: Ordner notes required or add an asteriks to it. This block I not found in the woocommerce (free) plugin. Do you know how I can change the text or can add an asteriks to it? 👍👍
how to make mail as optional on checkout page ?
Do you have a list or a way of knowing what WordPress themes are compatible with this plugin? I have "Online Shop" and "Twenty Twenty-One" Installed on my website and it doesn't show me the block panel you have on the right-hand side of your screen. I believe I have to pick a different theme. Thanks for your video.
I believe coupon codes are an instant chance for a customer to leave your site to find a coupon and likely never return.
If I use Divi It should works?
hello, it looks great, but for example with pluging minimun shoping amount, it has returned a checckout error message. and not simply like before the minimun amount for checkout . any help how to resolve...
thank you so much your video reahank yoully helped me,but the fact is that i cannot see the card payment option it only shows paypal,but am using paypal standard which already has a direct link on my website,but on the check out is showing only paypal and bank transfer,how can i fix this,t
Is there a way to customise the colours/border?
I use Divi Theme and I don't know how to use the Gutenberg block editor to customize the checkout page.
Can you help me?
One question, Im a flower store and I would like my customers to pick out a delivery date from a calendar. How can I implement that ?
Hi .. how to do virtual multiple digital products without shipping in woocommerce
This is awesome Paul C! Curious do you how to redirect after product purchase to a custom page? I’ve got some yoga Zoom classes for a client I need this for. Also I might want to hire your awesomeness sir for assist w custom Crocoblock based talent search site! Do you offer this and if so how can I send you details about for quote?$! 🙌🏻
Hi there is payment error after installing blocks please can you let me know about this issue?
Excellent video. How could I remove the zip code field? I don't need it and I couldn't delete it. I would appreciate if you could help me. All the best!
So with this plugin, I can't see any Ship to different address field? How can i solve this problem. thanks
Just noticed that WooCommerce Upsells don't show up in the cart page when WooCommerce Blocks is activated.
It's not showing any payment methods on this checkout pages, any solutions?
Hello very nice video and intersting. But i need some help if you dont mind answer them.
Does that plugin lets you move the fields?
Does it let customize the way that theme is showing it?. I mean theme has a original look for checkout page. Is that plugin give the change to change it?
Have a good day or night.
is there a way to provide sign up fields?
Thank you so much this is exactly how I want my cart and check out page to look like. But quick question. Is there a way I can customize the text to another lanuage on the labels?
Yes, I want to find out how to edit to a new language.
You can use the plugin "Loco translate" to easily translate almost everything that's displayed by a plugin
Is this compatible with divi theme?
how is the header saying checkout ?
How do I add a step to Order Delivery Date? So costumers can choose when to get their order.
Will this work with elementor
How to fix an issue with payment methods ? I've already have them on default checkout page but with a new plugin it requires to add payment methods which already exists. Please help..
Doesn't show the page
I use Elementor maybe that's why
Same, it's not working. but my checkout page isnt even an elementor build so I dont know why it isnt working
Hi Can you share some good plugins for wpbakary woocomerce? - (I need to design checkout and thank you page). Thank you
Payment options show all methods active, but on final page it shows only pay pal.
the shipping cost can't be detected sir.. please help
check out button on this plugin is not working it keeps loading an won't go to check out page.
Hey Paul, I had installed this plugin but it have a few bugs with regards to the payment process. Not all third party plugin are compatible with this plugin which i find is a huge setback.
I believe that it currently only supports the default WC payment processors (PayPal & Stripe). Hopefully, they will address the concerns and criticisms that are evident on the plugins page. It's not perfect if you're using alternative payment processors for your store. Stay tuned though, as I'll be looking for more WC customization options and that will also feature checkout and cart page mods.
Yes I want this for Razorpay (India's trending gateway) paypal charges too heavy
User redirection to login page during check out issue, also payment integration not working!!😉😉😉😉🙄🙄🙄🙄🙄Help
Thanks for the video! How do I remove the Shipping Address section? I am selling a digital download product.
my checkout page doesn't show up under pages? what gives?
I don't know who at Woocommerce had the brilliant idea of putting "Billing address" first, but it doesn't make sense at all! I hope this works for my website.
it doesn't work with the euro symbol. It displays € instead of €
How about where do I translate the texts?
Thanks. Too bad they still don't understand that the checkout page has a huge abandonment rate and so conversion rate optimization should be a huge prioirity with things like secure checkout/trust seals, reviews, etc.
Do you have another option that does the job? The style of this plugin is cool, but I'm having problems with Elementor, and it seems there is problems with payments... If there is another option with this good design, even paid, maybe would be better.
Depending on your budget, you may want to take a look at something like www.checkoutwc.com/.
I've not tested it personally, but it does look like a very comprehensive (if a little expensive) solution.
I need your help
its not showing all the payment method options. Works with Stipe, Paypal and default woocommerce options.
hi. it was great however i have an important question. when I set up the woocommerce block, there was a problem with my payment method. It wrote that my store does not have a payment method configured to support the woo commerce block. and I don't know what to do, as the previous woocommerce checkout default page didn't have this problem. and my payment methods are already set up so I don't understand the problem
and i use paypal and stripe, so I really don't understand the problem. please help me
Hi. I am using the divi theme with divi builder. Will that plugin work with that. Or can I use the gutenberg builder too? Or better delete divi ?
I believe you'd need to choose between Divi and Gutenberg for the specific page, but you could use both plugins on a site.
Great video Paul! Look like shopify more cleaner and nicer look!
It is not compatible with most payment gateways
error THERE ARE NO PAYMENT METHODS AVAILABLE. THIS MAY BE AN ERROR ON OUR SIDE. PLEASE CONTACT US IF YOU NEED ANY HELP PLACING YOUR ORDER. no stripe woo commerce integration or no. it would be wonderful if it supported it. nice video and explanation...
I need you help
in this checkout page Razorpay, Payumoney payment getway option is not showing. only showing woo default payment option. how can we solve it
You'd need to contact the developers to see about additional payment gateway support. 👍
Hey Paul! It's a shame that this is not available for Elementor. Looks very nice.
True. They have blocks for product pages but should have given options for customizing the cart and checkout pages too!
Wow, you recommend a plugin with 200k+ installs and a rating of 2.4 out of 5? I feel sad just reading the reviews and comments
If it was for anything other than the checkout and cart pages I probably wouldn't have, but as always this is just an option for those who don't want or need a page builder installed but still want a level of customisation.
If it's not for you, no worries. I'm just here to tell you about your options. 😉
not bad. just one issue I have: express checkout seems not to work, plus (or maybe because) paypal is gone... huh?
ah, never mind, got it running. one plugin did not work, but the other would still.
waiiit... i celebrated to early. payments are not going through. but i guess i messed up....
Like 👍
This plugin doesn't have compatibility with most of the payment methods
Create video. Just a head up to everyone...user accounts will not be created if you use this plugin. It is now a known issue. Anyone experience that issue?
You should start this video saying THE PAYMENT DOES NOT WORK, :(
ASAP
This plugin has been closed as of February 28, 2024