How to create a vertical layout on the product table list for the Woocommerce Cart

The Bew Cart & Checkout builder extension, allow you to create awesome and modern Wocommerce cart layouts, you can make a modern vertical layout on the product table list.

This is how a standard default product list looks:

And this is how the product table list looks:

We’ll go for something like this instead:

and vertical table list:

Here’s what’s different:

  • We’re adding and recreating a new look on the product table section, getting on it a modern and clean design.
    • We changed the product list structure from Table Tag structure (table, tr,th) to Flexbox structure.
    • Adding a new section on top with a title.
    • Creating a vertical layout with the image on the left side and the price, title and quantity on the right side, it looks more clean and modern.
    • Adding a subtotal section on bottom.
    • Adding an option to add or remove elements on the product table like, remove the link, name, price, quantity, and subtotals.
    • Redesign the border design on the product table.
    • Relocating and new look on the remove link option.
    • Adding a dynamic plus/minus featured on the quantity, it uses ajax call, so you don’t need more page refreshed or extra update cart action.
    • Relocating the apply code section from the product table to the cart total section. you can have the option to keep/show the standard apply code section.
  • Each part of the cart is completely customizable, you can change styles, color, add or remove features and create your own unique cart page, which is combined with the styles of your website.

With the Bew Cart & Checkout builder, the possibility to style your cart is very big, you cannot find these advanced features on the market.

Let’s do something if you find another product with the same or better features, send us an email at We will give you a free license for Briefcase Elementor Widgets plugin.

video tutorial

Leave a Reply

Your email address will not be published. Required fields are marked *