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.
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.
BREADCRUMB
Add the Breadcrumb element by clicking +Add -> WooCommerce -> Breadcrumb.
Typography - style the breadcrumb typography.
Links - style the breadcrumb links.
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.
Oxygen's visual editor is a what-you-see-is-what-you-get interface for creating and editing page designs.
Adding Elements To Your Page
Click the +Add button to open the element browser.
Click on the element you wish to add to add it to your page.
Editing Element Properties & Styles
Properties for the currently active element are shown in the Primary and Advanced tabs in the left sidebar.
Common properties and properties specific to the element you are editing will appear in the Primary tab.
The Advanced tab provides options for extensive customization of the element.
Choosing An Element To Edit
To activate an element, simply click on it in the page preview or in the Structure panel.
Navigating to Parent Elements
Sometimes an element is not clickable because all of its space is taken up by other elements nested inside of it. To activate an element that can't be clicked directly, click an element nested inside of it, and then click on either:
the pink title bar for the parent element
the element you wish to edit in the breadcrumb path near the top of the left sidebar
the up arrow to the right of the element name in the purple title bar
Editing An Element's Text
To edit text on your page, double click on the text in the page preview.
A toolbar for basic text formatting will appear at the top of the screen.
When you are done editing, click anywhere outside of the text, or click the Done button in the top bar.
Re-ordering Elements
There are two ways to reorder elements.
The first way is to simply drag and drop an element to a different position as shown below. To start the drag, you can click on the element itself, or the drag icon on the left side of the element's title bar.
When dragging very large elements, dragging elements a very long way, or when creating complicated nesting, the Structure panel is often an easier way to position the element where you want it.
Click the Structure toggle near the top right corner of the screen to open the Structure panel. Then click and drag an element to reposition it.
Adjusting Element Spacing
Space around and inside the active element can be adjusted by dragging the purple spacing bars around the boundary of the element.
First, activate the element you wish to adjust spacing for by clicking it.
Then, hover the mouse pointer over the inside or outside edge of the element until a purple drag bar appears.
Click and drag the bar to adjust spacing.
Undo
In Oxygen versions prior to 3.4, a one-step Undo is available if you needed to reverse a delete. After deleting an element, the red undo bar will appear in the to left corner of the design preview as shown below. Click the Undo link to reverse the delete.
In Oxygen version 3.4 or newer, full undo/redo functionality is available via the top bar in the Oxygen builder.
Click the circular back arrow to revert a change, or the circular forward arrow to reinstate a change. To view a complete history of all available undo points in your current session, click the History button to launch the History Pane.
In the History Pane, click any undo point to navigate to that point in your session's history. Click Clear All if you'd like to clear all undo nodes (Warning: This cannot be undone.)
Oxygen's undo history persists on a per-session basis. This means that reloading the builder, or exiting and re-entering the builder, will clear the undo history.
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.
CATEGORIES LIST
Add the Categories List element by clicking +Add -> WooCommerce -> Categories List.
Images
Borders - style the category image borders.
Box Shadow - style the category image box shadow.
Typography
Links - style the category links.
Quantity - style the item count.
Categories Query
Select which categories you would like to return. The default settings will return all categories.
Control opacity, transitions, shadows, filters and more with the settings inside Advanced -> Effects.
Animate on Scroll
Oxygen allows you to configure animations that are triggered on scroll using the Animate on Scroll library.
Each element can have its own animation settings defined. Any settings defined at the element level will override the default global animation settings, but only for that element. To enable animations on an element, select it and go to Advanced -> Effects -> Animate on Scroll in the Properties Pane, then check the "Enable Animation" box. Once that is selected, you'll be able to define animation settings for that specific element.
Animation Type - Determines the type of animation that will be used, such as flip, slide, or fade.
Animation Duration - Determines the number of milliseconds over which the animation takes place.
Anchor Placement - Defines which position of the element, in relation to the viewport, should trigger the animation.
Animation Easing - Defines the speed curve of the animation. Ease-in-out, for example, will cause the animation to be slower at the beginning and end and faster in the middle.
Animation Trigger Offset - Defines offset of animation trigger point (in relation to viewport scroll position) in px. A positive value can be used to ensure the entire element is in the viewport before the animation is triggered, whereas a negative value can be used to trigger the animation before the element enters the viewport.
Animation Delay - Determines the length of time between the animation being triggered and the animation beginning.
Anchor - Allows you to trigger the animation based on another element's position. Insert the element's ID in this field to trigger the animation when the target element's position reaches the designated Anchor Placement location.
Animate Only Once - By default, an element leaving the viewport re-sets the animation and causes it to be re-triggered when the element re-enters the viewport. You can disable this behavior by choosing "Yes."
Opacity
Controls the transparency of the element. Specify a value between 0 and 1. A setting of 0 makes the element completely transparent. A setting of 1 makes the element completely opaque.
Mix Blend Mode
Determines how an element's content should blend with the content of the element's parent and the element's background.
Further reading and examples of blend mode effects: https://developer.mozilla.org/en-US/docs/Web/CSS/mix-blend-mode.
Transition
Create gradual transitions between the values of CSS properties. When a CSS property value changes, instead of changing instantly, it will gradually transition to the new value.
Transition Duration
Time, in seconds, for the transition to take place.
Timing Function
The acceleration curve of the transition.
Further reading: https://developer.mozilla.org/en-US/docs/Web/CSS/transition-timing-function
CSS Property
Defaults to all. Otherwise, specify the name of the CSS property that will be transitioned.
Delay
How much time, in seconds, should pass before the transition is applied.
Box Shadow
Inset
Display the shadow inside the element, instead of outside the element.
Color
Set the color of the shadow.
Horizontal Offset
How far the shadow is moved horizontally.
Vertical Offset
How far the shadow is moved vertically.
Blur
How much blur to apply to the shadow.
Spread
How much to enlarge the shadow from its initial size, which is the size of the element.
Further reading: https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow
Text Shadow
Color
Set the color of the shadow.
Horizontal Offset
Set the horizontal distance of the text shadow from the original text.
Vertical Offset
Set the vertical distance of the text shadow from the original text.
Blur
How much blur to apply to the shadow.
Further reading: https://developer.mozilla.org/en-US/docs/Web/CSS/text-shadow
Filter
blur - Blurs the element by the given number of pixels.
brightness - Adjusts the brightness of the element using a percentage value.
contrast - Sharpens or dulls the contrast of varying colors within the element.
grayscale - Adjusts the grayscale of the element. Highest value is black and white.
hue-rotate - Changes the hue of the colors in the element. Values from 0 to 360°.
invert - Inverts the colors of the element. 0% for original, 100% for full inversion.
saturate - Adjusts the color saturation of the element.
sepia - Adjusts the sepia tones of the element.
Further Reading: https://developer.mozilla.org/en-US/docs/Web/CSS/filter
Transform
skew - Tilts the element horizontally (Skew x) or vertically (Skew Y).
translate - Moves the element on the X, Y, or Z axis.
rotate - Rotates the element by the degrees specified.
rotateX - Rotates the element on the X axis by the degrees specified.
rotateY - Rotates the element on the Y axis by the degrees specified.
perspective - Affects 3D transforms of descendant elements, allowing them to have a consistent depth perspective.
rotate3d - Allows you to specify a point in 3D space to rotate the element around.
scale - Scales the element according to its original size. For example, 2 is 2 times the original size of the element, whereas 0.5 is half the original size of the element.
Further Reading: https://developer.mozilla.org/en-US/docs/Web/CSS/transform
Oxygen integrates with Toolset.
If Toolset is installed and fields are present for the item being edited or previewed, fields created in Toolset will integrate with Oxygen's dynamic data functionality and automatically appear in the Insert Dynamic Data dialog.
Once the Insert Dynamic Data dialog is open, click Toolset to see the available fields.
Toolset Views
To insert a Toolset View, use the Toolset View element that appears at +Add -> WordPress when Toolset is installed, or use the shortcode element.
Dynamic Data allows you to link design elements created in Oxygen to data from your WordPress database.
For example, you can link a heading element in your blog post template to the Post Title in the database. The title for each blog post will be placed in the heading element. Similarly, you can link a text element to your post content or link an image or section background to your post's featured image.
Inserting Dynamic Data
Text
To insert dynamic data into any text-based element, double click the text to edit it.
Then click Insert Data in the top toolbar to open the Insert Dynamic Data Dialog.
Property Values
Certain properties can be set with Dynamic Data. These properties have a data button on the right side of their input box. Click this button to open the Insert Dynamic Data dialog.
This functionality allows you to do things like setting a section background image URL to the post featured image, or an image's alt attribute to the value of a Custom Field.
+Add -> WordPress -> Dynamic Data
Shortcuts to insert the most common dynamic data points are available at +Add -> WordPress -> Dynamic Data.
Available Dynamic Data Points
Available data points are dependent on the page element or property they are being linked to. For example, when setting an image URL, Featured Image, Author Pic, and User Pic will be available as data points, but when setting the value of a text element, these data points will not be available.
Data points shown in the Insert Dynamic Data dialog are as follows:
Title
Content
Excerpt
Date (with various formatting options)
Categories, Tags, & Taxonomies (with various formatting options)
Custom Fields
Comments Number (with various formatting options)
Featured Image Title, Caption, Alt, and URL
Author Display Name, Bio, Pic, and Custom Fields
Current User Display Name, Bio, Pic and Custom Fields
Site Title, Site Tagline, and other bloginfo()
Archive Title & Description
PHP Function Return Value
To accommodate support for dynamic data points not shown in the Insert Dynamic Data dialog, use the PHP Function Return Value option.
Specify any PHP function that will return the data, such a custom function written in a plugin or a WordPress API function.
Arguments provided to this function should not contain quotation marks or spaces. For example:
argument_1,argument_2,argument_3
The value returned by this function will be inserted.
