Here is how to set up a Cart for WooCommerce.

  1. Inside oxygen Builder, we go to "Add" > "Library" > "Oxyelements WooCommerce".
  2. Go to "Pages" and here you'll find the "Cart" page.
  3. Click "Save" and reload the page
    (just to make sure that all the styles that we have preset actually gets loaded)

Please note that we have made several CSS changes here.

You're welcome to remove any of them or take the CSS and put it into a Stylesheet.

Protip: We have one Code Block that hides the "Cross Sell" using CSS. Not everyone set this up so in order to prevent the element from showing up we chose to hide it. Simply delete the Code Block if you wish to show the "Cross Sell" again.

Also, we have made some JavaScript that automatically updates the Cart when you change the product quantity. That feature is only visible in the frontend.

You can see it, if you click "Save" and go to the frontend.

If you click the "-" or "+" buttons, you'll see it automatically updates.

If you want to show the actual "update cart" button, you can delete the CSS we have made.

We also chose to hide the "Coupon Field", since not all websites use it. If that is the case it'll just give people the feeling that they need to stop in their order flow, to go to Google, and find a coupon code. So why not just keep them in the flow and have them buy some more stuff?

When you have decided which of the code blocks you want to keep, you can click "Save" and you are done setting up the WooCommerce Cart.

 

Next Step

How to setup Checkout page

 

To learn more about

Oxyelements WooCommerce Design Set