Woocommerce Checkout & Cart Page Customization Tutorial (Elementor Free Version)

[@talons2112]

Awesome video. I’m going to employ this myself. What I want to do is when a service is selected it goes to cart. On cart an option appears, checkbox or radio, to select a subscription. Anyone know what to do?

[@peterpaine7956]

This looks great but the cart is not there? Have they taken it off?

[@simplyselling]

I haven't added Woocommerce to my website yet but plan to in the near future. Is there a way to add product suggestions at the checkout page to help increase the chances for the customers buying more?

[@IdeaSpot]

A few extra tips: 1) Adding the cart block @3:37 looks a bit different now in the latest version of WordPress: snipboard.io/xMO1UK.jpg After clicking the '+' to add a block, you can either search 'cart' or 'browse all' and find the cart block near the bottom of the left menu. Also the gear icon in the top left of screen will show your block settings if its not already showing. 2) This plugin doesn't work with all payment gateways, I'd recommend using 'stripe credit card' with the stripe plugin: wordpress.org/plugins/woocommerce-gateway-stripe/ and/or using the standard paypal gateway that comes with WooCommerce. More details are here: wordpress.org/support/topic/payment-options-missing/ and docs.woocommerce.com/document/cart-checkout-blocks-support-status/

[@madebygi7210]

Hey, I hope you are having a nice day, I 've elementor Pro but I don't have de header footer option in my appearance section

[@osamazahid7221]

theres no cart option for me in commerce section what to do?

[@andrejchalas6799]

@@osamazahid7221 Same, anyone please?

[@Fazal285]

@@andrejchalas6799 same! need help

[@WhiteKeys007]

Yo! The way you whispered at the beginning there fam... I thought you were about to tell us something illegal. Great video overall though!

[@IdeaSpot]

lol i gotta make sure not to wake up everyone when I do these at night :D

[@rainamonét]

Lol😭

[@KyouKo-x7g]

I felt scared of that , too.

[@ebimeneakeme4163]

😂😂😂

[@rodlivz]

🤣🤣🤣🤣🤣 I thought I was the only one who noticed! I was like '...Yo fam, this is going to be intense, I think he's just discovered aliens in his back yard...' 😀😀 good content though... Underated comment 😅

[@patricius1509]

how can I make thing from 3:22 when i only have "edit in elementor" and all I can is go to edit it at elementor page. (I do not see any shortcut)

[@nitupaul3377]

Exactly. Same thing is happening with me

[@patricius1509]

@@nitupaul3377 I added new page and it start works

[@volkAn783]

Great video! Are we also able to customize our shopping basket (the basket pop-up in the header)? Yours looks fine but my theme makes it look very ugly and I would like to change it. Thanks in advance!

[@NistkastenLivestream]

There is no checkout in my list :( I use it at germany but i didnt find this module...

[@_IsThisThingOn]

Great video, the cart and checkout look heaps better using Woocommerce Blocks. I do have a question, surely I'm not the only one with this though. When I use the blocks for cart and checkout, Woocommerce has an error for cart and checkout pages about page not containing the shortcode. Now the actual cart and checkout process works, but Woocommerce doesn't get triggered to send notification emails unless the old cart and checkout are used. Any suggestions?

[@ryanjohnquest5664]

Notification emails meaning order confirmation (receipt)?? That's crucial. Has this issue been sorted out in the 10 months since you commented?

[@davidjong8477]

hi, great video, i tried copy and paste the hover button css, it doesn't work, do i need to edit the css in any way?

[@Hallointhehouse]

Great video! Is the cart translatable?

[@markus8658-s2d]

Hi Alex and all the best wishes for the new year 2024 ! I have the better looking checkout page with the product x plugin, but I not foun dout how to add an required asteriks to the order comment checkbox. Do you know how I can do it? 👍👍

[@reishin4346]

WooCommerce Blocks does not show up in the Add Plugins search now?..

[@mboe94]

Thank you very much for the video. I can however not see an empty cart button on my page? Did it get updated to somehow require an extension or something? Also, for those that cannot find the product grid, it's because you have to enable it within elementor extensions.

[@mboe94]

Nevermind, just have to press the lines on the top to get a sidescreen and then you can choose empty cart :)

[@webotentiel]

