How to Edit WooCommerce Cart Page using ProductX - WPXPO

How to Edit WooCommerce Cart Page using ProductX

  • By: Omith Hasan
  • Updated:
How to Edit WooCommerce Cart Page

WooCommerce automatically creates Cart and all other essential pages. So what if you want to edit? Or, want to create and customize the WooCommerce cart page from scratch?

If you are using WooCommerce for some time you may already know that WooCommerce doesn’t offer many customization options. You may change the WooCommerce page designs by changing your theme. However, you still can’t get the full editing options. So that to do? How to Edit WooCommerce Cart Page?

If you want to edit WooCommercrce Cart Page, follow the below steps:

  • Step-1. Install ProductX WooCommerce Blocks Plugin
  • Step-2. Turn on WooCommerce Builder Addon
  • Step-3. Create a New WooCommerce Cart Template
  • Step-4. Customize WooCommerce Cart Page
  • Step-5. Edit WooCommerce Cart Page

What is WooCommerce Cart Page?

WooCommerce Cart page, also known as the shopping cart is the page where all the desired products of shoppers are displayed on a cart table with prices and quantity. From this page, the shoppers remove products, increase or decrease the quantity and purchase the product by going to the checkout page.

How to Edit WooCommerce Cart Page

Now that, you know what is cart page and why we should edit it. Now, it’s time to explain how to edit the WooCommerce cart page. For that, we are going to create a custom WooCommerce cart page template using the WooCommerce builder addon of the ProductX plugin.

It sounds difficult and confusing? Actually, it’s not if you follow the below steps properly. So without further a do let’s get started.

Step-1. Install ProductX WooCommerce Blocks Plugin

As I have already mentioned, we are going to use the WooCommerce Builder addon for ProudctX to edit the default cart page of WooCommerce. First of all, we have to install the ProductX plugin. For that:

Install ProductX
Install ProductX
  • Go to the Plugin section from your WordPress Dashboard.
  • Type the plugin name “ProductX” on the Search Bar.
  • Install and Activate the ProductX plugin.

Step -2. Turn on WooCommerce Builder Addon

WooCommerce Builder is an addon for ProductX. It helps to create templates for custom shop pages, archives, carts, and single product pages. To start using the template we have to turn it on. For that:

Enable WooCommerce Builder Addon
Turn on WooCommerce Builder Addon
  • Go to the ProductX section
  • Click on “Addons” to go to the All Addons section
  • From the All Addons list turn on Builder Addon

Step-3. Create a New WooCommerce Cart Template

After turning on the builder addon we can start building custom woocommerce templates. For instance, we will be creating a WooCommerce cart template. For that:

Create a New WooCommerce Cart Template
Create a New WooCommerce Cart Template
  • Go to the Builder section from ProductX.
  • Click on Add New.
  • Add the Template Name.
  • Select Cart from the Template type tab.
  • Click on save and start editing the template.

That’s all, the new WooCommerce cart template is ready. However, if you go to the cart page it will be empty. Because we didn’t add anything to the template. We have to add the elements and customize them according to our needs.

Step-4. Customize WooCommerce Cart Page

Now that, you have created the custom cart page template, it’s time to customize it. The ProductX cart page builder comes with three new WooCommerce blocks with customization options. By which we can customize our WooCommerce cart page according to our needs. So let’s start adding the blocks to the cart template.

drag and drop cart builder

Add the Free shipping Progress bar

ProductX also offers a progress bar block along with all other blocks. But what is this progress bar represents?

You probably know that WooCommerce allows us to add a free shipping option depending on a minimum order amount. So that, the shoppers can enjoy free shipping by fulfilling the criteria.

With this feature, you can attract the shoppers to add more products to carts resulting increase in the average order value.

However, WooCommerce doesn’t let us display the minimum order amount for free shipping. But want to display it right? Don’t worry ProductX got your back. You can just add the Free Shipping Progress Bar addon to highlight it and encourage users to purchase the product.

So, decide where you want to add the block and click on the plus icon. Then select the progress bar block and it will be added to your desired position. For instance, I am adding it to the top of the cart page. But as I said you can add it to any position on the cart page.

Free Shipping Progress Bar
Free Shipping Progress Bar

Add Cart Table

First of all, we have to add the cart table. For that, ProductX offers a cart table block. To add this block:

  • While editing the cart template click on the plus icon
  • Scroll down and click on the cart table of block
Cart Table
Cart Table

After clicking on the block it will be automatically added with some dummy content. Don’t worry the content will be replaced with the exact product information after adding products to the cart. You will have all the essential buttons that are required for an idle cart page. And, of course, you can also edit all the elements according to your need. We will get into that in a bi. For now, let’s continue customizing the page.

Add Cart Total

After adding the cart table we also have added the cart total right? Don’t worry ProductX also offers cart total block. As we are editing the template using Gutenberg, we can organize the blocks according to our needs. For instance, I will add the cart total block following a standard layout. You can also follow it if you wish to.

  • Click on Plus Icon
  • Add a Gutenberg Column block with a 70/30 ration
  • Then add the cart total block to the right area of the column
Cart Total
Cart Total

Now, you can see that the cart page is following a standard. However, you can organize it differently as well.

The Cart Page customization has been completed. Now click on the publish button. Add some products to the cart and check the real-time view of the cart page. Keep reading the blog posts to check out the ways of editing the cart page.

Display Cross Sell Products

As you may know, the default WooCommerce cart page displays cross-sell products. You can do the custom cart page as well.

Cross Sell Product

However, you can also add Product blocks of PostX and sort the products as cross-sell using the product query feature.

Step-5. Edit WooCommerce Cart Page

Now it’s time to discuss the main part of this blog post: how to edit the WooCommerce Cart Page. The ProductX development did a great job by enabling options to edit all the elements of the cart page blocks. Because without the editing the option the custom cart page doesn’t make any sense.

So, without further ado let’s start exploring the editing options.

Editing Options of Cart Table

Editing Options of Cart Table
Editing Options of Cart Table

After adding the cart table block, you will see an editing option. First of all, you can hide or unhide the button from the general settings. If you enabled any button. there will be a dedicated for that button from there you can make customize all elements that including text colors, background colors, hover colors, typography, padding, etc.

Edition Options of Cart Total

The Cart Total block also comes with all sorts of editing options including typography, text color, background color, hover color, padding, etc.

Editing Options of Cart Total
Editing Options of Cart Total

Edition Options of Free Shipping Block

The Free shipping block edition options start with enabling or disabling and position adjusting of the progress line. Then you can also change the text, color, typography, border radius, padding, etc.

Editing Options Free Shipping Progress Barl
Editing Options Free Shipping Progress Barl

Conclusion

That’s all about creating and editing WooCommerce cart page. Now, you can start creating your desired cart page with style and encourage shoppers to add cross-sell products to the cart. Feel free to comment below if you face any difficulties while using the ProductX Cart Builder.

Like this article? Spread the word

Written byOmith Hasan

I am a professional blogger since 2016. I love to explore and write about different types of WordPress themes and plugins. When not writing, I try to learn and implement new SEO strategies.

Leave a Reply