Oxygen's WooCommerce integration makes it easy to style your whole store using Oxygen.
You must have Oxygen, WooCommerce and Oxygen's WooCommerce Integration add-on installed to be able to use Oxygen's WooCommerce integration.
SHOP TEMPLATE
This template must be used to control the Shop page that has been set in the WooCommerce settings. It's not possible to edit the assigned shop page directly, it must be controlled by a template.
To create a shop template, go to Oxygen -> Templates and add a new template. Apply the template to your Shop via WHERE DOES THIS TEMPLATE APPLY -> Archive -> Post Types -> product and Archive -> Post Types -> product_variation. You can also apply the shop template to WooCommerce product tags, categories, and other WooCommerce post types if needed.
Once your template is set up, you can add a Products List element to it to display the products. You can learn more about the Products List element here.
PRODUCT TEMPLATE
To create a product template, go to Oxygen -> Templates and add a new template. Apply the template to your products via WHERE DOES THIS TEMPLATE APPLY -> Singular -> Products.
You will need to add the Product Builder element to your template by clicking +Add -> WooCommerce -> Product Builder. The Product Builder comes pre-configured with a default layout, but you can customize it by adding individual elements to the Product Builder element.
You can read more about the Product Builder element here.
WOOCOMMERCE PAGES
Once WooCommerce has been set up, it will automatically assign pages for the Cart, Checkout and My Account. You can change which pages are used via WooCommerce > Settings > Advanced.
My Account
Go to the My Account page and click Edit with Oxygen. Add the My Account element to your page by clicking +Add -> WooCommerce -> My Account. You can then style the My Account element using Oxygen.
You can read more about the My Account element here.
Checkout
Go to the Checkout page and click Edit with Oxygen. Add the Checkout element to your page by clicking +Add -> WooCommerce -> Checkout. You can then style the Checkout element using Oxygen.
You can read more about the Checkout element here.
Shopping Cart
Go to the Cart page and click Edit with Oxygen. Add the Shopping Cart element to your page by clicking +Add -> WooCommerce -> Shopping Cart. You can then style the Shopping Cart element using Oxygen.
You can read more about the Shopping Cart element here.
GLOBAL STYLES
Oxygen has Global Styles for WooCommerce elements. You can change the Global Styles via Manage -> Settings -> Global Styles -> WooCommerce. There are tabs for each group of styles:
Buttons
Change your button colors and border radius.
Links
Change your link colors.
Inputs
Change your input colors and border radius.
Text
Change the text colors.
Notifications
Change the notification colors.
Misc
Change the Sale Badge color, Star Rating colors, Border colors and Box Background color.
Widgets
Change the heading typography.
WOOCOMMERCE DOCUMENTATION
You can find more information on the WooCommerce elements by following the links below.
