Play Video

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:

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

1) Adding the cart block @3:37 looks a bit different now in the latest version of WordPress:

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: and/or using the standard paypal gateway that comes with WooCommerce.

More details are here: