Customize your WooCommerce Cart Page Template

In a previous article, I showed how to customize the product page. Now, let’s custom our cart page.

On this example let’s transform this:

Into this:

The main thing in our example is that we changed the product list from <table> to <ul>. We have also put the cart totals on the right side and moved the coupons from the product list to the “cart totals”.

1. Clone “cart.php”:

The cart template file is called “cart.php”. But if we change it directly, all our work will be lost (overwritten) once we update the WooCommerce plugin.

The update-safe way to do this is to copy the file we want to change to our theme folder and change this copy. WooCommerce detects the custom file and uses it instead of the default one.

First, create the structure:

cd wp-contents/themes/{yourtheme}
mkdir -p woocommerce/cart/cart.php

mkdir -p a/b/c creates the a/b/c structure even if “a” doesn’t exist.

Then, copy the original file to our new structure:

cp ../../plugins/woocommerce/templates/cart/cart.php ./woocommerce/cart/

2. Edit cart.php and change <table> to <ul>:

Refactor the code, changing the table/tr/td tags to ul/li/div. Feel free to play with the template file and change more elements, add some CSS styling code.

From this (table/tr/td):

To this (ul/li/div):

TIP: For each modification, test it on the browser. Add some CSS styling too.

3. Move “Apply Coupons” to the “Cart Totals” section:

You need to move this “Apply Coupon” HTML code:

To the “Cart Totals” wrapper:

As the inputs are outside the “form” tag, you need to reference the form on the inputs:

Add an id to the form so the reference can work (use a different id if you want):

Final code:

Close Menu