Homepage
Blog
Support / Contact
My Account
October 7, 2020

WooCore Documentation

WooCore Documentation
Download a cheat sheet PDF to print or save for later!

How to install WooCore

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.

  • Go to Plugins → Add New and install the downloaded plugin
  • Go to Oxygen → Settings → Library → Tick “Enable 3rd Party Design Sets” and Add the license key downloaded with your purchase.
  • Create and / or edit your Main Template in Oxygen Builder. After the builder loads in your browser, you shall see a modal asking you to import selectors & stylesheets. Confirm and wait until the page saves on the background. If it doesn’t open automatically, you can trigger it manually from Oxygen Builder → Manage → OxyNinja Import. Use this if the modal didn’t appear automatically or if you want to load new classes / stylesheets after an update.
  • Import the Main template from the design set – It includes the necessary code block for carousels and sliders, however, you are free to delete the header and footer if you want to use a different one.

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.

More Plugin Features

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.

Requirements

  1. Oxygen Builder
  2. WooCommerce
  3. Oxygen Elements for WooCommerce
  4. Minimal PHP Version 7

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.

What it imports?

  • Base CORE framework – You can utilize the power of our flagship framework selectors and use all classes as explained here
  • WooCore stylesheets – Custom CSS required for additional functionality and design fixes across the whole WooCommerce experience in Oxygen Builder. You can manage them from Manage → Stylesheets
  • SplideJS files that are used for product carousels and image galleries
  • Few lines of code that creates 3 new shortcodes for Image flipper and New / Sale percentage badges

Stylesheets

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.

Which Stylesheets are loaded and what is their purpose?

  • WooCore – This is the base stylesheet that includes mostly CSS fixes for WooCommerce inside Oxygen and some additional styling for Grids and Archives.
  • WooCore-Notice-Boxes – Custom CSS for improved notice boxes that appears when you add an item to cart.
  • WooCore-Variation-Swatches – Custom CSS for Variation Swatches plugin
  • WooCore-Reviews – Custom CSS for Customer Reviews plugin
  • WooCore-Mini-Cart – Custom CSS for hover triggered mini cart
  • WooCore-Carousels – Custom CSS for carousels and image sliders using SplideJS
  • WooCore-Image-Flipper – Custom CSS for displaying a secondary product image on hover
  • WooCore-Filters – Custom CSS for WooCommerce filtering on archive pages

How to disable stylesheet?

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.

Plugins and their settings

WooCommerce

For the proper functionality, as you can see in the WooCore demo, I recommend to enable these settings in WooCommerce.

  1. Go to Settings > Products and tick “Enable AJAX add to cart buttons on archives”
  2. If you intend to use Reviews also, scroll down on the same page and “Enable product reviews”

Customer Reviews for 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.

Variation Swatches for WooCommerce

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:

  1. Untick “Enable default stylesheet”
  2. Tick “Convert default dropdowns to button type”

Templates

How to import a template to Oxygen Builder?

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.

Main Template

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.

Shop Archive

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.

Single Product

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.

Pages

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.

Carousels

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.

How to customize carousels?

Open your Main template and locate the code block named “SplideJs carousels“. Open the Javascript editor of the code block and you will see the setup code for several base carousels.

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.

Image Flipper & Badges

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.

What are you missing?

Request Form
CORE
A popular Core framework & design set made for Oxygen Builder
Purchase Core
Core Documentation
Changelog
Live Sections
WOOCORE
The biggest WooCommerce design set for Oxygen Builder
Purchase WooCore
WooCore Documentation
Live Demo
close