You'll learn how to optimize and customize your woocommerce checkout & cart page. Do you want to setup your woocommerce cart and checkout with an upgraded layout design? This will definetly help. You'll also learn to add custom built headers and footers built in Elementor to your cart and checkout. We do this using only free themes and plugins.
You'll find all the CSS we added to this store on our blog here:
https://ideaspot.com.au/blog/woocommerce-customize-cart-and-checkout/
We did this to change the description text size and make it a little larger. Plus we changed to button on the cart page to match the rest of our theme. You'll need to change to button background color HTML to match your own preference. You can also change the hover color of the button with this CSS too.
For this tutorial we are using the Astra theme with an Astra starter template. By adding the ‘Woocommerce Blocks' plugin, we can upgrade our cart and checkout to a newer version. Then using the Astra header and footer block editor, we can futher customize our cart and checkout pages using Elementor (the free version).
Tips:
1) Adding the cart block @3:37 looks a bit different now in the latest version of WordPress:
https://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
2) This plugin doesn't work with all payment gateways, I'd recommend using ‘stripe credit card' with the stripe plugin: https://wordpress.org/plugins/woocommerce-gateway-stripe/ and/or using the standard paypal gateway that comes with WooCommerce.
More details are here:
https://wordpress.org/support/topic/payment-options-missing/
and
https://docs.woocommerce.com/document/cart-checkout-blocks-support-status/
——————————-
source
Thanks for this tutorial, it works fantastic!
Hey, I have a problem. I have quantity next to the photo, under colour option. I want it to be in separate column, just like in the video. How can I solve it? Thank You
hey bro, amazing video, good job.I really appreciate your ability.Our company is a professional supplier in the Print on Demand industry, owning two factories in the US and China, may I know whether there are any chances to cooperate with you?
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
Is it just me? Or does it require an expensive plugin instead of a cart block, that is mentioned in the beginning?
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…
"Also.. heres some smooth Jazz"
thanks allot for this video it helped allot
great tutorial! question though, is there a way i can change "Billing address" to "Shipping address" in the final layout?
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
Thank you so much!
Hi, I can not find the Cart from WooCommerce to add the block. I just dont have Cart and Checkout. What can I do ?
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?
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?
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 ?
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?
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!
Thanks for the great video. Great stuff! I, unfortunately, ran into a problem with the quantity field not displaying. It is blank, but if I + or – quantity, the price goes up and down. I can also remove the product. The page looks pretty good but is unusable if it does not show the customer the quantity. Any recommendations on how to fix? I didn't see anyone else having this issue, soooo…. =) Also, of note, when I try to highlight the "number area" in the quantity field, it does not highlight anything. So, I don't think the number is just white in color. Here is a sample of the issue https://ibb.co/mc0qT8W Thank you Thank you.
Doesn't work with other payment options in other countries other than USA? We use payfast here in SA
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?
Amazing tutorial, I was loosing hope to ever have good looking cart and checkout, messed with tons of CSS. Thank you.
Great video
When I bring the width of my margin in, it makes my logo smaller. How can you bring it in without this happening?
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.
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?
PLEASE IS THERE AN IDEA OF HOW I CAN GET MY DELETED SHORTCODE BACK FOR CHECKOUT PAGE, IT DOES'NT SUPPORT MY PAYMENT GATEWAY AND I'VE DELETED ALREADY
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)