After the purchase, go to your account and download the OxyNinja plugin and the license key. You can install the OxyNinja plugin into your WP dashboard.
NOTE: There is only one plugin used both for Core and WooCore. Install only once and follow the instructions below.
You may also need to regenerate CSS cache after the full import.
IMPORTANT NOTE: There is a bug in Oxygen that throws few loading errors at you when importing the WooCommerce Archive or Single Product template. This is already known and reported. You do not have to worry about it, as they are only showing when rendering for the first time in the builder and when refreshing a preview sometimes. Just save and refresh the builder if anything appears broken.
Copy / Paste – This feature works for Core customers only. If you have the plugin installed and Core design set API key added in Oxygen builder settings, you can copy and paste Core sections from the demo page. Just click the “copy” button on the demo page, go back to Oxygen and click the Ninja logo left from Structure button.
Manual Import – If you ever want to trigger the import manually, you can do so from Manage → OxyNinja → Start Import. This will not overwrite your existing stylesheets but will add missing ones.
Class Reset – Did you make a change that you want to revert to default state? Go to Manage → OxyNinja → Class Reset and include the name of the class. This will revert the class to its default values.
At this point, everything is installed.
Don’t stop reading here, please.
Note: If you encounter any bugs or issues, always check if you are using the newest version of plugins,and update if you are not.
After successful activation and installation, you will notice that several new stylesheets appeared in your Oxygen Stylesheets panel.
These stylesheets include Custom CSS for several design improvements and styling for some additional functionality.
They are split into smaller chunks that are properly named, however, they are all loaded as one universal.css stylesheet on the front end, so don’t worry about loading 8 CSS files. It’s only separated in the backend for easier and more straight forward editing experience.
For example, if you decide to not use Customer Reviews on your / client’s site, you can either delete the WooCore-Reviews stylesheet or disable it.
I recommend to disable it, just in case you decide to use it in the future. To disable the Oxygen stylesheet but still keep it stored, go to Manage → Stylesheets and click on “Add Folder“.
Add any name to your folder that we will set as disabled, so I named it “Disabled”. Select a stylesheet you want to disable, and on the left panel notice the dropdown where you can select a folder. Select your newly created folder and click it to move the stylesheet to this folder.
Final step is to disable this folder. Go back to the right Stylesheets panel, hover the folder, click the icon and select “Disable”.
This folder is now disabled, and you can move any stylesheet to this folder to not load it without having to delete it permanently.
For the proper functionality, as you can see in the WooCore demo, I recommend to enable these settings in WooCommerce.
Customer Reviews for WooCommerce is a great plugin that extends the default functionality of WooCommerce reviews and works great with Oxygen. To set it after it’s installed, go to its settings and click “Review Extensions” on top of the page, scroll down and tick “Enable shortcodes and Gutenberg blocks”.
That’s it. The rest can be set according to your needs.
If you want to use Variations in your store, I recommend Variation Swatches for the Woocommerce plugin. The styling is included. All you need to do after you install the plugin is, go to its settings and on the first tab:
WooCore comes with a dozen of ready-to-use templates that you can import using Oxygen’s design set / library feature.
When you are in Oxygen Builder, you can locate WooCore templates by clicking +Add → Library → Design Sets → WooCore → Templates
Note: If you do not see WooCore listed in the Design Sets folder, please double check if you included a valid site key to the Oxygen settings as explained in the top of this page.
The first and most important template to import is the Main template. It includes a few code blocks that are responsible for global carousel options (product carousels).
Create a New Template in Oxygen, and set it as “Catch All“.
Edit the page with Oxygen and import the Main template from WooCore as explained above.
The same principles apply to Shop Archive. Create a New Template and apply it as Archive → Post Types → Product (You may also need to check All Archives)
Edit with Oxygen and +Add the Product Archive template of your choice.
IMPORTANT: There is a bug in Oxygen that throws few loading errors at you when importing the WooCommerce Archive or Single Product template. This is already known and reported. You do not have to worry about it, as they are only showing when rendering for the first time in the builder and sometimes when refreshing preview. Just save and refresh the builder if anything appears broken.
When assigning a single product template to your WooCommerce build, create a New Template and in Oxygen settings select Singular → Products
Edit with Oxygen and +Add the Single Product template of your choice.
There are also predesigned Cart, Checkout, My Account pages.
You can find them again in the Oxygen library, under WooCore / Pages folder.
Since you installed WooCommerce these pages should be already existing in your install. Just edit them with Oxygen and import the proper page from the library.
Product Carousels and Product Image Galleries are made using SplideJS.
It’s one of the most lightweight sliders in the wild, and is full of features. You can set separate settings at each breakpoint, and you can also create your own breakpoints. It also supports CSS grid 🙂
The whole package is only 11kb gzipped!
Slider files are loaded with the OxyNinja plugin, so you do not have to store the files on your own.
Carousels can be controlled using the class and specific options of the class can be controlled in this code block using the standard SplideJs settings found on their options page.
Classes for carousels are altering mainly the number of columns in the desktop mode, while 2 columns are shown on mobile for all carousels.
Classes are as follows:
.wc-splide-columns-5 – 5 columns on desktop
.wc-splide-columns-4 – 4 columns on desktop
.wc-splide-columns-3 – 3 columns on desktop
.wc-splide-columns-2 – 2 columns on desktop
.wc-splide-columns-1 – Single column on desktop
This class must be placed on the parent div that also includes class “.splide“
However, you can create your own carousel settings using your own classes.
If you are not afraid of JS, open the code block again, and copy one of the code fragments that sits between comments.
Paste it at the end of the code block, change the class name, alter it to whatever you want and then put it on any repeater instead of the SplideJs class that was used before.
The plugin includes a few lines of code that creates following shortcodes:
[wc_sec_image] – This one displays the secondary image on hover. Great fot better user experience on product archives. The CSS is included in the WooCore-Image-Flipper. You can utilize this in your own repeaters, include the shortcode in a div with the featured image, and don’t forget to set that div as position: relative.
[wc_new_badge] – Nothing fancy, just the regular “NEW” badge for recently added items.
[wc_sale_badge] – Shows if the item is on sale. It automatically shows the percentage of discount, instead of the basic “SALE” badge.