标签： woocommerce-integratio

Related Products

RELATED PRODUCTS
The Related Products element shows products selected by WooCommerce based on similar taxonomies.  Add the Related Products element to the Product Builder by clicking +Add -> WooCommerce -> Related Products.
Layout
Change how the text is aligned and select the number of columns.
Title
Style the title typography.
Sales Badge
If any of your cross-sells are on sale, style the "sale" badge.
Images

Borders - style the image borders.
Box Shadow - add a box shadow to the image.

Links
Style the link typography.
Stars
If your product cross-sells have ratings, style the rating stars.
Price

Current Price - Use this tab to style the price typography.
Strikethrough Price - Use this tab to style the strikethrough price if the product is on sale.

Main Buttons
Set the padding, background color and hover color.

Typography - style the button typography.
Hover Typography - style the hover typography.
Borders - style the button borders.
Hover Borders - style the button border on hover.
Shadow - style the button shadow.
Hover Shadow - style the button shadow on hover

View Cart Buttons
What does this do??

 
The Related Products element must be used within the Product Builder element.

Shopping Cart

Oxygen's WooCommerce integration makes it easy to create the shopping cart page using the Shopping Cart element. This element needs to be added to the page assigned to "Cart Page" via WooCommerce -> Settings -> Advanced.
Add the Shopping Cart element to your page or template by clicking +Add -> WooCommerce -> Shopping Cart.
Heading
Style the typography of the headings.
Table Headers
Style the typography of the table headings.
Primary Button
Set the button background color, hover color and padding.

Typography - style the button typography.
Border - style the button borders.
Hover Border - style the button border on hover.
Box Shadow - style the button shadow.
Hover Box Shadow - style the button shadow on hover

Secondary Buttons
Set the secondary button background color, hover color and padding.

Typography - style the secondary button typography.
Borders - style the secondary button borders.
Hover Border - style the secondary button border on hover.
Box Shadow - style the secondary button shadow.
Hover Box Shadow - style the secondary button shadow on hover

Disabled Button
Set the disabled button background color, hover color and padding.

Typography - style the disabled button typography.
Border - style the button disabled borders.
Box Shadow - style the disabled button shadow.

Inputs

Border - style the input border.
Focused Border - style the focused input border.
Focused Box Shadow - style the focused input box shadow.

Images
Set the image size.

Image Border - style the product image borders.
Image Box Shadow - style the product image box shadow.

Prices
Style the price typography.
Links
Style the link typography.

Please note that when adding this element to the builder, it will show "Your cart is currently empty" unless you've already added an item to your cart. It's recommended to add an item to your cart so that you can see the different elements being styled in the builder.

Product Stock

PRODUCT STOCK
Add the Product Stock element to the Product Builder by clicking +Add -> WooCommerce -> Product Stock.
In Stock Typography
Style the "in stock" text.
Out Of Stock Typography
Style the "out of stock" text.

The Product Stock element must be used within the Product Builder element.

Product Tabs

PRODUCT TABS
Add the Product Tabs element to the Product Builder by clicking +Add -> WooCommerce -> Product Tabs.
Tabs

Normal Tabs - set the tab colours and style the typography.
Active Tab - set the active tab tab colours and style the typography.
Hovered Tab - set the hovered tab colours and style the typography.

Headings
Style the typography of the headings within the content of each tab.
Content
Set a background color for the tab.

Content Border - add and style a border around the tab content.
Content Typography - style the typography of the content within each tab.

Additional 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 Tabs element must be used within the Product Builder element.

Product Title

PRODUCT TITLE
Add the Product Title element to the Product Builder by clicking +Add -> WooCommerce -> Product Title. Use the Primary tab to change the typography settings.

 
The Product Title element must be used within the Product Builder element.

Product Upsells

PRODUCT UPSELLS
The Product Upsells element shows products set as Upsells set via the Linked Products tab in the product admin. Add the Product Upsells element to the Product Builder by clicking +Add -> WooCommerce -> Product Upsells.
Layout
Change how the text is aligned and select the number of columns.
Title
Style the title typography.
Sales Badge
If any of your upsells are on sale, style the "sale" badge.
Images

Borders - style the image borders.
Box Shadow - add a box shadow to the image.

Links
Style the link typography.
Stars
If your product upsells have ratings, style the rating stars.
Price

Current Price - Use this tab to style the price typography.
Strikethrough Price - Use this tab to style the strikethrough price if the product is on sale.

Main Buttons
Set the padding, background color and hover color.

Typography - style the button typography.
Hover Typography - style the hover typography.
Borders - style the button borders.
Hover Borders - style the button border on hover.
Shadow - style the button shadow.
Hover Shadow - style the button shadow on hover

View Cart Buttons
What does this do??

The Product Upsells element must be used within the Product Builder element.

Products List

Oxygen's WooCommerce integration makes it easy to create a template to apply to your shop page.
To create a shop template, go to Oxygen -> Templates and add a new template. Apply the template to your shop page via WHERE DOES THIS TEMPLATE APPLY -> Archive. Select Post Type -> product, Taxonomies -> All Product Categories, Taxonomies > All Product Tags.
PRODUCTS LIST
Add the Products List element to your template by clicking +Add -> WooCommerce -> Products List.
Products Query
The query selects which posts will be displayed by the Products List element.
Default
The default query includes all of your products.
You can override the default query by choosing custom.
Custom

Limit - select the number of products to return.
Columns - select the number of columns to display.
Paginate - select if you want pagination.
Order By - select how you want the products to be ordered.
Order - select if you want the order ascending or descending.
Category - choose the product category.
Cat Operator - select how you want the category selection to work.
On Sale Only - select if you want only sale products.
Best Selling - select if you want only best selling products.
Top Rated - select if you only want top rated products.
IDs - select specific product IDs.
SKUs - select specific product SKUs.
Attribute - select specific product attributes.
Terms - select specific product terms.
Terms Operator - select how you want the term selection to work.
Visibility - select the product visibility.

Layout
Set the column padding, item alignment and number of columns.
Heading
Style the heading typography.
Results Count
Style the result count typography.
Sorting Select
Set the padding.

Typography - style the select box typography.
Border - style the select box border.
Focus Border - style the focused select box border.
Box Shadow - style the select box box shadow.
Focus Box Shadow - style the focus box box shadow.

Sales Badge
Style the sale badge.
Images

Borders - style the image borders.
Box Shadow - style the image box shadow.

Links
Style the link typography.
Stars
If your products have ratings, style the rating stars.
Price

Current Price - style the price.
Strikethrough Price - if your products are on sale, style the strikethrough price.

Main Buttons
Style the button padding, background color and background hover color.

Typography - style the button typography.
Borders - style the button borders.
Hover Borders - style the button border on hover.
Shadow - style the button box shadow.
Hover Shadow - style the button box shadow on hover

View Cart Buttons
Style the button padding, background color and background hover color.

Typography - style the button typography.
Borders - style the button borders.
Hover Borders - style the button border on hover.
Shadow - style the button box shadow.
Hover Shadow - style the button box shadow on hover

Pagination
Style the pagination.

Order Tracking

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

Product Meta

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.

Overview

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