Hi, thanks for your video! Is it possible to create several custom order forms with WooCommerce because I see that the extension only allows to create one?

[@ensiyeh13]

Hi, That is excellent. Where Should I put the CSS to change the button colour and the font type?

[@juanmajr10]

Hi! hope you´re doing fine, how do i put de cart icon on the menu?

[@mcskiato1]

Thank you very much... Straight to the point.... Woocommerce blocks makes the difference.... You help me a lot... Can i ask your opinion about the Best paid plugin to change the woocommerce as a whole piece???

[@olivermoor8584]

This doesn't seem to work on Safari (version 9.1.2). I don't know if anyone knows how I could resolve this? It's also probably worth checking on your own website with this since you don't want to be excluding users.

[@olivermoor8584]

The cart doesn't load when on Safari. It works fine on Chrome though. But Safari it perpetually loads

[@IdeaSpot]

Not sure, I haven't experienced that myself - best to post full details to the support: wordpress.org/support/plugin/woo-gutenberg-products-block/

[@shawnalum9304]

Can a header still be created for the car and check out pages through the elementor theme builder for global?

[@gobrad]

Hi, I seen a video you did a while back on how to change the colour header of the woocommerce receipt?... The typical woocommerce colour, also is it possible to change the test "ORDER NEMBER" to something else? many thanks

[@MaxiZee]

how can I remove the icons on the full cart tab within the block right underneath: Proceed to Checkout button? on mine its showing visa, mastercard and american express icon. but on yours it isnt even showing. would appreciate your help bro!

[@MaxiZee]

my paypal payment option also not displaying on checkout page anymore even though its checked in WOC settings

[@IdeaSpot]

Hi, I'm not sure 100% but it sounds like a paypal checkout plugin setting... maybe turn off 'enable paypal checkout on the cart page' like I did in this video > kzbin.info/www/bejne/Z3XQi2aZgMelfc0 I have more details on paypal setup here which could help too They also have a support forum here for more details: wordpress.org/support/plugin/woocommerce-gateway-paypal-express-checkout/

[@orchid.violin]

Hello thanks for this video, I just liked and subscribed! I wanted to ask if I don't have the astra theme how can I disable the title and footer bar to keep users focused on checkout?

[@timelessmemories5150]

Hi there can I add woocommerce it to the free Astra

[@despinazogkou]

Thank you for this video! I really need some help though. I'm using Wave evaluation tool for WCAG errors. Now it gives me an error of an "empty button" and the "empty button" is the woo commerce cart button. I've searched everywhere for the past 3 days to fix but no luck. I'm new to building websites so if someone can help me it would be great. Thanks

[@HANGINONTV]

how are you able to put in little cart icon on the header? this is not recommendable for beginners it is confusing

[@kristinabosjanoks1996]

Why does it not have the estimated delivery date? How do you do this? I have been searching for answers for days..

[@chrisbeachley7367]

Hi Thanks for the video. Is there anyway to make to look good for mobile view?

[@IdeaSpot]

Hi, I found the default mobile in astra and kadence looks pretty good, here is the default view in kadence theme for example > snipboard.io/2qXMT0.jpg They do discuss editing the layout on the dev forum here: wordpress.org/support/topic/2-columns-in-shop-page-on-mobile/ but it's developer level work

[@abdullahiaddow7151]

Amazing Video! Thanks you very much your css helped alot by changing the button background, but i just wondering if you could how to change the cart & checkout hover color, through css?

[@IdeaSpot]

Good question - you can. I just updated the description with an example CSS on how to do this. thanks for watching - Alex

[@bradford-vts]

another great video. how do i send someone a automated receipt after purchase with a link to a web page and password? also any ideas of how to generate different passwords for different subscribers?

[@SoNiiX54]

Hi, I can not find the Cart from WooCommerce to add the block. I just dont have Cart and Checkout. What can I do ?

[@stephyb8620]

also having this same issue!

[@gympack4you927]

this way is not possible to put extern link , afiliate link product dont work.. because when you click the buton the buton leaves to cart and not to the extern link

[@iliasspirou5223]

Does anyone else have the issue with the credit card logos on the cart page? Under the "Proceed to Checkout" button there are the icons of visa, amex and mc. But this arent all of my payment options, so i wanted to get rid of them. But it seems impossible. Any ideas?

[@MortyRides]

