Cart Page

Cart page is actually a normal Webflow page where you can add the Cart Element, it has no attribute on body, the only thing that makes this page different from a normal page is that you have to declare the page you are using as cart in WooCommerce settings, following the path: WooCommerce > Settings > Advanced > Cart Page.

The Cart Page can be divided in 3 elements: 2 are basically mandatory (Cart and Cart Totals), while cross sells are optional.

Cart

To create a cart add a Form block with attibute:

Inside this form you have to insert the following elements:

• An input field of type text, this will be used to insert a coupon code;

• A submit button that can be used to apply a coupon with attribute:

• A submit button that can be used to update the cart quantities with attribute:

• A Collection List Wrapper that represents the items in the cart

Cart Rows

Inside the Collection List Item you can add the following elements:

Featured Image

The featured image of the product, as always, can be added on img or divs using attribute:

Title

The title of the product on texts using the attribute:

Permalink

The link to the product can be added on links using the attribute:

Price

The price of the product on texts using the attribute:

Subtotal

The subtotal of the product on texts using the attribute:

Remove

You can the ability to remove an item from cart using a link with the attribute:

Variation

If the product added to cart is variable, it has attached a variation description that can be added on text elements using the attribute:

Quantity

To allow your users to change the quantity of a product added to the cart add an input type number with the attribute:

Cart Totals

Cart totals is a summary of the cart data: Subtotal, Total, Taxes, Coupons, etc.. with a simple button that redirects your user to the Checkout.

To create this element follow these steps:

1. Create a div with attribute

2. Inside this div add a button with attribute:

3. Add a div with attribute:

4. Inside this last div add 2 texts with the respective attributes:

and

Cart Cross Sells

Cross-sells are products that you promote in the cart, based on the current products added, usually complemented with each other. You can't enable pagination but you can control the number of products from Udesly > Settings > WooCommerce > Related and Upsells

Insert a Collection List Wrapper that will be the list of cross sells products, with attribute:

Keep in mind that you have to set up manually what products can have cross sells. How?

Inside Collection List Item you can add all of the elements that you find in the page:

if you want, you can just copy a sample card and paste it inside the Collection List Item