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:

wccart

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:

itemapply-coupon
  • A submit button that can be used to update the cart quantities with attribute:
itemupdate-cart
  • A Collection List Wrapper that represents the items in the cart

Copy Cart Structure

Cart Rows

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

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

itemfeatured-image

Title

The title of the product on texts using the attribute:

itemtitle

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

itempermalink

Price

The price of the product on texts using the attribute:

itemprice

Subtotal

The subtotal of the product on texts using the attribute:

itemsubtotal

Remove

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

itemremove

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:

itemvariation

Quantity

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

itemquantity

Copy Cart Row

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
wccart-totals
  1. Inside this div add a button with attribute:
itemcheckout
  1. Add a div with attribute:
itemline
  1. Inside this last div add 2 texts with the respective attributes:
itemline-label

and

itemline-value

Copy Cart Totals

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:

wccart-cross-sells

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

Copy Cart Cross Sells

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

Copy Simple Product Card