WooCommerce Checkout Page Customization with Free plugin

Подписаться 169 тыс.

Просмотров 95 тыс.

50% 1

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

Хобби

Опубликовано:

30 июл 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 117

@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]

@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

@kevinrichter9397 3 года назад

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

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

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

@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

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

@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. 👍🏾

@rickderico356 3 года назад

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

@RoshanZ 2 года назад

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?

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

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

@fash2314 3 года назад

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

@opentutoracademy 3 года назад

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

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

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

@devyTricks 2 года назад

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

@VickyLatorreArt 2 года назад

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.

@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

@martinuteng1403 Год назад

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

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

@SingaporeMathsAcademyUK Год назад

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

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

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

@christosdaglis5987 3 года назад

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

@kenkieofficial 3 года назад

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

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

@petersvardsmyr 3 года назад

GREAT video! This helped me so much.

@ThePlanner5 3 года назад

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

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

@tshine672 3 года назад

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!

@vendercentraldirectorylist5704 3 года назад

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 3 года назад

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 3 года назад

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

@greenkerala7756 3 года назад

how to make mail as optional on checkout page ?

@mariokeri1202 3 года назад

Is there a way to customise the colours/border?

@MsVincentC 3 года назад

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

@Mohitkumar-fl7cy 3 года назад

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

@jittuhajong4027 3 года назад

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

@elementearth1104 3 года назад

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

@kidstanushow8429 3 года назад

I can do this

@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

@AxialWorldwideOnline 2 года назад

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

@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!

@weerotv 3 года назад

If I use Divi It should works?

@mariaeugeniasantos93 2 года назад

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

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

@markuspatzer8658 6 месяцев назад

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

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

@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

@UnsungAces 2 года назад

is there a way to provide sign up fields?

@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

@SBSFamily 2 года назад

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

@sheloryl7717 3 года назад

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

@premforever316 3 года назад

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

@madbitcrypto 2 года назад

Will this work with elementor

@wiltonyu4951 3 года назад

Is this compatible with divi theme?

@_MiraclesWorld Год назад

how is the header saying checkout ?

@vitalitysciences2788 3 года назад

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

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

@shajar4750 2 года назад

impressive. jazaka'Allah

@bgfborges 3 года назад

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 3 года назад

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.

@bySterling 3 года назад

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

@realizaresiteuri2417 3 года назад

Thousands of thanks !!!

@Sofia-iw3fs 3 года назад

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

@mamadidoukoure1069 Год назад

Thanks so much this video was useful for me

@WesleyNoijen 3 года назад

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

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

@ryann7741 3 года назад

Thank you..

@VidwatB 2 года назад

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

@WPTuts 2 года назад

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

@CuddlyFellows Год назад

Very helpful video.. thankyou so much

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

@Lumeone 2 года назад

Thank you! :-)

@leandamian2928 2 года назад

How about where do I translate the texts?

@CutlassCraft 2 года назад

life saver :)

@ashrafbinafsar3837 2 года назад

Thanks

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

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

@zannakristal3754 3 года назад

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

@groovytoursjamaica1321 Год назад

I need your help

@shahid110786 3 года назад

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

@himanshuharplani3113 Год назад

It is not compatible with most payment gateways

@tomm1677 3 года назад

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 3 года назад

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

@maurocarrera1134 3 года назад

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

@durgeshtayade2511 3 года назад

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

@groovytoursjamaica1321 Год назад

I need you help

@marianacuri9816 3 года назад

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

@dariarainbow2777 2 года назад

Like 👍

@pellekarlsson152 3 года назад

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

@groovytoursjamaica1321 Год назад

ASAP

@websiteheroes6767 3 года назад

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?