WooCommerce Checkout Page Customization with Free plugin

No video

WooCommerce Checkout Page Customization with Free plugin

Рет қаралды 95,049

Күн бұрын

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/...
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

Пікірлер: 117

@rickderico356 3 жыл бұрын

This looks cool, but the plugin's ratings are scaring me off a bit...

@RoshanZ 3 жыл бұрын

Yeah cuz it doesn't support Paypal, GooglePay, Apple Pay, COD and God knows what other payment methods

@adorodrums 2 жыл бұрын

@@RoshanZ wtf, paypal is not supported? jesus...

@adorodrums 2 жыл бұрын

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!

@RoshanZ 2 жыл бұрын

@@adorodrums Yes it's not supported mate. Which plugin you using now?

@tshine672 4 жыл бұрын

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!

@elementearth1104 3 жыл бұрын

Ouch, the reviews... OUCH. Looks great too, would LOVE something like this for my customers!!!

@kidstanushow8429 3 жыл бұрын

I can do this

@DigitalDivaDesign 3 жыл бұрын

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!

@charlieguillo7081 3 жыл бұрын

@Digital Diva Design how do you do to insert the "checkout" wordpress block into the Elementor page please ?

@MrDiozem 2 жыл бұрын

@@charlieguillo7081 I have the same question !

@stamdev7621 2 жыл бұрын

@@MrDiozem I believe its done by using the shortcode option in Elementor

@BijuJose 3 жыл бұрын

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.

@ryann7741 3 жыл бұрын

Thank you..

@SingaporeMathsAcademyUK Жыл бұрын

Seriously good video, so simple and so effective! Thank you so much.

@petersvardsmyr 3 жыл бұрын

GREAT video! This helped me so much.

@greenkerala7756 3 жыл бұрын

how to make mail as optional on checkout page ?

@vendercentraldirectorylist5704 4 жыл бұрын

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.

@WPTuts 4 жыл бұрын

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.

@vighnesh.acharya 4 жыл бұрын

Yes I want this for Razorpay (India's trending gateway) paypal charges too heavy

@moirfankhatri5196 3 жыл бұрын

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

@MsToptool 3 жыл бұрын

Doesn't show the page I use Elementor maybe that's why

@seldaradoncic2034 3 жыл бұрын

Same, it's not working. but my checkout page isnt even an elementor build so I dont know why it isnt working

@devyTricks 2 жыл бұрын

It's not showing any payment methods on this checkout pages, any solutions?

@kevinrichter9397 4 жыл бұрын

Very cool. That's exactly what one of my clients needs for their ugly cart page messed up by the theme they stick to.

@mamadidoukoure1069 Жыл бұрын

Thanks so much this video was useful for me

@Lumeone 3 жыл бұрын

Thank you! :-)

@markuspatzer8658 7 ай бұрын

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? 👍👍

@shajar4750 2 жыл бұрын

impressive. jazaka'Allah

@MD-wk3gj 3 жыл бұрын

I believe coupon codes are an instant chance for a customer to leave your site to find a coupon and likely never return.

@CuddlyFellows Жыл бұрын

Very helpful video.. thankyou so much

@iant5695 3 жыл бұрын

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?

@realizaresiteuri2417 3 жыл бұрын

Thousands of thanks !!!

@Azlewscom 3 жыл бұрын

Hi WPTuts, I have the checkout block, but I dont see any "basket" on the block, Could you help me advice please, thanks

@charlybtube 3 жыл бұрын

Awesome! Thanks for this clear explanation. 👍🏾

@DrMichaelLozano 3 жыл бұрын

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?

@nickhariri2743 2 жыл бұрын

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.

@MrDiozem 2 жыл бұрын

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 ?

@ashrafbinafsar3837 2 жыл бұрын

Thanks

@boluosho2548 3 жыл бұрын

Thank you for uploading this video, very helpful. I have one question, is there a way to hide the stock quantity? Maybe through css?

@boluosho2548 3 жыл бұрын

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; }

@zannakristal3754 3 жыл бұрын

Thankyou Paul I love your Cart Page...really fresh looking

@AxialWorldwideOnline 2 жыл бұрын

Payment options show all methods active, but on final page it shows only pay pal.

@maurocarrera1134 4 жыл бұрын

Hey Paul! It's a shame that this is not available for Elementor. Looks very nice.

@durgeshtayade2511 4 жыл бұрын

True. They have blocks for product pages but should have given options for customizing the cart and checkout pages too!

@RVRSABLE 2 жыл бұрын

Will this work with elementor

@osmundogonzales3489 3 жыл бұрын

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]

@rufatibrahimov 2 жыл бұрын

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..

@AlessioPMusica 3 жыл бұрын

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?

@UnsungAces 2 жыл бұрын

is there a way to provide sign up fields?

@martinuteng1403 Жыл бұрын

Can you edit text on buttons from i.e place order to "send quote"? Basket totals to "Quote summary" or something similar?

@CutlassCraft 2 жыл бұрын

life saver :)

@SBSFamily 2 жыл бұрын

its not showing all the payment method options. Works with Stipe, Paypal and default woocommerce options.

@opentutoracademy 4 жыл бұрын

Nice video. I guess this has some issues while using elementor page builder. I had the same a month ago. is it fixed?

@itube0033 3 жыл бұрын

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?

@charnkiat 3 жыл бұрын

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?

@FreedomEikaiwa 3 жыл бұрын

Yes, I want to find out how to edit to a new language.

@charlieguillo7081 2 жыл бұрын

You can use the plugin "Loco translate" to easily translate almost everything that's displayed by a plugin

@bgfborges 4 жыл бұрын

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.

@WPTuts 4 жыл бұрын

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.

@_MiraclesWorld Жыл бұрын

how is the header saying checkout ?

@premforever316 3 жыл бұрын

Great tutorial. Can you please make a tutorial on Tutor LMS free version ?

@loudandklearfm 3 жыл бұрын

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

@jittuhajong4027 3 жыл бұрын

check out button on this plugin is not working it keeps loading an won't go to check out page.

@VickyLatorreArt 3 жыл бұрын

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.

@pellekarlsson152 4 жыл бұрын

Great video Paul! Look like shopify more cleaner and nicer look!

@ugaritstones4124 3 жыл бұрын

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?

@Sniper-bq9qo 3 жыл бұрын

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.

@JuanMarceloPompa 3 жыл бұрын

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!

@yukifujiwarab 3 жыл бұрын

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.

@WesleyNoijen 3 жыл бұрын

it doesn't work with the euro symbol. It displays € instead of €

@christosdaglis5987 3 жыл бұрын

Just noticed that WooCommerce Upsells don't show up in the cart page when WooCommerce Blocks is activated.

@sheloryl7717 3 жыл бұрын

the shipping cost can't be detected sir.. please help

@mariaeugeniasantos93 2 жыл бұрын

How do I add a step to Order Delivery Date? So costumers can choose when to get their order.

@BrantK147 3 жыл бұрын

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.

@jackcanales2965 3 жыл бұрын

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...

@adorodrums 2 жыл бұрын

not bad. just one issue I have: express checkout seems not to work, plus (or maybe because) paypal is gone... huh?

@adorodrums 2 жыл бұрын

ah, never mind, got it running. one plugin did not work, but the other would still.

@adorodrums 2 жыл бұрын

waiiit... i celebrated to early. payments are not going through. but i guess i messed up....

@tomm1677 4 жыл бұрын

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

@WPTuts 4 жыл бұрын

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. 😉

@kenkieofficial 3 жыл бұрын

Hi there is payment error after installing blocks please can you let me know about this issue?

@fash2314 3 жыл бұрын

So with this plugin, I can't see any Ship to different address field? How can i solve this problem. thanks

@PaulLadendorf Жыл бұрын

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.

@VidwatB 3 жыл бұрын

in this checkout page Razorpay, Payumoney payment getway option is not showing. only showing woo default payment option. how can we solve it

@WPTuts 3 жыл бұрын

You'd need to contact the developers to see about additional payment gateway support. 👍

@leandamian2928 2 жыл бұрын

How about where do I translate the texts?

@raunakgarg 3 жыл бұрын

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 ?

@ThePlanner5 4 жыл бұрын

Hi .. how to do virtual multiple digital products without shipping in woocommerce

@mariokeri1202 3 жыл бұрын

Is there a way to customise the colours/border?

@weerotv 3 жыл бұрын

If I use Divi It should works?

@wiltonyu4951 3 жыл бұрын

Is this compatible with divi theme?

@kosisochukwudon-adinuba141 3 жыл бұрын

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

@kosisochukwudon-adinuba141 3 жыл бұрын

and i use paypal and stripe, so I really don't understand the problem. please help me

@himanshuharplani3113 Жыл бұрын

It is not compatible with most payment gateways

@Mohitkumar-fl7cy 4 жыл бұрын

User redirection to login page during check out issue, also payment integration not working!!😉😉😉😉🙄🙄🙄🙄🙄Help

@vitalitysciences2788 3 жыл бұрын

my checkout page doesn't show up under pages? what gives?

@shahid110786 4 жыл бұрын

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...

@bySterling 4 жыл бұрын

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?$! 🙌🏻

@Sofia-iw3fs 3 жыл бұрын

Thanks for the video! How do I remove the Shipping Address section? I am selling a digital download product.

@marcusmuller1674 3 жыл бұрын

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 ?

@WPTuts 3 жыл бұрын

I believe you'd need to choose between Divi and Gutenberg for the specific page, but you could use both plugins on a site.

@groovytoursjamaica1321 Жыл бұрын

I need your help

@MsVincentC 3 жыл бұрын

Hi Can you share some good plugins for wpbakary woocomerce? - (I need to design checkout and thank you page). Thank you

@marianacuri9816 3 жыл бұрын

This plugin doesn't have compatibility with most of the payment methods

@groovytoursjamaica1321 Жыл бұрын

I need you help

@dariarainbow2777 2 жыл бұрын

Like 👍

@andrewmossop6547 2 ай бұрын

This plugin has been closed as of February 28, 2024

@groovytoursjamaica1321 Жыл бұрын

ASAP

@websiteheroes6767 4 жыл бұрын

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?