All I want to do at the moment is to translate the buttons in a different language, how can i do that?

[@SebastianPerezG]

There is not cart block in guttemberg , this is related to the Theme ?

[@IdeaSpot]

hi, you'll need the plugin 'woocommerce blocks' installed and active to get the blocks

[@NatashaMillerCreates]

Great video! Fantastic help! I had one question though. I created my cart header not a problem, but it still has the plain "CART" beneath my header. I'm not sure how to get rid of this. Do you mind addressing the issue or pointing me in the right direction? Thank you so much!

[@emrekaplan742]

can you show us the mobile responsive way ?

[@andressadaborrego8908]

Hi Alex, great video. In woocommerce, I have activated the option, "pay with cash on delivery". It works on the default woocommerce checkout page. However, when I use this new checkout page, that payment option doesnt appear. Do you know how can I fix that? Thank you!

[@IdeaSpot]

Hi, i haven't seen that one before, probably best to check with the devs here: wordpress.org/support/plugin/woo-gutenberg-products-block/

[@andressadaborrego8908]

@@IdeaSpot I will check it out. Thanks!

[@juan93Hdz]

Hi Andrés, nice to meet you, i have the same problem. ¿How do you solve it?

[@CandyCrafty]

@@IdeaSpot same issue here but with a third party payment gateway :(

[@IdeaSpot]

I've only tried this using Paypal & Stripe so not sure myself, check with support here: wordpress.org/support/plugin/woo-gutenberg-products-block/

[@MisterX-77]

How to edit the fields? I ve been all on the net. e.g. i want to edit the name of the state and by default it does not change with a translating plug in. I understand this is still under development to work properly.

[@mrshane963]

Change this in woocommerce settings in the dashboard

[@TheGr8name]

Hi Alex! Thanks so much for a great tutorial! Quick question, how do you add a notes section to the checkout area in case anyone has any comments or questions specific to the order?

[@KeepMyselfHumble]

how to add the mini cart ?

[@davidscheveloff1139]

Looks great but for some reason it didn´t show my payment methods already integrated in my Woocommerce settings. It only shows "Paypal" which we don´t use in Argentina. I need it to show "Mercado Pago payments for Woocommerce". Any Idea?

[@sharifahmed9286]

I have created a checkout page for my clients with the wooCommerce block. but I can't add the building information phone number field on the checkout page. Please... tell me the solution

[@lightairthailandcleanairte7866]

Truly awesome video but I have a problem My payment options are not showing up?

[@IdeaSpot]

Hi, I have tried this with Stripe and Paypal and it's been ok - best to post all your details in the WooCommerce support forums here: wordpress.org/support/plugin/woocommerce/

[@chi_bot8648]

Why don't I have the 'Theme editor' Under appearance section in Wordpress?

[@prateekbhardwaj9943]

how to change checkout button text?

[@jelayawilliamson9053]

This tutorial has helped me so much. I just have one problem now and that is that my proceed to checkout button is not working

[@andrejchalas6799]

Hi, I got it working, but cart layout is different now than you are showing here. Its high instead of wide. Any hint how to change the layout please?

[@WhiteKeys007]

Btw I don't have a "cart" block option. Help! :(

[@IdeaSpot]

make sure 'woocommerce blocks' plugin is installed and active, then the blocks should be in your editor after that

[@billmusket2301]

Why is "your Cart is Currently Empty" text in Black letters and mine is in blue and I do't know how to change it to black?

[@FlyOnWall2]

I have been looking to update my cart and check out pages. This video is great!

[@IdeaSpot]

Glad it was helpful!

[@selenefroehlich9138]

hi, I have a problem displaying the symbol for currency in the cart, Euro is displayed as: &euro, instead of: €, how can I solve this problem?

[@oluwaseyiademola-oyerokun]

My quantity is at the bottom and not on a column like yours, is there a way I can change that? I also do not have the second option for shipping rates calculation, can you help?

[@user-om2bp8tp2v]

Same here

[@ibcwhite]

Great video! I had one problem with my checkout page though. With the change to the new checkout block, I get "You must be logged in to Checkout. Click here to log in." I have WooCommerce set up to allow users to create account on checkout/log in at checkout. Any ideas?? Thanks

[@IdeaSpot]

Hi, try enabling guest checkout (tick the box): woocommerce.com/wp-content/uploads/2015/12/WooCommerce-Checkout-Checkout-Options.png

[@saulodegrandi6139]

My man, this tutorial is sick good! Anybody knows what are the codes to change the ORDER SUMMARY and COUPON CODE? background I got them red i wanted them plain white no background on that...

[@teddyhndrx]

I don't get the cart extra features from woocommerce blocks

[@IdeaSpot]

Adding the cart block @3:37 looks a bit different now in the latest version of WordPress: snipboard.io/xMO1UK.jpg After clicking the '+' to add a block, you can either search 'cart' or 'browse all' and find the cart block near the bottom of the left menu. Also the gear icon in the top left of screen will show your block settings if its not already showing. Refer to the yellow highlights on the snipboard image I posted above - good luck, Alex

[@aovup]

Great tutorial :) Woolentor is a great addition to Elementor

