Give Your WooCommerce Checkout & Cart a new Design (for FREE + No Coding)

by George Lithoxoidis
0 comment 172 views

If you are a Store Owner using WooCommerce since you started, you may have felt that the default design of WooCommerce Cart and WooCommerce Checkout is not ideal for your store, or it might not follow the design of your website.

As a store owner, you might have left the default WooCommerce Shortcode for your website, or you have reached out to someone to make the CSS of your Cart and Checkout page in order to give it a retouch or get it to follow the rest of your design.

Personally, as a designer, I have felt many times that the Checkout and Cart page might be an issue, as each Hosting Provider works differently, so in some rare occasions when the traffic of the website was relatively high the hosting provider would limit my custom resources making giving the visitor a very bad experience on the website.

There are many solutions, as well when a problem comes up, you always find a way to fix it. But what if you don’t know how to fix something like this, what if you don’t have the nessasary CSS knowledge to customize your WooCommerce Cart and Woocommerce Checkout page?

The solution has been announced by WooCommerce, almost a year ago, along with WooCommerce 3.6.

WooCommerce Blocks

(click here to check out the Plugin)

WooCommerce Blocks is an alternative editor for your WooCommerce Store, you might already use a page builder like DIVI, Elementor, WPBakery or any other thing. But this is much simpler!

Using the original text editor for your WordPress Website (Gutenburg) you can customize your website’s Cart and Checkout page.

The good things about WooCommerce Blocks are that

  • It’s very simple to use.
  • It’s completely free.
  • And you don’t need to do any coding changes on the website to use it

Before your Begin

Let’s run a very quick checklist of what you need to do/have before you begin:

  • A WordPress Website (obviously),
  • WooCommerce Installed,
  • the Default Editor for WordPress,
  • Downloaded and Installed WooCommerce Blocks from your Plugins section

Using WooCommerce Blocks to edit your WooCommerce Cart

To start, navigate to your PAGES and edit your Woocommerce Cart page.

Edit the WooCommerce Cart page

Since you have WooCommerce Blocks installed on your website, you now have a brand new section of blocks to edit using the Gutenburg editor (default WordPress editor).
You have 2 methods of adding the brand new cart design for your website.

  1. Click on the + icon to add a new block and navigate to the WooCommerce Section to choose Cart
  2. Type in the text block the forward-slash to bring up the block options available and type in Cart

Either way, this will enable you to add the new cart on your WooCommerce Cart.

This will bring up the new design, which will then enable you to make further small changes to your WooCommerce Cart. Which in this new design you can make further CSS changes if you need to – but it’s a much better design than the default WooCommerce Shortcode.

This is now your brand new WooCommerce Cart Design simple as that.

image 4 | GL Web Designs Blog

Using WooCommerce Blocks to edit your WooCommerce Checkout

To start, navigate to your PAGES and edit your Woocommerce Checkout page.

Edit the WooCommerce Checkout page

As mentioned above, since you have WooCommerce Blocks installed on your website, you now have a brand new section of blocks to edit using the Gutenburg editor (default WordPress editor).
You have 2 methods of adding the brand new cart design for your website.

  1. Click on the + icon to add a new block and navigate to the WooCommerce Section to choose Checkout
  2. Type in the text block the forward-slash to bring up the block options available and type in Checkout

Either way, this will enable you to add the new cart on your WooCommerce Checkout.

This will bring up the new design, which will then enable you to make further small changes to your WooCommerce Checkout. Which in this new design you can make further CSS changes if you need to – but it’s a much better design than the default WooCommerce Shortcode.

This is now your brand new WooCommerce Checkout Design simple as that.

2020 05 29 15 29 hardlandtheband.com | GL Web Designs Blog

This very nice plugin will enable you to give a brand new design for your WooCommerce Website, it’s super easy to use as well set up. Along with that, you are able to use it in different sections (Apart from your Cart and Checkout) to give your website a new feel.

Give it a try and let us know below of what you think – let’s start start a conversation!

Did you find it hard to follow this tutorial? Check out this quick tutorial by WpCrafter.com

We have already this tool in use and we can say that we liked it a lot.

One of our clients called “Hardland” decided to ask us for their Web Design to have a custom website for their band. Making them a fully custom website using WordPress and WooCommerce.

image 6 | GL Web Designs Blog

Click here to see the website

Leave a Comment

Subscribe to Our Newsletters

Get the news first! Subscribe for our newsletters and get the news on your email weekly! Be first and win more!

Thank you! You are now a subscriber!

%d bloggers like this: