The cart page in your own design

Where it goes

On page-cart.html: WordPress uses it for the cart page of WooCommerce. wp="cart-full" wraps the cart, wp="cart-empty" the message for an empty cart.

Inside, wp-cart="items" on the block of rows; the first row is the pattern. In a row: product_title, product_image, product_price, product_qty, product_total, product_remove. Under the rows: wp="cart-total".

Example: a cart with two products

<div class="cart" wp="cart-full">
  <div wp-cart="items">
    <div class="cart__row">
      <div wp-cart="product_title">Ethiopia Yirgacheffe</div>
      <input wp-cart="product_qty">
      <div wp-cart="product_total">$28.00</div>
      <a href="#" wp-cart="product_remove">Remove</a>
    </div>
  </div>
  <div>Total: <span wp="cart-total">$28.00</span></div>
</div>
<div class="cart-empty" wp="cart-empty">Your cart is empty.</div>

What matters

• Needs WooCommerce.
• The empty state is wp="cart-empty": the theme shows it when the cart is empty and hides it otherwise.
• The price in a row follows product-price: add product_price_sale and product_price_regular for sales.

Common mistakes

The build log is the “Logs” tab of your project on themeforge.pro; the free markup check shows the same notes.

<div wp-cart="empty-cart">Your cart is empty.</div>

<div wp="cart-empty">Your cart is empty.</div>

Related tasks