WooCore, the popular e-commerce design set initially developed for OxyNinja, is now compatible with your Core Framework projects.
It offers an array of impressive sections tailored specifically for WooCommerce.
AJAX-ready elements like mini cart counters and toast notifications enhance the user experience.
WooCore includes essential WooCommerce pages like Cart, Checkout, Account, and Shop pages. Additionally, it offers a wide selection of uniquely designed Product Archive and Single Product templates to meet your specific e-commerce requirements.
✅ Features:
All WooCommerce pages are built with care
Mini Cart Counter
Mega Menu
Responsive Product Filter
Custom-made Toast Notifications
Installation Guide for Oxygen 🟪
If you are using WooCore for Oxygen Builder, then you will need to have purchased the Oxygen Integration addon.
1. Oxygen Builder
Please make sure you have installed and activated Oxygen Builder. You will need to navigate to Oxygen → Settings → Library → set 'Enable 3rd Party Design Sets' → Add Design Set → and paste in your WooCore site key before clicking on 'Add Source Site'.
2. Core Framework
Please install and activate the Core Framework plugin. Be sure to choose the Full experience option during onboarding.
Next, kindly navigate to Core Framework → Addons and enter your license key for Oxygen Builder Core Framework add-on. Don't forget to hit 'Save Changes'.
Then, navigate to Core Framework → Manage Project. Here, you can import the WooCore.core project file. Click 'Overwrite' and then 'Save Changes'.
3. Oxygen Elements for WooCommerce
Install and activate Oxygen Elements for WooCommerce, which is a plugin from the team at Oxygen Builder. If purchased, you can find it in your dashboard when logging into the Oxygen website.
4. Install WooCommerce
Make sure that you install and activate WooCommerce and kindly go through the setup when prompted. WooCommerce needs to be activated in order to make use of the Product Builder elements from Oxygen.
5. Import Global Styles
Oxygen offers an import feature where you can import your global styles. Simply use our JSON provided below to quickly set up your global styles for Oxygen. Kindly navigate to Oxygen -> Export & Import -> and paste the JSON into the Import Global Settings box.
Please right click on the file below, and choose 'Save Link As' to download it.
You can leave the Import Global Colors toggle unchecked.
6. Create a Global Stylesheet
The CSS linked below is necessary for styling many elements. We did not include this CSS in Core Framework as it contains class fixes and does not relate to a framework per se.
The PHP linked below is necessary in order for the cart counter to work using WooCommerce's built-in AJAX. We recommend FluentSnippets as a snippet editor as it will work, and it is free!
WooCore comes with a dozen ready-to-use templates and pages that you can import using Oxygen's design set/library feature.
WooCore does not contain any elements under the 'Sections & Elements' within the Design Sets section. WooCore is primarily made up of Pages and Templates only.
When you are in Oxygen Builder, you can locate WooCore templates/pages by clicking +Add → Library → Design Sets → WooCore → Templates
In order for the templates to show up, you will need to be editing an Oxygen template. Pages will show up on both template pages, and normal pages.
Main Template
The first template to import is the Main template. The main template consists of the header, footer and inner content. It also includes some code blocks which are important for the functionality of WooCore. Example: automatically disappearing notice boxes after adding a product to cart, etc.
Create a New Template in Oxygen, and set it as "Catch All":
Shop Archive
The same principles apply to the Shop Archive template.
Create a new template named something appropriately -- such as Shop Archive -- and apply it as Archive → Post Types → Product (You may also want to check All Archives depending on your needs):
Edit with Oxygen and +Add the Product Archive template of your choice from the Design Sets section.
Single Product
Now, let's set up the single product template. In this case, let's select Singular -> Products in the template settings:
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 appropriate pages from the library.
Installation Guide for Bricks 🟨
This section will be completed once the conversion of CoreKit for Bricks is complete.
Required CSS:
This CSS is necessary for styling many elements. We did not include this CSS in Core Framework as it contains class fixes and does not relate to a framework per se. This is required for both Oxygen and Bricks versions of WooCore:
Similarly to the above CSS, the following PHP is necessary for the functionality of WooCore - specifically the cart counters. This PHP will be necessary for both Oxygen and Bricks versions of WooCore.
<?php/** * WooCore Cart Count * * @since 3.4.1 */// Check if WooCommerce is activeif (function_exists('WC')) {// Define the functionfunctionwoocore_cart_count($fragments) {global $woocommerce;if ($woocommerce->cart->get_cart_contents_count()>0) {ob_start();echo'<span class="wc-cart-count">';echoWC()->cart->get_cart_contents_count();echo'</span>'; $fragments['.wc-cart-count'] =ob_get_clean(); } else {ob_start();echo'<span class="wc-cart-count">';echoWC()->cart->get_cart_contents_count();echo'</span>'; $fragments['.wc-cart-count'] =ob_get_clean(); }return $fragments; }// Add the function to the WooCommerce filteradd_filter('woocommerce_add_to_cart_fragments','woocore_cart_count');}/** * WooCore MiniCart Ajax - Add * * @since 3.5.0 */// Check if WooCommerce is activeif (class_exists('WooCommerce')) {functioncoreframework_minicart_ajax_add() {// Optional: Check for nonce for security// check_ajax_referer('your_nonce', 'security');if (!isset($_POST['product_id'])) {wp_send_json_error('Invalid request');wp_die(); } $product_id =apply_filters('woocommerce_add_to_cart_product_id', absint($_POST['product_id'])); $quantity =empty($_POST['quantity'])?1:wc_stock_amount($_POST['quantity']); $variation_id =isset($_POST['variation_id'])?absint($_POST['variation_id']):0; $passed_validation = apply_filters('woocommerce_add_to_cart_validation', true, $product_id, $quantity, $variation_id);
$product_status =get_post_status($product_id); if ($passed_validation && WC()->cart->add_to_cart($product_id, $quantity, $variation_id) && 'publish' === $product_status) {
do_action('woocommerce_ajax_added_to_cart', $product_id);if ('yes'===get_option('woocommerce_cart_redirect_after_add')) {wc_add_to_cart_message([$product_id => $quantity],true); }ob_start();// Product List Start $has_items =!WC()->cart->is_empty();if ($has_items) {foreach (WC()->cart->get_cart()as $cart_item_key => $cart_item) { $_product =apply_filters('woocommerce_cart_item_product', $cart_item['data'], $cart_item, $cart_item_key); $product_id =apply_filters('woocommerce_cart_item_product_id', $cart_item['product_id'], $cart_item, $cart_item_key);if ( $_product && $_product->exists()&& $cart_item['quantity'] >0&&apply_filters('woocommerce_widget_cart_item_visible',true, $cart_item, $cart_item_key) ) { $product_name =apply_filters('woocommerce_cart_item_name', $_product->get_name(), $cart_item, $cart_item_key); $thumbnail =apply_filters('woocommerce_cart_item_thumbnail', $_product->get_image('woocommerce_gallery_thumbnail'), $cart_item, $cart_item_key); $product_price =apply_filters('woocommerce_cart_item_price', WC()->cart->get_product_price($_product), $cart_item, $cart_item_key); $product_permalink =apply_filters('woocommerce_cart_item_permalink', $_product->is_visible()? $_product->get_permalink($cart_item):'', $cart_item, $cart_item_key);echo'';echo'';echo'';echoesc_html($product_name);echo'';do_action('oxy-ninja_woocommerce_minicart_after_product_name', $_product);echofunction_exists('wc_get_formatted_cart_item_data')?wc_get_formatted_cart_item_data($cart_item):WC()->cart->get_item_data($cart_item);echoapply_filters('woocommerce_widget_cart_item_quantity',''.sprintf('%s × %s', $cart_item['quantity'], $product_price).'', $cart_item, $cart_item_key);echoapply_filters('woocommerce_cart_item_remove_link',sprintf('×', esc_url( function_exists('wc_get_cart_remove_url')? wc_get_cart_remove_url($cart_item_key): WC()->cart->get_remove_url($cart_item_key)), esc_attr__('Remove this item','woocommerce'), esc_attr($product_id), esc_attr($cart_item_key), esc_attr($_product->get_sku())), $cart_item_key);echo''; // End of .woocore-mini-cart-product-detailsecho'';if (!$_product->is_visible()) {echostr_replace(['http:','https:'],'', $thumbnail); } else {echo'';echostr_replace(['http:','https:'],'', $thumbnail);echo''; }echo''; // End of .woocore-mini-cart-product-imageecho''; // End of cart item } } } else {echo'';esc_html_e('No products in the cart.','woocommerce');echo''; } $mini_cart =ob_get_clean(); $items =sizeof(WC()->cart->get_cart()); $items_span =''.sprintf(esc_html(_n('%d item','%d items', $items,'woocommerce')), $items).'';// Fragments and mini cart are returned $data = ['fragments'=>apply_filters('woocommerce_add_to_cart_fragments', ['ul.woocore-cart_list'=>''. $mini_cart .'', ]),'cart_hash'=>apply_filters('woocommerce_add_to_cart_hash', WC()->cart->get_cart_for_session()?md5(json_encode(WC()->cart->get_cart_for_session())):'', WC()->cart->get_cart_for_session()),'subtotal'=>WC()->cart->get_cart_total(),'items'=> $items_span, ];wp_send_json($data); } else { $data = ['error'=>true,'product_url'=>apply_filters('woocommerce_cart_redirect_after_error', get_permalink($product_id), $product_id), ];wp_send_json($data); }wp_die(); }// Register AJAX actions for logged-in and logged-out usersadd_action('wp_ajax_coreframework_minicart_add','coreframework_minicart_ajax_add');add_action('wp_ajax_nopriv_coreframework_minicart_add','coreframework_minicart_ajax_add');}/** * WooCore MiniCart Ajax - Remove * * @since 3.5.0 */functioncoreframework_quick_view(){if (!isset($_POST['product_id'])) {wp_send_json_error('Invalid request');wp_die(); } $product_id =absint($_POST['product_id']);if (!$product_id) {wp_send_json_error('Invalid product ID');wp_die(); } $product =wc_get_product($product_id);if (!$product) {wp_send_json_error('Product not found');wp_die(); } $data = ['name'=> $product->get_name(),'price'=> $product->get_regular_price(),'price_html'=>wc_price($product->get_regular_price()),'sale'=>wc_price($product->get_sale_price()),'sale_html'=> $product->get_sale_price(),'type'=> $product->get_type(),'short_description'=> $product->get_short_description(),'stock'=> $product->get_stock_status(),'attributes'=> $product->get_attributes(),'image_id'=> $product->get_image_id(),'image'=> $product->get_image(),'image_gallery'=> $product->get_gallery_image_ids(), ];wp_send_json($data);wp_die();}// Register AJAX actions for logged-in and logged-out usersadd_action('wp_ajax_coreframework_quick_view','coreframework_quick_view');add_action('wp_ajax_nopriv_coreframework_quick_view','coreframework_quick_view');
Additional Plugins
Customer Reviews for WooCommerce
Customer Reviews for WooCommerce is a great plugin that extends the default functionality of WooCommerce reviews and works great with WooCore. To set it after it's installed, go to its settings and click "Shortcodes" tab on top of the page, then tick "Enable shortcodes and Gutenberg blocks".
Variation Swatches for WooCommerce
If you want to use Variations in your store, we highly 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:
