标签： woocommerce-integratio

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.

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.

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.

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.

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 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 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 Images

PRODUCT IMAGES
Add the Product Images element to the Product Builder by clicking +Add -> WooCommerce -> Product Images.
Layout
Use this tab to set a border radius on your images and select where you want the image thumbnails to appear.
Original Thumbnail
Use this tab to style the image thumbnails.
Hovered Thumbnail
Use this tab to style the thumbnails when they're hovered.
Active Thumbnail
Use this tab to style the active thumbnail.
Zoom Icon
Use this tab to style the zoom icon.
Sale Badge
Use this tab to style the sale badge.

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

Product Rating

PRODUCT RATING
Add the Product Rating element to the Product Builder by clicking +Add -> WooCommerce -> Product Rating.
Layout
Select how you want the rating displayed.
Link
Set the space around the link.

Normal - Style the link typography.
Hover - Set the hover color and text decoration.

Stars
Style the appearance of the stars.

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

Product Price

PRODUCT PRICE
Add the Product Price element to the Product Builder by clicking +Add -> WooCommerce -> Product Price.
Color & Typography
Use this tab to style the price typography.
Strikethrough On Sale
Use this tab to style the strikethrough price if the product is on sale.
 

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