virusword.com

Learn Wordpress

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

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



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

Reader Interactions

Comments

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

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

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

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

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

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

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

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

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

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

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

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

Explore more

Get our Wordpress Guide Get Plugins Get Connected