How To Customize WooCommerce Cart Page Template With Woostify?

WooCommerce is an awesome eCommerce platform for you to start an online store in just a few minutes. In WooCommerce, there are several pages that make things easier for online stores such as the shop page, product page where to display products, and the Cart page, Checkout page where list all items you are purchasing and checkout information, my account page, and thank you page. All of these pages have their premade templates.

However, you can make further customization on such pages easily with simple steps. In this article, we will present the way to customize WooCommerce cart page template with Woostify theme builder.

What is WooCommerce cart page?

A WooCommerce cart page is an essential element of any WooCommerce online store. It is the place where display all the products that customers want to buy from a store and checkout and delivery information. A shopping cart page helps a lot, especially for those who are buying multiple items from the WooCommerce store.

In detail, this page shows the individual prices of each of the products, the quantity of the items for each product, and the total amount of all the items being purchased. It allows customers to simply checkout in one go instead of paying individually for every item they buy online or cash on delivery payment. That can help customers save a great deal of time while shopping.

An overview of the default WooCommerce cart page

By default, the WooCommerce cart page contains the shortcode [Woocommerce_cart] and links to the cart’s contents. By clicking on the Cart link, the customers will be directed to the contents of their Cart.

When it comes to the default settings of WooCommerce cart page, there are only two sections. The first one is cart form that includes all products name, price, quantity, coupon codes filling bar, and subtotal. The second part is the cart total containing the subtotal and the final price and the button leading to the WooCommerce checkout page.

The default WooCommerce cart page can only be edited by using code or a third-party plugin. Therefore, in case you desire to make change on WooCommerce cart page, you need to have certain coding knowledge or installing a WordPress cart page plugin.

The two most important elements when it comes to an eCommerce shopping cart design are the Add to Cart button and the cart page. In the previous article, we did show you how to customize WooCommerce Add to Cart button so in this tutorial, we are focusing on editing the WooCommerce cart page to make it better performance and give users a better shopping experience.

Why you should edit WooCommerce cart page design?

The shopping cart page has many functions. It allows customers to see the order, change quantities, remove items, and return to the WooCommerce product page. But its key goal is to move customers to the last stage in the sales funnel: the checkout. So it’s important that this page is well-designed, easy to use, and includes full sale information to satisfy the customers.

Below are the two most benefits you can get with the ability to customize WooCommerce cart page template:

Add custom text as you want: you can change this default text to something more actionable and reflecting your brand voice such as “Review your order” or something cute like ‘Your new wardrobe staples’.

Encourage upsells: Displaying WooCommerce related products on cart page is a great way to encourage more sales. You can add custom text like, “We think these would look great with your items/….”

But how to add custom field in woocommerce cart page?

As mentioned earlier, to customize the cart page in WooCommerce, you need to use codes or a plugin supporting this function. To make things easier for shop owners, in this tutorial, we are presenting the way to create a custom WooCommerce cart page with Woostify theme. The process is extremely easy and requires no coding knowledge.

How to Create a WooCommerce Custom Cart Page template with Woostify?

Step 1: Set the Cart page

The first step is to set the cart page in WooCommerce. To do that, in the WordPress dashboard, go to WooCommerce > Settings > Advanced tab.

In the Cart page section, select Cart from the dropdown options. After completing, scroll to the page bottom and click Save changes.

Step 2: Activate WooBuilder addon of Woostify Pro

Woostify comes with free and premium versions. The Woostify free theme allows you to start a standard eCommerce store. To unlock advanced features, you need to install Woostify Pro with the cost starting at $49.

Woostify pro offers various customization options for you to empower your WooCommerce store. The most powerful add-on is the WooBuilder addon that allows you to make any changes on the single product page, shop page, my account page, checkout page, thank you page, and cart page.

Therefore, to create a custom WordPress cart page with this WooCommerce page builder, you need to install and activate Woostify theme pro in your store.

After having Woostify pro in your store, you can enable Woobuilder by navigating Woostify Options from the dashboard menu. Then you will see a list of customization options you can do with Woostify, click on Activate of the WooBuilder option.

Step 3: Create a Custom WooCommerce Cart Page Design

Create a shoping cart template

Once activating WooBuilder addon, head on Setting to start the process of customizing WooCommerce cart page.

In WooBuilder section, click on the Add New button

A popup appears, then you can set the type of template as Cart Page from the dropdown menu, and give your shopping cart template a name. Once finishing, hit the CREATE TEMPLATE button to start creating a custom WooCommerce cart page design.

Add required elements for your WordPress cart page

Woostify is an Elementor WooCommerce theme, so the shop page customization made with Woostify will be done on the Elementor editing interface.

First, you need to Add New Section by clicking on the pink Plus icon.

Then, you can SELECT YOUR STRUCTURE. Of course, you can change your structure later if you are not satisfied with it.

How to add custom field in woocommerce cart page?

In the left side of the Elementor interface, you can see many Woostify widgets that are grouped together, thus you can easily find out the widgets you need for a shopping cart page design.

To create a WooCommerce custom cart page, the next step is to drag and drop the two most important factors to the cart page which are Cart Form and Cart Overview. To build a beautiful shopping cart page design, in the middle part, you should add space to separate the 2 sections above by using the Spacer widget.

Note: To have the cart page appear with the products’ name, quantity, and price in the editing area, you have to add some products to the cart before.

Customize WooCommerce cart page design

Woostify Cart Form

In the Cart Form, you can easily edit all sections such as Table Border, text size, color, and space of the Product Name, Price, Quantity, and Subtotal. You can also customize the border foot including the coupon code area and the Update Cart button.

Woostify Cart Overview

We use the Cart Overview widget to wrap up the cart page and take your customers through to Checkout. It will automatically generate the final total financial value of the cart.

Besides the required elements like Subtotal and the Total price, the shipping method, and the Proceed To Checkout button, the Cart Overview part includes the Related product section that offers customers other products they may want to buy before checking out. This is a useful feature you want to add to your WooCommerce cart page design because it may help you convert more sales.

In this section, you are allowed to edit all elements like Table Border, text size, color, and space of all texts. You can also customize the Checkout button to make it meets your requirements.

Once added the required information, you can add other elements if you wish. In this example, I use the Text Editor widget to include a custom text “Here are the products you are buying!” to make it more unique.

How to create a custom WooCommerce Empty cart page?

By default, the cart page will display a notice with something like “No products in the cart” and/or a button to return to the shop, if a customer hasn’t placed any items into their cart.

With WooBuilder, you can change the default text to ‘Oops! You don’t have any products here.’ or ‘Start shopping!’ and add a specific redirection URL as you want in a blank cart page.

To customize the empty cart page design, go to WooBuilder settings then create a new template as the process you create a cart page template above.

After that, you can select Cart Empty as the type of template and give it a name then click CREATE TEMPLATE button to start designing your empty cart page with Elementor.

You can use the Text Editor widget to add custom text and a Button widget to include a button to direct customers to a specific place you want. Of course, you can use other addons to make any changes on your WooCommerce empty cart page.

Once finishing, hit the Publish button at the page bottom left to save your template.

Here is the result of the empty cart template I have created.

Final Thought

It is extremely easy to create a WooCommerce custom cart page template with Woostify, right? Even a small change like changing the position of some factors, the color of a text, call to action button on the cart page can have a huge impact on conversion rate and shopping experience. Hopefully, this article can help you design the best cart page template that fits your online shop style and meets your requirements.