Back to contents

JetWooBuilder: How to Create a Cart Page Template

From this tutorial, you will learn how to create a custom cart template and then assign it to your WooCommerce shop’s cart page with the help of the JetWooBuilder plugin.

Most of the shop website plugins have a pre-made cart page but it doesn’t always suit your needs. JetWooBuilder gives you an opportunity to build your own custom cart page and fill it with the data that seems to fit. Besides that, you can create a template for an empty cart page. Let’s go through the whole process step by step.

1 Step — Check if the widgets are enabled

Open your WP dashboard and go to JetPlugins > JetWooBuilder Settings. Scroll the list of Available Widgets down and check the cart widget toggles. By default, they are all turned on but you should check it just in case.

Available cart widgets

2 Step — Create the cart template

Proceed to JetPlugins > Jet Woo Templates. Hit the “Add New Template” button and choose the “Cart” option in the drop-down menu “This template for” in a pop-up window. Name the template and click the “Create Template” button.

Add Cart

3 Step — Fill the cart page with widgets

You can create templates both for an empty cart and a full one. There are five widgets offered by JetWooBuilder, especially for the cart template. Besides that, you can place any other widgets on the cart page, of course. However, let’s go through the JetWooBuilder extensions for the cart.

Cart widgets

Cart Cross Sells

Placing this widget to the cart page will add a cross-sells block to it. In that block with one or several columns, the user will see products that are related to the ones he/she already added to the cart. In the Content menu tab, you can choose the number of columns and the order of the products, and in the Style tab, you’ll find all the necessary tools to customize the appearance of every detail of that block.

Cart Empty Message

This widget creates a field with an icon and a message for the customer. As it is certain from the title, it is commonly used to inform the client that his/her cart is currently empty. In the Style menu tab, you can change the color and typography of the text, icon color, choose the background and border.

empty cart message

Cart Return To Shop

You should place this widget both to the empty and full cart page. It will add a button that will return the user to the shop page. In any case, such a button will be convenient for customers and increase user experience. Besides that, it could encourage the client to purchase more. In the Style tab, you can change the look of the button so it will fit your website’s design.

return to shop button

Cart Table

This widget adds a table of products that the user added to the cart. The table has 5 columns, displaying the product’s image, title, price, quantity, and subtotal price. Each row has a “Remove” button, and there is an option to add a coupon under the table. In the Style menu tab, you can modify each of the elements so that they will suit your taste and fit the shop’s general design.

Cart Totals

Totals are a table that shows the customer a total price for the items he/she added to the cart and has a button leading to the checkout. Just as it is for the rest of the cart widgets, you can define how the totals table will look like in the Style tab.

When you are done with the layout and design, hit the green “Publish” button at the bottom of the page. Now, that you have created the template, it is time to assign it to the cart page. Go to the WooCommerce > Settings and open the Jet Woo Builder tab. In the Cart section, tick the Custom Cart checkbox and choose the template you created in the Cart Template drop-down menu. When you create an empty cart template, it could be assigned in the Empty Cart Template option. Scroll the page down and click the “Save Changes” button.

assigning cart template

Your custom cart page is finished. You now know how to use JetWooBuilder widgets to build an astonishing cart template. Good luck with the creation of an outstanding shop.