[@novadocs4715]

Amazing tutorial, I was loosing hope to ever have good looking cart and checkout, messed with tons of CSS. Thank you.

[@dennylane9603]

Outstanding Video, you're gifted in our ability at teaching others. Issue, my custom fields are not transferring from my old checkout to the new one. I am using WooCommerce Checkout Field Editor by WooCommerce, Bummer had to go back to the old checkout

[@IdeaSpot]

thats a shame :( 'WooCommerce blocks' have features that are still in development and will have some compatibility issues compared to the core WooCommerce plugin unfortunately...

[@ekaterinalealfurmanova1728]

Hi Alex! I have followed the steps in this tutorial and my cart is looking great! The thing is that now my client wants to include a box for the VAT number to be entered, and even though I have installed several plugins for that, it does not appear in the checkout or in the cart. It seems to me that it may be because I have changed the layout. Do you recommend any solution to add it? And if not, can you tell me how to reverse this whole process? Pleeeeaase help!!

[@ryanjohnquest5664]

I'm getting a compatibility warning when I replace the cart/checkout shortcode with the blocks as described. Wordpress is officially saying it's not a 100% replacement for the shortcode yet. I have a file uploader that appears broken the same way.

[@ryanjohnquest5664]

perhaps the VAT box can appear in the account profile page, but 9 months ago, I bet you got it sorted lol

[@discoverellenville9239]

3:51 My cart widget is not showing up in wordpress editor, I'm using the Hello Elementor Theme + Elementor Pro. Any suggestions? So close and yet so far :)

[@IdeaSpot]

Thats interesting - you have the woocommerce blocks plugin installed an active right? thats where the feature comes from. If it's a bug, better ask them there to check: wordpress.org/support/plugin/woo-gutenberg-products-block/

[@thejaswaroop9134]

If you got the issue resolved, kindly let me know the solution

[@thejaswaroop9134]

@@IdeaSpot 3:51 Same issue. I couldn't find Cart widget in the woocommerce blocks

[@thejaswaroop9134]

Hi, Check if you have installed woo-commerce blocks..

[@hubertwtk]

It won't show up - Woocommerce Blocks is Gutenberg and not Elementor plugin. You have to add blocks from page editor and not in Elementor editor

[@sukriti814]

Hey... Your videos are very helpful. I almost completed my website.. I seem to have an issue with the format of add to cart in my account. I would be greatfull if you could help me.

[@tidegem7305]

Thanks for the video. The cart option is not there. Any other way to get a different than WC standard?

[@tidegem7305]

not there also the checkout function

[@IdeaSpot]

hi, it's still there but in the new version of WP after adding a block > browse all > check the left part of the screen

[@tidegem7305]

@@IdeaSpot i see the "woocommerce" section in the block but there is no "cart" nor "checkout".

[@tidegem7305]

i have followed your instructions but when you find the cart, i see no cart in there

[@IdeaSpot]

@@tidegem7305 thats strange, do you have the 'woocommerce blocks' plugin installed and active? If it's still not working better check with the developers here: wordpress.org/support/plugin/woo-gutenberg-products-block/

[@Fazal285]

cannot find the cart in the section. anyone else having the same issue? please help!

[@kwesistores1113]

hello. the cart block is not available at my back end what could be causing this?

[@IdeaSpot]

Hi, check you have the woocommerce blocks plugin installed and active - thats where the feature comes from. If it's a bug, better ask them there to check: wordpress.org/support/plugin/woo-gutenberg-products-block/

[@kwesistores1113]

@@IdeaSpot Okey we will check with Word press

[@Hackaman]

Amazing video !! This has really helped me transform my customer experience. Thank you !!!

[@IdeaSpot]

Glad it helped!

[@afinedayathome9568]

great tutorial! question though, is there a way i can change "Billing address" to "Shipping address" in the final layout?

[@saramatuszewska4445]

Thank you very much for this tutorial is very helpful

[@IdeaSpot]

Glad it was helpful!

[@jemimahantwi3985]

Hi which theme are you using because i don't get the option for a starter template on mine?

[@IdeaSpot]

Hi, search for 'starter templates' plugin by brainstorm force, this will add the option under your 'appearance' menu in the dashboard

[@samilong4508]

Great tutorial! Thanks!

[@etienlemut1777]

Can Elementor free or WooLentor have power to censor your content that you publish on your website? Is using these plugins subject to them having power to than restrict, modify or delete your content?

[@boluosho2548]

Thank you for uploading this video. I have a question, is there a way to hide quantity stock level? maybe through css?

[@ciriman]

i'm going crazy! how do you add the widget "cart" at 3:37 ? in my woocommerce there isn't :-(

[@IdeaSpot]

Hi, Adding the cart block @3:37 looks a bit different now in the latest version of WordPress: snipboard.io/xMO1UK.jpg After clicking the '+' to add a block, you can either search 'cart' or 'browse all' and find the cart block near the bottom of the left menu. Also the gear icon in the top left of screen will show your block settings if its not already showing. Refer to the yellow highlights on the snipboard image I posted above

[@ciriman]

@@IdeaSpot I give up. I find nothing. it's impossible. you have installed some external plugin. there is no "cart" widget

[@designhub360customapparel]

My cart icon is missing

[@cathnco]

Thank you for this video! I have followed along step-by-step and run into a hiccup... I do not see the Edit: Full Cart/Empty Cart option as shown so I cannot edit the Empty Cart as you demonstrate. Nor can I find the shipping options etc in the right hand menu. Can you point me in the right direction?

[@IdeaSpot]

Hi, best to report any technical issue into the support forum here: wordpress.org/support/plugin/woo-gutenberg-products-block/ the plugin is still in developmental stages and needs further work before all these functions are fully perfected in woocommerce. thanks for watching, Alex

[@mq8716]

I have my products as product bundle in woocommerce, i want to list them as a single product in the cart, anyone knows how to?

[@MrManav05]

Wonderful Video Alex. ! I want to add CCavenue payment gateway to my website which I have created using kadence and Gutenberg editor(following your video" website with kadence starter templates) can I design cart and checkout pages like this on my website. please help

[@IdeaSpot]

I think this method will only work with PayPal and Stripe sorry

I have Woocommerce Blocks and elementor pro on hello theme but don't have this options.. is that something connected to the Astra theme or the other Astra header and footer block editor ?

[@IdeaSpot]

Hi it's not related to Astra at all, I think there are still a few bugs in WooCommerce blocks though - best to post the details here: wordpress.org/support/plugin/woo-gutenberg-products-block/ and check good luck - Alex

@@IdeaSpot ok thanks then will check that, cause we for sure dont have any.of those options for cart and checkout

@@IdeaSpot well it is weird we don't have any settings options or anything and have full elementor pro, with this woocom block and more! still nada!

Ok so i figured it out, you have to switch of the classic editor to get the Gutenberg one! then you get more options, close to this! but still i can get rid of the padding/margins, so it gets more split like this one you show

[@jaspernijkamp2725]

Thanks for this tutorial, it works fantastic!

[@IdeaSpot]

Great to hear!

[@Ruberdj]

great the style and the information

[@meeyoub1348]

So great , did a good job, Thank you . I just liked and subscribed! By the way, I did as you say,but my back to shop button display When the shopping cart is not empty，I do not know why?

[@dflowisyours7562]

This was super helpful and exactly what I was looking for. Thank you!

[@vandeo3244]

Helo bos, how to change link return to shop back to home page ? and how to change the words "return to shop" at empty cart page

[@IdeaSpot]

Hi it would need some code snippets: stackoverflow.com/questions/43942806/woocommerce-how-to-change-the-return-to-shop-button-text nicolamustone.blog/2015/07/20/change-the-return-to-shop-button-url-in-the-cart-page/ good luck, Alex

[@Dzsabbashu]

Hey! Im having an issue, where my woocommerce block list inside the page editor olny goes until the "products by tag" block, and i dont have the cart one. Do you know, by any chance, why that would be the case? Thanks in advance.

[@IdeaSpot]

Hi, i didn't see that issue so I'm not sure - perhaps ask in the support forum wordpress.org/support/plugin/woo-gutenberg-products-block/

[@claimgadget9186]

Thanks so much for this tutorial really helpful! Although, I would like to know if there is more extra css to edit the Total Colors and so on ?

[@Etrendtreaures]

Does this plugin works if I use SQUARE for payment method?

[@IdeaSpot]

Yes it should be fine

[@Ainessing]

It seems that there no more cart option to add on the page any longer. Am I right?

[@IdeaSpot]

Adding the cart block @3:37 looks a bit different now in the latest version of WordPress: snipboard.io/xMO1UK.jpg After clicking the '+' to add a block, you can either search 'cart' or 'browse all' and find the cart block near the bottom of the left menu. Also the gear icon in the top left of screen will show your block settings if its not already showing. Refer to the yellow highlights on the snipboard image I posted above - good luck, Alex

[@jeangabrielgaritamata872]

Great video man! Very useful!

[@IdeaSpot]

Glad it was helpful!

[@vandeo3244]

hello, how to delete field zip postal code at calculate shipping in CartPage. so there just Country, and city.

[@vandeo3244]

im use astra

[@IdeaSpot]

Hi, there are a few methods available here: wordpress.org/support/topic/how-to-hide-zip-code-field/

[@vandeo3244]

@@IdeaSpot Thank you very much

[@Joyal.George]

*Great Tutorial Brother* ❤️

[@IdeaSpot]

Thanks and welcome :D

[@popmuzik7136]

Why are you doing this in Wordpress Blocks rather than in Elementor ?

[@IdeaSpot]

Hi, It's for the Elementor free version which doesn't have WooCommerce features, so we use this method as a free alternative. thanks for watching & good luck!

[@ghezana]

Very helpful tutorial! Thank you.

[@OrangePenguinEducation]

Great video, thanks alot!!

[@vkirankumarreddy4181]

Is there anyway where I can add checkbox for I accept the terms and conditions which is available in by default version of woocommerce

[@IdeaSpot]

Hi it's not in this version yet but expect it in an update. It's discussed here: wordpress.org/support/topic/checkbox-to-confirm-terms-and-conditions/

[@josecalcagni8472]

😃🙂 Dear Alex, do you know any other option to this one to customize Checkout & Cart Pages, maybe using Elementor Pro ???

[@Nobel0]

THanks, btw you cannot use ANY payment gateway with this woo checkout block... good luck

[@IdeaSpot]

Thanks for the feedback, cheers Alex

[@Autruo]

please how can i remove my default theme color ,because the color is appearing on every created page.....

[@IdeaSpot]

Hi, it should be in your theme customizer (appearance > customize)

[@kevinfontecilla5972]

Thanks for the video, very helpful! One question, on my checkout page, the background of the "Order Summary" and "Coupon Code" on the right is blue (my main color theme), I have been trying to change it modifying the colors on the global settings with no success, any idea where can I change it? Thank again.

[@IdeaSpot]

Hi you will probably need to do that with CSS, here are some guides if you haven't tried this before: www.wpbeginner.com/wp-tutorials/basics-of-inspect-element-with-your-wordpress-site/ www.webhuntinfotech.com/customize-themes-using-inspect-element/

[@kevinfontecilla5972]

@@IdeaSpot I will check them out, thank you!

[@arranjames5840]

Hi! Do you need Astra Pro to assign custom headers to pages? I have assigned custom headers to my store pages and it only displays the primary header.

[@IdeaSpot]

Hi, no, I am using all free versions!

[@tellyourstoryproduction257]

hi, thanks a lot Alex for another great tutorial. I was able to implement everything apart from using the astra block header and footer. I am already using Kadence theme with an installed header, do you think that's the reason? I figured a way around by using the woo blocks to add header name & spacer below my logo - Thx+++