PRODUCT META
Add the Product Images element to the Product Builder by clicking +Add -> WooCommerce -> Product Images.
Layout
Select how you want the meta displayed.
Typography - style the meta labels.
Value Typography - style the meta values.
Links - style the meta links.
The elements available via Available Product Elements must be used within the Product Builder element.
PRODUCT INFO
Add the Product Info element to the Product Builder by clicking +Add -> WooCommerce -> Product Info.
Typography - style the labels on the Additional Information tab.
Value Typography - style the values on the Additional Information tab.
Cell Content - style the cells on the Additional Information tab.
The Product Info element must be used within the Product Builder element.
PRODUCT EXCERPT
Add the Product Excerpt element to the Product Builder by clicking +Add -> WooCommerce -> Product Excerpt. Use the Primary tab to change the typography settings.
The Product Excerpt element must be used within the Product Builder element.
PRODUCT DESCRIPTION
Add the Product Description element to the Product Builder by clicking +Add -> WooCommerce -> Product Description. Use the Primary tab to change the typography settings.
The Product Description element must be used within the Product Builder element.
PRODUCT CART BUTTON
Add the Product Cart Button element to the Product Builder by clicking +Add -> WooCommerce -> Product Cart Button.
Labels
If your product has selectable options then you can use this tab to style the labels.
Inputs
If your product has selectable options then you can use this tab to style the inputs.
Clear Link
Price Amount
Color & Typography - if you are using variable products then you can use this tab to style the price typography.
Strikethrough On Sale - if you are using variable products that are on sale, you can use this tab to style the strikethrough typography.
In Stock Text
If you are managing stock for your product then you can use this tab to style the "in stock" typography.
Out of Stock Text
If you are managing stock for your product then you can use this tab to style the "out of stock" typography.
Add to Cart Button
Use this tab to style the button and button typography.
The Product Cart Button element must be used within the Product Builder element.
Oxygen's WooCommerce integration makes it easy to create a template to display a product.
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.
PRODUCT BUILDER
Add the Product Builder element to your template by clicking +Add -> WooCommerce -> Product Builder. The element will give you a default layout for a product. You can customize it by adding individual elements from the Available Product Elements selection on the left.
The elements available via Available Product Elements must be used within the Product Builder element.
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.
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.
SHOP 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.
To create a list of products, add the Products List element to your template by clicking +Add -> WooCommerce -> Products List.
You can read more about the Product List 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.
Archive Description
Archive Title
Breadcrumb
Categories List
Checkout
My Account
Order Tracking
Product Builder
Shopping Cart
ORDER TRACKING
Add the Order Tracking element by clicking +Add -> WooCommerce -> Order Tracking.
Message
Style the message typography.
Labels
Style the label typography.
Text Fields
Style the text field padding, color, font size, background color and font family.
Normal Borders - style the text field borders.
Normal Box Shadow - style the text field box shadow.
Focus Borders - style the focused text field border.
Focus Box Shadow - style the focused text field box shadow.
Submit
Style the button padding, background color and background hover color.
Typography - style the submit button typography.
Borders - style the submit button borders.
Hover Borders - style the submit button border on hover.
Box Shadow - style the submit button box shadow.
Hover Box Shadow - style the submit button box shadow on hover
Oxygen's WooCommerce integration makes it easy to create the My Account page using the My Account element. This element needs to be added to the page assigned to "My account page" via WooCommerce -> Settings -> Advanced.
MY ACCOUNT
Add the My Account element to your template by clicking +Add -> WooCommerce -> My Account.
Account Menu
Style the menu and set the display options.
Menu Links
Layout - style the menu borders.
Typography - style the link typography.
Hover - style the link hover.
Active Link - style the active link.
Plain Texts
Style the my account typography.
Headings
Style the typography of the headings.
Labels
Style the label typography.
Required Labels - style the required labels.
Primary Button
Set the button background color, text color, padding, outline color, outline width and outline style.
Button Border- style the button border.
Button Typography - style the button typography.
Hover Colors - style the button hover colors.
Secondary Button
Set the secondary button background color, text color and padding.
Button Border- style the secondary button border.
Button Typography - style the secondary button typography.
Hover Colors - style the secondary button hover colors.
Table
Set the table border color.
Table Texts - style the table typography.
Table Bold Texts - style the bold table typography.
Inputs
Style the input padding, font family and font size.
Input Border - style the input border.
Input Focus - style the focused input border.
