WooCore

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 the Oxygen Builder Integration 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.

Use the CSS located here.

7. Copy PHP to a Snippet Plugin:

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!

Use the PHP located here.

8. Using Templates/Pages

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.

Oxygen - 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.:

/****** GENERAL WOOCORE ******/

/********** THIS SECTION INCLUDES FIXES FOR WOOCOMMERCE 8.4.0 **********/

#place_order {
  background-color: var(--secondary);
  color: var(--light);
}

/* Add Checkmark on ATC Button After Added */
.woocommerce #respond input#submit.added::after,
.woocommerce a.button.added::after,
.woocommerce button.button.added::after,
.woocommerce input.button.added::after {
  font-family: WooCommerce;
  content: "\e017";
  margin-left: 0.53em;
  vertical-align: bottom;
}

/* Add Loading Icon when clicking on ATC button */
.woocommerce a.button.loading:after {
  font-family: WooCommerce;
  content: " \e01c ";
  margin-left: 0.53em;
  vertical-align: bottom;
  -webkit-font-smoothing: antialiased;
  font-weight: 400;
  -webkit-animation: spin 2s linear infinite;
  -moz-animation: spin 2s linear infinite;
  animation: spin 2s linear infinite;
}

/* WooCommerce Slide Up Notification in Product Builder */
.woocommerce-notices-wrapper .wc-block-components-notice-banner {
  align-items: center;
}

.woocommerce-notices-wrapper
  .wc-block-components-notice-banner
  > .wc-block-components-notice-banner__content {
  padding-right: 0;
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  gap: var(--space-s);
}

.woocommerce-notices-wrapper
  .wc-block-components-notice-banner
  > .wc-block-components-notice-banner__content
  .wc-forward {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: var(--space-xs) var(--space-s) !important;
  background: var(--secondary) !important;
  border-color: var(--secondary-d-1) !important;
  color: var(--light) !important;
  float: unset;
  margin: unset;
  text-decoration: none;
}

/* Discount Code Box on Cart Page*/
.woocommerce-page .woocommerce-cart-form #coupon_code {
  font-size: var(--text-s) !important;
}
@media only screen and (max-width: 768px) {
  .woocommerce-page .woocommerce-cart-form #coupon_code {
    width: 50%;
    margin-right: var(--space-xs);
  }
}
/* Checkout Fields */
.woocommerce-page .input-text {
  font-size: var(--text-s) !important;
}
.woocommerce-page .select2-container .select2-search__field,
.woocommerce-page .select2-container .select2-selection {
  font-size: var(--text-s) !important;
}

/* Added to Cart animation */
@keyframes slideUp {
  0% {
    transform: translateY(200%); /* Start off-screen */
  }
  100% {
    transform: translateY(0); /* Slide into view */
  }
}

@keyframes slideDown {
  0% {
    transform: translateY(0); /* Start in view */
  }
  100% {
    transform: translateY(200%); /* Slide back off-screen */
  }
}

.added-to-cart--animate-up {
  animation: slideUp 0.5s ease forwards;
}

.added-to-cart--animate-down {
  animation: slideDown 0.5s ease forwards;
}

.added-to-cart--success svg {
  background-color: #4ab866;
  fill: #fff;
  border-radius: 50%;
  padding: 2px;
}

.price ins {
  text-decoration: none;
}

.woocommerce label[for="payment_method_woocommerce_payments"],
.woocommerce label[for="payment_method_bacs"],
.woocommerce label[for="payment_method_cod"] {
  display: unset;
}

/********** END OF 8.4.0 fixes **********/

/* IMG OBJECT FIT - USE ON IMAGE OR IMAGE WRAPPER TO CHANGE OBJECT FIT OF THE IMAGE */

.wc-img-cover,
.wc-img-cover img {
  object-fit: cover;
  object-position: center;
  width: 100%;
  height: 100%;
}
.wc-img-contain,
.wc-img-contain img {
  object-fit: contain;
  object-position: center;
  width: 100%;
  height: 100%;
}

/* WOOCOMMERCE IMAGE GRID 1*/

.wc-image-grid-1 {
  display: grid !important;
  grid-template-columns: 1fr 1fr;
  grid-gap: 10px;
}
.wc-image-grid-1 * {
  width: 100% !important;
  border-radius: 2px;
  margin: 0 !important;
}
.wc-image-grid-1 *:nth-child(1) {
  grid-column: 1 / -1;
  max-height: 800px;
  object-fit: cover;
  object-position: center;
}
.wc-grid-img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
  object-position: center;
}

/* CSS FIX */

#ct-builder .wc-archive-item-1,
#ct-builder .wc-archive-item-2,
#ct-builder .wc-archive-item-3,
#ct-builder .wc-archive-item-4 {
  max-width: 350px;
}

.oxy-dynamic-list .oxy-product-wrapper-inner {
  height: 100%;
}

div.c-divider,
div.wc-full-divider {
  min-height: 1px !important;
}

.oxy-repeater-pages-wrap {
  grid-column: 1 / -1;
}

.oxy-product-info h2 {
  margin-bottom: 20px !important;
}
.widget_top_rated_products h2,
.woocommerce .widget_shopping_cart h2,
.woocommerce .widget_products h2,
.woocommerce .widget_product_categories h2,
.woocommerce .widget_layered_nav_filters h2,
.woocommerce .woocommerce-widget-layered-nav h2,
.woocommerce .widget_rating_filter h2,
.woocommerce .widget_price_filter h2,
.woocommerce div.widget_product_tag_cloud h2,
.woocommerce h1.page-title,
.woocommerce h1.product_title,
.woocommerce section.related.products h2,
.woocommerce section.upsells.products h2,
.woocommerce h2.woocommerce-Reviews-title,
.woocommerce span.comment-reply-title,
.woocommerce-Tabs-panel h2,
h2.woocommerce-order-downloads__title,
.woocommerce-orders article header h1,
.woocommerce-account article header h1,
.woocommerce-downloads article header h1,
.woocommerce-edit-address article header h1,
.woocommerce-account h2,
.woocommerce-Address-title h3,
.woocommerce-MyAccount-content h3,
.woocommerce-EditAccountForm legend,
h1.oxy-woo-archive-title,
h2.woocommerce-column__title,
h2.woocommerce-order-downloads__title,
h2.woocommerce-order-details__title,
.woocommerce-billing-fields h3,
.woocommerce-checkout h3,
.woocommerce .cart_totals h2,
.woocommerce .cross-sells h2 {
  color: inherit;
  font-weight: inherit;
  line-height: inherit;
}
.woocommerce .price_label .from,
.woocommerce .price_label .to,
.woocommerce ul.products li.product .price,
.product-quantity,
.woocommerce .price ins,
.woocommerce-Price-amount,
.woocommerce-loop-category__title .count,
.woocommerce .price {
  font-weight: 600;
}
.woocommerce a.added_to_cart {
  display: none !important;
}

.wc-price-container .price {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.wc-price-container .price > del {
  order: 2;
}

.wc-price-container .price > ins {
  padding-right: 10px;
}

/* CATEGORIES LIST */

.wc-cat-list-1 .woocommerce .products ul::after,
.wc-cat-list-1 .woocommerce .products ul::before,
.wc-cat-list-1 .woocommerce ul.products::after,
.wc-cat-list-1 .woocommerce ul.products::before {
  display: none;
}

.wc-cat-list-1 .columns-4 {
  display: inline;
}

.wc-cat-list-1.oxy-woo-product-categories
  .woocommerce
  ul.products
  li.product-category
  a
  img {
  margin-bottom: 0;
}
.wc-cat-list-1.oxy-woo-product-categories
  .woocommerce
  ul.products
  li.product
  a {
  align-items: center;
  display: grid;
  grid-template-columns: 80px 1fr;
  grid-gap: 15px;
  background: white;
  border-radius: 0;
  overflow: hidden;
  padding: 0px;
  box-shadow: 0px 3px 10px #00000017;
  transition: all 0.3s;
}
.wc-cat-list-1.oxy-woo-product-categories
  .woocommerce
  ul.products
  li.product
  a:hover {
  transform: translatey(-3px);
  box-shadow: 0px 5px 20px #00000017;
}
.wc-cat-list-1.oxy-woo-product-categories .woocommerce ul.products li.product,
.wc-cat-list-1.woocommerce-page ul.products li.product {
  width: 100%;
  padding: 0;
  margin: 0;
}
.wc-cat-list-1.oxy-woo-product-categories .woocommerce ul.products {
  display: grid;
  width: 100%;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  grid-gap: 15px;
  margin: 0;
}

/* TABS TO ACCORDION CSS FIX */

.tab-accordion {
  border: 1px solid #e8e8e8;
  background: none;
  width: 100%;
  justify-content: center;
  margin-bottom: 20px;
}

/* CUSTOM SALE & NEW BADGES */

.wc-sale-badge,
.wc-new-badge {
  display: block;
  background: white;
  color: black;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 6px;
  box-shadow: 0 1px 5px #0000001c;
  margin: 5px;
  opacity: 0.8;
}
.wc-sale-badge {
  background: black;
  color: white;
}

/* WOOCOMMERCE ARCHIVE STYLE 1 */

.wc-archive-item-1 img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: all 0.6s !important;
}

@media only screen and (min-width: 992px) {
  .wc-archive-item-1-content {
    opacity: 0;
  }
  .wc-archive-item-1-title {
    transform: translateY(-25px);
  }
  .wc-archive-item-1-price {
    transform: translateY(25px);
  }
  .wc-archive-item-1:hover img {
    transform: scale(1.2);
    opacity: 0.1;
  }
  .wc-archive-item-1:hover .wc-archive-item-1-content {
    opacity: 1;
  }

  .wc-archive-item-1:hover .wc-archive-item-1-title,
  .wc-archive-item-1:hover .wc-archive-item-1-price {
    transform: translatey(0);
  }
}

/* ARCHIVE STYLE 2 */

.wc-archive-item-2 .add_to_cart_inline {
  margin: 0;
}
.wc-archive-item-2 .atc-code-block {
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 3;
  transition: all 0.6s;
}
.wc-archive-item-2 .woocommerce a.button {
  width: 100%;
  padding: 10px;
  background-color: rgba(0, 0, 0, 0.4);
  border: none;
  border-radius: 0;
  font-size: 12px;
  font-weight: 500;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #ffffff;
  margin: 0;
}
.wc-archive-item-2 .woocommerce a.button:hover {
  background-color: rgba(0, 0, 0, 0.6);
}

@media only screen and (min-width: 992px) {
  .wc-archive-item-2 .atc-code-block {
    transform: translatey(100%);
  }
  .wc-archive-item-2:hover .atc-code-block {
    transform: translatey(0px);
  }
}

.wc-archive-item-2-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* ARCHIVE STYLE 3 */

.wc-archive-item-3 .woocommerce a.button {
  max-width: 150px;
  padding: 10px;
  background-color: rgba(0, 0, 0, 0.1);
  border: none;
  border-radius: 2px;
  font-size: 11px;
  font-weight: 500;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: grey;
  transition: all 1s;
  margin: 0;
}

.wc-archive-item-3 .add_to_cart_inline {
  display: flex;
  justify-content: center;
}
.wc-archive-item-3 .woocommerce a.button:hover {
  background-color: rgba(0, 0, 0, 0.5);
  color: white;
}

.wc-archive-item-3-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* ARCHIVE STYLE 4 */

.wc-archive-item-4 .woocommerce a.button {
  padding: 10px;
  background-color: rgba(0, 0, 0, 0.1);
  border: none;
  border-radius: 2px;
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: grey;
  transition: all 1s;
  margin: 0;
}

.wc-archive-item-4 .woocommerce a.button:hover {
  background-color: rgba(0, 0, 0, 0.5);
  color: white;
}

.wc-archive-item-4-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/****** WOOCORE NOTICE BOXES ******/

/* WOOCOMMERCE NOTICES FLOATING BOX */

.woocommerce-notices-wrapper {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 100;
  transition: all 0.6s;
  animation: slide-up-fade-in ease 1s;
  animation-iteration-count: 1;
  transform-origin: 50% 50%;
  animation-fill-mode: forwards; /*when the spec is finished*/
  opacity: 0;
}

.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
  display: flex;
  align-items: center;
  border: none;
  box-shadow: 0 5px 15px #00000017;
  border-radius: 2px;
  background: white;
  z-index: 100;
  transition: all 0.6s;
}
.woocommerce-message .button,
.woocommerce-info .button,
.woocommerce-error .button {
  margin-left: 20px !important;
  order: 5;
}
.woocommerce-error::before,
.woocommerce-info::before,
.woocommerce-message::before {
  top: auto;
  left: 1.5em;
}
.showcoupon {
  padding: 5px;
}

/* FLOATING BOX - SLIDE UP */

@keyframes slide-up-fade-in {
  0% {
    opacity: 0;
    transform: translatey(200px);
  }
  100% {
    opacity: 1;
    transform: translatey(0px);
  }
}

/* FLOATING BOX - SLIDE DOWN */

@keyframes slide-down-fade-in {
  0% {
    opacity: 1;
    transform: translatey(0px);
  }
  100% {
    opacity: 0;
    transform: translatey(200px);
  }
}

.hide-notification:not(.oxy-woo-checkout) {
  animation: slide-down-fade-in ease 1s;
  animation-iteration-count: 1;
  transform-origin: 50% 50%;
  animation-fill-mode: forwards; /*when the spec is finished*/
}

/****** VARIATION SWATCHES ******/

.woocommerce div.product p.price {
  font-weight: 400;
  font-size: 20px;
  color: #303030;
}

ul.variable-items-wrapper {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  padding: 0;
  margin: 0 0 10px 0;
}
ul.variable-items-wrapper li {
  list-style-type: none;
  padding: 5px 10px;
  border: 1px solid #e8e8e8;
  background: white;
  border-radius: 2px;
  margin-right: 10px;
  margin-bottom: 10px;
  font-size: 12px;
  font-weight: 500;
}

ul.variable-items-wrapper li.color-variable-item {
  padding: 2px;
}

ul.variable-items-wrapper .variable-item-span-color {
  width: 20px;
  height: 20px;
  border-radius: 2px;
  display: block;
}

ul.variable-items-wrapper li:hover,
ul.variable-items-wrapper li.selected {
  border: 1px solid grey;
}

ul.variable-items-wrapper li:focus {
  outline: none;
}

/* SOLD OUT VARIATIONS */

ul.variable-items-wrapper li.disabled {
  transition: al 0.6s;
  opacity: 0.3;
  cursor: not-allowed;
}
ul.variable-items-wrapper li.disabled:hover {
  border: 1px solid #e8e8e8;
}

/****** WOOCORE REVIEWS ******/

.woocommerce textarea,
.woocommerce input,
.woocommerce select {
  max-width: 100%;
}

.woocommerce #reviews #comments h2 {
  margin-bottom: 24px;
}
#reviews.cr-reviews-ajax-reviews .comment-reply-title {
  font-size: 1em;
}

#reviews.cr-reviews-ajax-reviews div.cr-ajax-reviews-cus-images-div2 {
  overflow-x: auto;
}

.woocommerce #reviews #comments ol.commentlist li .comment-text {
  border: none;
  border-top: none;
  border-radius: 0;
  background: none;
  padding: 0;
}
.woocommerce #reviews #comments .comment_container,
div.cr-ajax-reviews-sort-div,
.cr-ajax-reviews-cus-images-div {
  padding-bottom: 20px;
  margin-bottom: 20px;
  border-bottom: 1px solid #e8e8e8;
}
.woocommerce #reviews #comments ol.commentlist li img.avatar {
  padding: 0;
  width: 30px;
  height: 30px;
  background: none;
  border: none;
  border-radius: 100%;
}

span.ivole-voting-cont {
  font-size: 12px;
  margin: 10px 0px;
  color: #3d3d3d;
}

/* SUMMARY BAR */

.ivole-meter {
  background: #dddddd !important;
  height: 7px;
  border-radius: 2px;
  box-shadow: none;
}
.ivole-meter .ivole-meter-bar {
  border-radius: 2px;
  box-shadow: none;
  background: #a1a1a1 !important;
}
.ivole-meter .ivole-meter-bar:before {
  display: none;
}

/* BUTTONS */

button.cr-ajax-reviews-add-review,
#cr-ajax-reviews-sort {
  cursor: pointer;
  border-radius: 2px;
  border: 1px solid;
  padding: 12px;
  background: #ddd0 !important;
  color: #434343;
  font-size: 14px;
  font-weight: 400;
  font-family: inherit;
  transition: all 0.4s;
}
#cr-ajax-reviews-sort {
  border: none;
  padding: 0;
}
#cr-ajax-reviews-sort:focus {
  box-shadow: none;
}
#cr-ajax-reviews-sort,
button.cr-ajax-reviews-add-review:hover {
  color: black;
}

/****** WOOCORE MINICART ******/

.woocommerce .woocommerce-mini-cart__total strong,
.woocommerce .woocommerce-mini-cart span.quantity,
.woocommerce-Price-amount,
.woocommerce-mini-cart-item a,
.woocommerce ul.cart_list li dl,
.woocommerce ul.product_list_widget li dl {
  line-height: 1.5;
  font-size: 12px;
}

.widget.woocommerce.widget_shopping_cart {
  padding: 0;
  border-bottom: none;
}

.woocommerce ul.cart_list li,
.woocommerce ul.product_list_widget li {
  padding: 10px 0 10px 0 !important;
}

.woocommerce .widget_shopping_cart .total,
.woocommerce.widget_shopping_cart .total {
  border-top: none;
}

.woocommerce-mini-cart-item {
  position: relative;
}

.woocommerce ul.product_list_widget li img {
  border: 1px solid #e8e8e8;
  border-radius: 2px;
  width: 40px;
  height: 40px;
  object-fit: cover;
  object-position: center;
  float: left;
  margin-bottom: 10px;
  margin-right: 10px;
  margin-left: 0;
  margin-top: 0;
}

.woocommerce ul.product_list_widget li a {
  display: flex;
  flex-direction: row;
}

/* PRICE & QUANTITY */

.woocommerce ul.cart_list li dl,
.woocommerce ul.product_list_widget li dl {
  margin: 0 0 5px 0;
  padding-left: 0;
  border-left: 0;
  display: flex;
  flex-direction: row;
  width: 100%;
}
.woocommerce .widget_shopping_cart .cart_list li a.remove,
.woocommerce.widget_shopping_cart .cart_list li a.remove {
  color: #000 !important;
}

.woocommerce ul.cart_list li dl dt,
.woocommerce ul.product_list_widget li dl dt {
  padding: 0;
  margin: 0;
}
.woocommerce ul.cart_list li dl dd,
.woocommerce ul.product_list_widget li dl dd {
  padding: 0;
  margin: 0;
}
.woocommerce ul.cart_list li dl dd p:last-child,
.woocommerce ul.product_list_widget li dl dd p:last-child {
  margin-bottom: 0;
  margin: 0;
}

/* DROPDOWN */

.wc-menu-open {
  position: relative;
}
.wc-menu-open .wc-dropdown-cart {
  opacity: 0;
  position: absolute;
  top: 100%;
  right: 0;
  background: white;
  padding: 20px;
  transition: all 0.2s;
}
.wc-menu-open:hover .wc-dropdown-cart {
  opacity: 1;
  visibility: visible;
}

.wc-secondary-image {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  opacity: 0;
  z-index: 1;
  transition: all 0.4s !important;
}
.wc-flip-images:hover .wc-secondary-image {
  opacity: 1;
}

/****** WOOOCORE FILTERS ******/

.woocommerce .widget_price_filter .ui-slider .ui-slider-handle,
.woocommerce-page .widget_price_filter .ui-slider .ui-slider-handle {
  background: #f5f5f5;
  border: 1px solid;
  border-radius: 100%;
  -webkit-border-radius: 100%;
  -khtml-border-radius: 100%;
  -moz-border-radius: 100%;
  height: 10px;
  outline: 0 none;
  position: absolute;
  top: -4px;
  width: 10px;
  margin-left: -3px;
  z-index: 2;
}
.woocommerce .widget_price_filter .ui-slider .ui-slider-handle:last-child,
.woocommerce-page .widget_price_filter .ui-slider .ui-slider-handle:last-child {
  margin-left: -3px;
}
.woocommerce .widget_price_filter .ui-slider-horizontal,
.woocommerce-page .widget_price_filter .ui-slider-horizontal {
  height: 2px;
}

.woocommerce .woocommerce-ordering {
  margin: 0;
}
.widget.woocommerce {
  padding: 25px 0;
  border-bottom: 1px solid #e8e8e8;
}

span.count {
  opacity: 0.6;
}

/* FILTER TOGGLES */

.wc-filters .widgettitle {
  width: 100%;
  position: relative;
  display: flex;
  align-items: center;
  cursor: pointer;
  transition: all 0.4s;
}
.wc-filters .widgettitle:hover {
  opacity: 0.6;
}
.wc-filters .widgettitle:after {
  content: "-";
  width: 20px;
  height: 20px;
  position: absolute;
  top: 0;
  right: 0;
}

.wc-filters .widgettitle.visible:after {
  content: "+";
}

.wc-filters .widgettitle.visible {
  margin: 0;
}

.wc-filters .widgettitle + * {
  max-height: 1000px;
}

.wc-filters .widgettitle.visible + * {
  max-height: 0;
  overflow: hidden;
}

/* EXPAND FILTER PANEL ON TABLETS AND PHONES */

@media only screen and (max-width: 991px) {
  .wc-filters.active {
    transform: translatey(0);
  }
}

/****** SPLIDE STYLING ******/
/* GALLERY SLIDER */

ul.splide__list {
  width: 100%;
}

#primary-slider {
  margin-bottom: 10px;
}
.splide__slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.splide--nav > .splide__track > .splide__list > .splide__slide {
  border: none !important;
  opacity: 0.5;
  transition: opacity 0.6s;
}
.splide--nav > .splide__track > .splide__list > .splide__slide:hover {
  opacity: 1;
}
.splide--nav > .splide__track > .splide__list > .splide__slide.is-active {
  opacity: 1;
}

/* ARROWS STYLING */

.splide .splide__arrow,
.oxy-oxyninja-slider .splide__arrow {
  border-radius: 0;
  opacity: 0;
  background: #fff;
  box-shadow: 0 1px 5px #0000001c;
  transition: all 0.4s;
}

.splide:hover .splide__arrow,
.oxy-oxyninja-slider:hover .splide__arrow {
  opacity: 0.8;
}

.splide .splide__arrow:hover,
.oxy-oxyninja-slider .splide__arrow:hover {
  opacity: 1;
  background: #fff;
  box-shadow: 0 1px 10px #0000001c;
}

.splide .splide__arrows button:disabled,
.oxy-oxyninja-slider .splide__arrows button:disabled {
  display: none;
}

/* ARROWS APPEAR ON SLIDER HOVER */

.splide .splide__arrow--prev,
.oxy-oxyninja-slider .splide__arrow--prev {
  left: -1em;
}
.splide .splide__arrow--next,
.oxy-oxyninja-slider .splide__arrow--next {
  right: -1em;
}

.splide:hover .splide__arrow--prev,
.oxy-oxyninja-slider:hover .splide__arrow--prev {
  left: 1em;
}
.splide:hover .splide__arrow--next,
.oxy-oxyninja-slider:hover .splide__arrow--next {
  right: 1em;
}

/* ARROWS APPEARING ALL THE TIME ON PHONES */

@media only screen and (max-width: 991px) {
  .splide .splide__arrow,
  .oxy-oxyninja-slider .splide__arrow {
    opacity: 1;
  }
  .splide .splide__arrow--prev,
  .oxy-oxyninja-slider .splide__arrow--prev {
    left: 1em;
  }
  .splide .splide__arrow--next,
  .oxy-oxyninja-slider .splide__arrow--next {
    right: 1em;
  }
}

/* CAROUSEL PAGINATION */

.splide .splide__pagination,
.oxy-oxyninja-slider .splide__pagination {
  bottom: -1em;
}
.splide .splide__pagination__page,
.oxy-oxyninja-slider .splide__pagination__page {
  width: 40px;
  height: 1px;
  background: #323232;
  border-radius: 0;
  opacity: 0.2;
}
.splide .splide__pagination__page.is-active,
.oxy-oxyninja-slider .splide__pagination__page.is-active {
  background: #323232;
  transform: scale(1);
  opacity: 0.7;
}
.wc-product-gallery-1 .splide .splide__pagination,
.wc-product-gallery-2 .splide .splide__pagination,
.wc-product-gallery-1 .oxy-oxyninja-slider .splide__pagination,
.wc-product-gallery-2 .oxy-oxyninja-slider .splide__pagination {
  display: none;
}

Oxygen - Required PHP:

Similarly to the above CSS, the following PHP is necessary for the functionality of WooCore - specifically the cart counters:.

<?php
/**
 * WooCore Cart Count
 *
 * @since    3.4.1
 */

// Check if WooCommerce is active
if (function_exists('WC')) {

    // Define the function
    function woocore_cart_count($fragments)
    {
        global $woocommerce;

        if ($woocommerce->cart->get_cart_contents_count() > 0) {
            ob_start();
            echo '<span class="wc-cart-count">';
            echo WC()->cart->get_cart_contents_count();
            echo '</span>';
            $fragments['.wc-cart-count'] = ob_get_clean();
        } else {
            ob_start();
            echo '<span class="wc-cart-count">';
            echo WC()->cart->get_cart_contents_count();
            echo '</span>';
            $fragments['.wc-cart-count'] = ob_get_clean();
        }

        return $fragments;
    }

    // Add the function to the WooCommerce filter
    add_filter('woocommerce_add_to_cart_fragments', 'woocore_cart_count');
}

/**
 * WooCore MiniCart Ajax - Add
 *
 * @since    3.5.0
 */
// Check if WooCommerce is active
if (class_exists('WooCommerce')) {

    function coreframework_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 '';
                        echo esc_html($product_name);
                        echo '';
                        do_action('oxy-ninja_woocommerce_minicart_after_product_name', $_product);
                        echo function_exists('wc_get_formatted_cart_item_data')
                            ? wc_get_formatted_cart_item_data($cart_item)
                            : WC()->cart->get_item_data($cart_item);
                        echo apply_filters(
                            'woocommerce_widget_cart_item_quantity',
                            '' .
                            sprintf('%s × %s', $cart_item['quantity'], $product_price) .
                            '',
                            $cart_item,
                            $cart_item_key
                        );
                        echo apply_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-details
                        echo '';
                        if (!$_product->is_visible()) {
                            echo str_replace(['http:', 'https:'], '', $thumbnail);
                        } else {
                            echo '';
                            echo str_replace(['http:', 'https:'], '', $thumbnail);
                            echo '';
                        }
                        echo ''; // End of .woocore-mini-cart-product-image
                        echo ''; // 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 users
    add_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
 */
function coreframework_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 users
add_action('wp_ajax_coreframework_quick_view', 'coreframework_quick_view');
add_action('wp_ajax_nopriv_coreframework_quick_view', 'coreframework_quick_view');

Installation Guide for Bricks 🟨

If you are using WooCore for Bricks Builder, then you will need to have purchased the Bricks Builder Integration Addon.

Video Guide

1. Bricks Builder

Please make sure you have installed and activated Bricks Builder. You will need to navigate to Bricks → Settings → Templates → in the Remote Templates section, add an appropriate name such as 'WooCore' → and paste the URL and Password located in your dashboard after purchase.

After you have installed WooCommerce (Step 4), you can then come back to the WooCommerce Tab in the Bricks Builder Settings, and ensure everything is toggled off:

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 the Bricks Builder Integration 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'.

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 WooCommerce elements from Bricks.

5. Import Global Styles

Bricks allows you to add a theme style which we will do in this step.

Simply open any page or template in Bricks Builder, and then navigate to Settings (⚙️ Gear icon) -> Theme Styles -> Click the + icon -> click the Import icon -> Click on the 'Select Files to Import'.

Download the JSON located below, and use this file for the import. This will set up lots of global styles for use with WooCore.

Please right click on the file below, and choose 'Save Link As' to download it.

4KB

bricks-theme-style-woocore-164.json

Open

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.

Use the CSS located here.

7. Copy PHP to a Snippet Plugin:

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!

Use the PHP located here.

8. Using Templates/Pages

WooCore comes with a dozen ready-to-use templates and pages that you can import using Bricks' Template Import feature.

The available templates that Bricks Builder offers is plentiful, and we have provided example pages for all of them.

When adding pages/templates, you can find all of them available when importing our WooCore templates:

9. Additional Requirements & Plugins

We recommend adding the free version of Fluent Forms as this is what we use for the forms throughout the example templates.
Add Products to WooCommerce - in order to see the archive pages and single product pages in their true form, go ahead and add some products to WooCommerce.
Add Categories - Don't forget to add some categories as well as some category images under Products -> Categories. This will be necessary to see the Categories Element working properly on the home pages.
Add Attributes - Our archive pages make use of the filters, and for these to all work properly, you will need to set up attributes under Products -> Attributes. In our example, we use "Color" and "Size". Then, you can use these when setting up your variation products for WooCommerce.

Bricks - 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.:

/* WooCommerce my-account Page Styling -  Global CSS */

  .brxe-wc-account .woocommerce a {
    transition: all ease 0.2s;
	}

/* Buttons */
  .woocommerce-info .button {
    background: var(--dark);
    border: 1px solid var(--dark);
    font-size: var(--text-xs);
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--light)!important;
    line-height: 1.2;
    text-align: center;
  }
  
  .woocommerce-info .button:hover {
    background: var(--light);
    border: 1px solid var(--light);
    color: var(--dark)!important;
  }
  */
/* WooCommerce 8.4.0 Fix */
/*** WooCommerce introduced new CSS to 8.4.0 which changes the 
way the buttons look on the Account page.
**/

div.wc-block-components-notice-banner__content a.button{
  display: block;
  margin-top: var(--space-s)!important;
  border: none;
  width: auto;
}

div.wc-block-components-notice-banner__content a.button:hover{
  border: none;
  text-decoration-line: none;
  text-underline-position: none;
}

.wc-block-components-notice-banner > .wc-block-components-notice-banner__content .wc-forward{
  -webkit-appearance: unset!important;
  -moz-appearance: unset!important;
  appearance: unset!important;
  font-size: var(--text-xs)!important;
  background: var(--tertiary)!important;
  border: none!important;
  color: var(--light)!important;
  float: unset!important;
  opacity: unset!important;
  padding: var(--space-xs) var(--space-s) !important;
  text-decoration-line: none!important;
  text-underline-position: none!important;
}

.wc-block-components-notice-banner > .wc-block-components-notice-banner__content .wc-forward:hover{
  background: var(--tertiary-70)!important;
}
/*** End of Fix ***/

.woocommerce form.checkout_coupon, .woocommerce form.login, .woocommerce form.register {
    border: 0;
    padding: var(--space-s) 0;
    margin: 0;
}
.oxy-woo-my-account .woocommerce form.login {
    margin-top: 0;
    padding-bottom: var(--space-s);
    padding-top: var(--space-s);
}
.oxy-woo-order-tracking form, .woocommerce form.woocommerce-ResetPassword.lost_reset_password, .woocommerce .woocommerce-EditAccountForm, .woocommerce .woocommerce-address-fields, .woocommerce-cart .cart-collaterals .cart_totals table, .woocommerce .col2-set, .woocommerce-form-coupon, .woocommerce #reviews #comments ol.commentlist li .comment-text, ul.woocommerce-order-overview, .woocommerce form.login, .woocommerce form.checkout_coupon, .woocommerce table.shop_table {
    border: none;
    border-top: none;
    padding: var(--space-s) 0;
}
#rememberme {
    width: var(--space-s);
    height: var(--space-s);
}

/* End of My Account Styling */

.woocommerce #respond input#submit.added::after,
.woocommerce a.button.added::after,
.woocommerce button.button.added::after,
.woocommerce input.button.added::after {
	font-family: WooCommerce;
	content: "\e017";
	margin-left: .53em;
	vertical-align: bottom;
}

.woocommerce a.button.loading:after {
	font-family: WooCommerce;
	content: " \e01c ";
	margin-left: .53em;
	vertical-align: bottom;
	-webkit-font-smoothing: antialiased;
	font-weight: 400;
	-webkit-animation: spin 2s linear infinite;
	-moz-animation: spin 2s linear infinite;
	animation: spin 2s linear infinite;
}

.woocommerce-notices-wrapper .wc-block-components-notice-banner {
	align-items: center;
}

.woocommerce-notices-wrapper .wc-block-components-notice-banner>.wc-block-components-notice-banner__content {
	padding-right: 0;
	display: flex;
	flex-direction: row-reverse;
	align-items: center;
	gap: var(--space-s);
}

.woocommerce-notices-wrapper .wc-block-components-notice-banner>.wc-block-components-notice-banner__content .wc-forward {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	padding: var(--space-xs) var(--space-s) !important;
	background: var(--secondary) !important;
	border-color: var(--secondary-d-1) !important;
	color: var(--light) !important;
	float: unset;
	margin: unset;
	text-decoration: none;
}

.woocommerce-page .woocommerce-cart-form #coupon_code {
	font-size: var(--text-s) !important;
}

@media only screen and (max-width:768px) {
	.woocommerce-page .woocommerce-cart-form #coupon_code {
		width: 50%;
		margin-right: var(--space-xs);
	}
}

.woocommerce-page .input-text {
	font-size: var(--text-s) !important;
}

.woocommerce-page .select2-container .select2-search__field,
.woocommerce-page .select2-container .select2-selection {
	font-size: var(--text-s) !important;
}

@keyframes slideUp {
	0% {
		transform: translateY(200%);
	}

	100% {
		transform: translateY(0);
	}
}

@keyframes slideDown {
	0% {
		transform: translateY(0);
	}

	100% {
		transform: translateY(200%);
	}
}

.animate-up {
	animation: slideUp 0.5s ease forwards;
}

.animate-down {
	animation: slideDown 0.5s ease forwards!important;
}

.added-to-cart--success svg {
	color: var(--text-body);
	background-color: #4ab866;
	fill: #fff;
	border-radius: 50%;
	padding: 2px;
}

.price ins {
	text-decoration: none;
}

.woocommerce label[for="payment_method_woocommerce_payments"],
.woocommerce label[for="payment_method_bacs"],
.woocommerce label[for="payment_method_cod"] {
	display: unset;
}

.wc-img-cover,
.wc-img-cover img {
	object-fit: cover;
	object-position: center;
	width: 100%;
	height: 100%;
}

.wc-img-contain,
.wc-img-contain img {
	object-fit: contain;
	object-position: center;
	width: 100%;
	height: 100%;
}

.wc-image-grid-1 {
	display: grid !important;
	grid-template-columns: 1fr 1fr;
	grid-gap: var(--space-2xs);
}

.wc-image-grid-1 * {
	width: 100% !important;
	border-radius: 2px;
	margin: 0 !important;
}

.wc-image-grid-1 *:nth-child(1) {
	grid-column: 1 / -1;
	max-height: 800px;
	object-fit: cover;
	object-position: center;
}

.wc-grid-img {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover;
	object-position: center;
}

#ct-builder .wc-archive-item-1,
#ct-builder .wc-archive-item-2,
#ct-builder .wc-archive-item-3,
#ct-builder .wc-archive-item-4 {
	max-width: 350px;
}

.oxy-dynamic-list .oxy-product-wrapper-inner {
	height: 100%;
}

div.c-divider,
div.wc-full-divider {
	min-height: 1px !important;
}

.oxy-repeater-pages-wrap {
	grid-column: 1 / -1;
}

.oxy-product-info h2 {
	margin-bottom: var(--space-s) !important;
}

.widget_top_rated_products h2,
.woocommerce .widget_shopping_cart h2,
.woocommerce .widget_products h2,
.woocommerce .widget_product_categories h2,
.woocommerce .widget_layered_nav_filters h2,
.woocommerce .woocommerce-widget-layered-nav h2,
.woocommerce .widget_rating_filter h2,
.woocommerce .widget_price_filter h2,
.woocommerce div.widget_product_tag_cloud h2,
.woocommerce h1.page-title,
.woocommerce h1.product_title,
.woocommerce section.related.products h2,
.woocommerce section.upsells.products h2,
.woocommerce h2.woocommerce-Reviews-title,
.woocommerce span.comment-reply-title,
.woocommerce-Tabs-panel h2,
h2.woocommerce-order-downloads__title,
.woocommerce-orders article header h1,
.woocommerce-account article header h1,
.woocommerce-downloads article header h1,
.woocommerce-edit-address article header h1,
.woocommerce-account h2,
.woocommerce-Address-title h3,
.woocommerce-MyAccount-content h3,
.woocommerce-EditAccountForm legend,
h1.bricks-woo-archive-title,
h2.woocommerce-column__title,
h2.woocommerce-order-downloads__title,
h2.woocommerce-order-details__title,
.woocommerce-billing-fields h3,
.woocommerce-checkout h3,
.woocommerce .cart_totals h2,
.woocommerce .cross-sells h2 {
	color: inherit;
	font-weight: inherit;
	line-height: inherit;
}

.woocommerce .price_label .from,
.woocommerce .price_label .to,
.woocommerce ul.products li.product .price,
.product-quantity,
.woocommerce .price ins,
.woocommerce-Price-amount,
.woocommerce-loop-category__title .count,
.woocommerce .price {
	font-weight: 600;
}

.woocommerce a.added_to_cart {
	display: none !important;
}

.wc-price-container .price {
	display: flex;
	flex-direction: row;
	align-items: center;
}

.wc-price-container .price>del {
	order: 2;
}

.wc-price-container .price>ins {
	padding-right: 10px;
}

.wc-cat-list-1 .woocommerce .products ul::after,
.wc-cat-list-1 .woocommerce .products ul::before,
.wc-cat-list-1 .woocommerce ul.products::after,
.wc-cat-list-1 .woocommerce ul.products::before {
	display: none;
}

.wc-cat-list-1 .columns-4 {
	display: inline;
}

.wc-cat-list-1.bricks-woo-product-categories .woocommerce ul.products li.product-category a img {
	margin-bottom: 0;
}

.wc-cat-list-1.bricks-woo-product-categories .woocommerce ul.products li.product a {
	align-items: center;
	display: grid;
	grid-template-columns: var(--space-2xl) 1fr;
	grid-gap: var(--space-s);
	background: #fff;
	border-radius: 0;
	overflow: hidden;
	padding: 0;
	box-shadow: 0 var(--space-4xs) var(--space-2xs) #00000017;
	transition: all 0.3s;
}

.wc-cat-list-1.bricks-woo-product-categories .woocommerce ul.products li.product a:hover {
	transform: translatey(-3px);
	box-shadow: 0 var(--space-2xs) var(--space-s) #00000017;
}

.wc-cat-list-1.bricks-woo-product-categories .woocommerce ul.products li.product,
.wc-cat-list-1.woocommerce-page ul.products li.product {
	width: 100%;
	padding: 0;
	margin: 0;
}

.wc-cat-list-1.bricks-woo-product-categories .woocommerce ul.products {
	display: grid;
	width: 100%;
	grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
	grid-gap: vsr(--space-s);
	margin: 0;
}

.tab-accordion {
	border: 1px solid #e8e8e8;
	background: none;
	width: 100%;
	justify-content: center;
	margin-bottom: var(--space-s);
}

.wc-sale-badge,
.wc-new-badge {
	display: block;
	background: var(--light);
	color: var(--dark);
	text-transform: uppercase;
	letter-spacing: 1px;
	font-size: var(--text-xs);
	font-weight: 700;
	padding: var(--space-4xs) var(--space-3xs);
	box-shadow: var(--shadow-s);
	margin: var(--space-4xs);
	opacity: .8;
}

.wc-sale-badge {
	background: var(--dark);
	color: var(--light);
}

.wc-archive-item-1 img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: all 0.6s !important;
}

@media only screen and (min-width:992px) {
	.wc-archive-item-1-content {
		opacity: 0;
	}

	.wc-archive-item-1-title {
		transform: translateY(-25px);
	}

	.wc-archive-item-1-price {
		transform: translateY(25px);
	}

	.wc-archive-item-1:hover img {
		transform: scale(1.2);
		opacity: .1;
	}

	.wc-archive-item-1:hover .wc-archive-item-1-content {
		opacity: 1;
	}

	.wc-archive-item-1:hover .wc-archive-item-1-title,
	.wc-archive-item-1:hover .wc-archive-item-1-price {
		transform: translatey(0);
	}
}

.wc-archive-item-2 .add_to_cart_inline {
	margin: 0;
}

.wc-archive-item-2 .atc-code-block {
	position: absolute;
	bottom: 0;
	left: 0;
	z-index: 3;
	transition: all 0.6s;
}

.wc-archive-item-2 .woocommerce a.button {
	width: 100%;
	padding: var(--space-2xs);
	background-color: rgba(0, 0, 0, .4);
	border: none;
	border-radius: 0;
	font-size: var(--text-xs);
	font-weight: 500;
	text-align: center;
	text-transform: uppercase;
	letter-spacing: 1px;
	color: #fff;
	margin: 0;
}

.wc-archive-item-2 .woocommerce a.button:hover {
	background-color: rgba(0, 0, 0, .6);
}

@media only screen and (min-width:992px) {
	.wc-archive-item-2 .atc-code-block {
		transform: translatey(100%);
	}

	.wc-archive-item-2:hover .atc-code-block {
		transform: translatey(0);
	}
}

.wc-archive-item-2-img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

/* ARCHIVE STYLE 3 */

.wc-archive-item-3 .woocommerce a.button {
  max-width: 150px;
  padding: 10px;
  background-color: rgba(0,0,0,0.1);
  border: none;
  border-radius: 2px;;
  font-size: 11px;
  font-weight: 500;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: grey;
  transition: all 1s;
  margin: 0;
}

.wc-archive-item-3 .add_to_cart_inline {
  display:flex;
  justify-content: center;
}
.wc-archive-item-3 .woocommerce a.button:hover {
  background-color: rgba(0,0,0,0.5);
  color: white;
}

.wc-archive-item-3-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.wc-archive-item-4 .woocommerce a.button {
	padding: var(--space-2xs);
	background-color: rgba(0, 0, 0, .1);
	border: none;
	border-radius: var(--radius-xs);
	font-size: var(--text-xs);
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 1px;
	color: grey;
	transition: all 1s;
	margin: 0;
}

.wc-archive-item-4 .woocommerce a.button:hover {
	background-color: rgba(0, 0, 0, .5);
	color: #fff;
}

.wc-archive-item-4-img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

.woocommerce-notices-wrapper {
	position: fixed;
	bottom: var(--space-s);
	right: var(--space-s);
	z-index: 100;
	transition: all 0.6s;
	animation: slide-up-fade-in ease 1s;
	animation-iteration-count: 1;
	transform-origin: 50% 50%;
	animation-fill-mode: forwards;
	opacity: 0;
	width: auto;
}

.woocommerce-notices-wrapper .woocommerce-message{
	background-color: var(--bg-surface);
}

.woocommerce-notices-wrapper .woocommerce-message a{
	background-color: var(--dark);
	color: var(--light);
}

.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	border: none;
	box-shadow: 0 var(--space-4xs) var(--space-xs) #00000017;
	border-radius: 2px;
	background: var(--bg-surface);
	z-index: 100;
	transition: all 0.6s;
	width: auto;
}

.woocommerce-notices-wrapper .woocommerce-message{
	justify-content: flex-start;
}

.woocommerce-message .button,
.woocommerce-info .button,
.woocommerce-error .button {
	margin-left: var(--space-s) !important;
	order: 5;
}

.woocommerce-error::before,
.woocommerce-info::before,
.woocommerce-message::before {
	top: auto;
	left: 1.5em;
}

.showcoupon {
	padding: var(--space-4xs);
}

@keyframes slide-up-fade-in {
	0% {
		opacity: 0;
		transform: translatey(200px);
	}

	100% {
		opacity: 1;
		transform: translatey(0);
	}
}

@keyframes slide-down-fade-in {
	0% {
		opacity: 1;
		transform: translatey(0);
	}

	100% {
		opacity: 0;
		transform: translatey(200px);
	}
}

.hide-notification:not(.bricks-woo-checkout) {
	animation: slide-down-fade-in ease 1s;
	animation-iteration-count: 1;
	transform-origin: 50% 50%;
	animation-fill-mode: forwards;
}

.woocommerce div.product p.price {
	font-weight: 400;
	font-size: var(--text-l);;
	color: #303030;
}

ul.variable-items-wrapper {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	padding: 0;
	margin: 0 0 var(--space-2xs) 0;
}

ul.variable-items-wrapper li {
	list-style-type: none;
	padding: var(--spce-4xs) var(--space-xs);
	border: 1px solid #e8e8e8;
	background: #fff;
	border-radius: 2px;
	margin-right: var(--space-2xs);
	margin-bottom: var(--space-xs);
	font-size: var(--text-xs);
	font-weight: 500;
}

ul.variable-items-wrapper li.color-variable-item {
	padding: 2px;
}

ul.variable-items-wrapper .variable-item-span-color {
	width: var(--space-s);
	height: var(--space-s);
	border-radius: 2px;
	display: block;
}

ul.variable-items-wrapper li:hover,
ul.variable-items-wrapper li.selected {
	border: 1px solid grey;
}

ul.variable-items-wrapper li:focus {
	outline: none;
}

ul.variable-items-wrapper li.disabled {
	transition: al 0.6s;
	opacity: .3;
	cursor: not-allowed;
}

ul.variable-items-wrapper li.disabled:hover {
	border: 1px solid #e8e8e8;
}

.woocommerce textarea,
.woocommerce input,
.woocommerce select {
	max-width: 100%;
}

.woocommerce #reviews #comments h2 {
	margin-bottom: var(--space-m);
}

#reviews.cr-reviews-ajax-reviews .comment-reply-title {
	font-size: 1em;
}

#reviews.cr-reviews-ajax-reviews div.cr-ajax-reviews-cus-images-div2 {
	overflow-x: auto;
}

.woocommerce #reviews #comments ol.commentlist li .comment-text {
	border: none;
	border-top: none;
	border-radius: 0;
	background: none;
	padding: 0;
}

.woocommerce #reviews #comments .comment_container,
div.cr-ajax-reviews-sort-div,
.cr-ajax-reviews-cus-images-div {
	padding-bottom: var(--space-s);
	margin-bottom: var(--space-s);
	border-bottom: 1px solid #e8e8e8;
}

.woocommerce #reviews #comments ol.commentlist li img.avatar {
	padding: 0;
	width: vr(--space-m);
	height: var(--space-m);
	background: none;
	border: none;
	border-radius: 100%;
}

span.ivole-voting-cont {
	font-size: var(--text-xs);
	margin: var(--space-2xs) 0;
	color: #3d3d3d;
}

.ivole-meter {
	background: #dddddd !important;
	height: var(--space-3xs);
	border-radius: 2px;
	box-shadow: none;
}

.ivole-meter .ivole-meter-bar {
	border-radius: 2px;
	box-shadow: none;
	background: #a1a1a1 !important;
}

.ivole-meter .ivole-meter-bar:before {
	display: none;
}

button.cr-ajax-reviews-add-review,
#cr-ajax-reviews-sort {
	cursor: pointer;
	border-radius: 2px;
	border: 1px solid;
	padding: var(--space-xs);
	background: #ddd0 !important;
	color: #434343;
	font-size: var(--text-s);
	font-weight: 400;
	font-family: inherit;
	transition: all 0.4s;
}

#cr-ajax-reviews-sort {
	border: none;
	padding: 0;
}

#cr-ajax-reviews-sort:focus {
	box-shadow: none;
}

#cr-ajax-reviews-sort,
button.cr-ajax-reviews-add-review:hover {
	color: #000;
}

.woocommerce .woocommerce-mini-cart__total strong,
.woocommerce .woocommerce-mini-cart span.quantity,
.woocommerce-Price-amount,
.woocommerce-mini-cart-item a,
.woocommerce ul.cart_list li dl,
.woocommerce ul.product_list_widget li dl {
	line-height: 1.5;
}

.widget.woocommerce.widget_shopping_cart {
	padding: 0;
	border-bottom: none;
}

.woocommerce ul.cart_list li,
.woocommerce ul.product_list_widget li {
	padding: var(--space-2xs) 0 var(--space-2xs) 0 !important;
}

.woocommerce .widget_shopping_cart .total,
.woocommerce.widget_shopping_cart .total {
	border-top: none;
}

.woocommerce-mini-cart-item {
	position: relative;
}

.woocommerce ul.product_list_widget li img {
	border: 1px solid #e8e8e8;
	border-radius: 2px;
	width: var(--spce-l);
	height: var(--space-l);
	object-fit: cover;
	object-position: center;
	float: left;
	margin-bottom: var(--space-2xs);
	margin-right: var(--space-2xs);
	margin-left: 0;
	margin-top: 0;
}

.woocommerce ul.product_list_widget li a {
	display: flex;
	flex-direction: row;
}

.woocommerce ul.cart_list li dl,
.woocommerce ul.product_list_widget li dl {
	margin: 0 0 var(--space-4xs) 0;
	padding-left: 0;
	border-left: 0;
	display: flex;
	flex-direction: row;
	width: 100%;
}

.woocommerce .widget_shopping_cart .cart_list li a.remove,
.woocommerce.widget_shopping_cart .cart_list li a.remove {
	color: #000 !important;
}

.woocommerce ul.cart_list li dl dt,
.woocommerce ul.product_list_widget li dl dt {
	padding: 0;
	margin: 0;
}

.woocommerce ul.cart_list li dl dd,
.woocommerce ul.product_list_widget li dl dd {
	padding: 0;
	margin: 0;
}

.woocommerce ul.cart_list li dl dd p:last-child,
.woocommerce ul.product_list_widget li dl dd p:last-child {
	margin-bottom: 0;
	margin: 0;
}

.wc-menu-open {
	position: relative;
}

.wc-menu-open .wc-dropdown-cart {
	opacity: 0;
	position: absolute;
	top: 100%;
	right: 0;
	background: #fff;
	padding: var(--space-s);
	transition: all 0.2s;
}

.wc-menu-open:hover .wc-dropdown-cart {
	opacity: 1;
	visibility: visible;
}

.wc-secondary-image {
	position: absolute;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	opacity: 0;
	z-index: 1;
	transition: all 0.4s !important;
}

.wc-flip-images:hover .wc-secondary-image {
	opacity: 1;
}

.woocommerce .widget_price_filter .ui-slider .ui-slider-handle,
.woocommerce-page .widget_price_filter .ui-slider .ui-slider-handle {
	background: #f5f5f5;
	border: 1px solid;
	border-radius: 100%;
	-webkit-border-radius: 100%;
	-khtml-border-radius: 100%;
	-moz-border-radius: 100%;
	height: var(--space-2xs);
	outline: 0 none;
	position: absolute;
	top: calc(0% - var(--spce-4xs));
	width: 10px;
	margin-left: calc(0% - var(--spce-4xs));
	z-index: 2;
}

.woocommerce .widget_price_filter .ui-slider .ui-slider-handle:last-child,
.woocommerce-page .widget_price_filter .ui-slider .ui-slider-handle:last-child {
	margin-left: calc(0% - var(--spce-4xs));
}

.woocommerce .widget_price_filter .ui-slider-horizontal,
.woocommerce-page .widget_price_filter .ui-slider-horizontal {
	height: 2px;
}

.woocommerce .woocommerce-ordering {
	margin: 0;
}

.widget.woocommerce {
	padding: var(--space-m) 0;
	border-bottom: 1px solid #e8e8e8;
}

span.count {
	opacity: .6;
}

.wc-filters .widgettitle {
	width: 100%;
	position: relative;
	display: flex;
	align-items: center;
	cursor: pointer;
	transition: all 0.4s;
}

.wc-filters .widgettitle:hover {
	opacity: .6;
}

.wc-filters .widgettitle:after {
	content: "-";
	width: var(--space-s);
	height: var(--space-s);
	position: absolute;
	top: 0;
	right: 0;
}

.wc-filters .widgettitle.visible:after {
	content: "+";
}

.wc-filters .widgettitle.visible {
	margin: 0;
}

.wc-filters .widgettitle+* {
	max-height: 1000px;
}

.wc-filters .widgettitle.visible+* {
	max-height: 0;
	overflow: hidden;
}

@media only screen and (max-width:991px) {
	.wc-filters.active {
		transform: translatey(0);
	}
}

ul.splide__list {
	width: 100%;
}

#primary-slider {
	margin-bottom: 10px;
}

.splide__slide img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

.splide--nav>.splide__track>.splide__list>.splide__slide {
	border: none !important;
	opacity: .5;
	transition: opacity 0.6s;
}

.splide--nav>.splide__track>.splide__list>.splide__slide:hover {
	opacity: 1;
}

.splide--nav>.splide__track>.splide__list>.splide__slide.is-active {
	opacity: 1;
}

.splide .splide__arrow,
.oxy-oxyninja-slider .splide__arrow {
	border-radius: 0;
	opacity: 0;
	background: #fff;
	box-shadow: 0 1px 5px #0000001c;
	transition: all 0.4s;
}

.splide:hover .splide__arrow,
.oxy-oxyninja-slider:hover .splide__arrow {
	opacity: .8;
}

.splide .splide__arrow:hover,
.oxy-oxyninja-slider .splide__arrow:hover {
	opacity: 1;
	background: #fff;
	box-shadow: 0 1px var(--space-2xs) #0000001c;
}

.splide .splide__arrows button:disabled,
.oxy-oxyninja-slider .splide__arrows button:disabled {
	display: none;
}

.splide .splide__arrow--prev,
.oxy-oxyninja-slider .splide__arrow--prev {
	left: -1em;
}

.splide .splide__arrow--next,
.oxy-oxyninja-slider .splide__arrow--next {
	right: -1em;
}

.splide:hover .splide__arrow--prev,
.oxy-oxyninja-slider:hover .splide__arrow--prev {
	left: 1em;
}

.splide:hover .splide__arrow--next,
.oxy-oxyninja-slider:hover .splide__arrow--next {
	right: 1em;
}

@media only screen and (max-width:991px) {

	.splide .splide__arrow,
	.oxy-oxyninja-slider .splide__arrow {
		opacity: 1;
	}

	.splide .splide__arrow--prev,
	.oxy-oxyninja-slider .splide__arrow--prev {
		left: 1em;
	}

	.splide .splide__arrow--next,
	.oxy-oxyninja-slider .splide__arrow--next {
		right: 1em;
	}
}

.splide .splide__pagination,
.oxy-oxyninja-slider .splide__pagination {
	bottom: -1em;
}

.splide .splide__pagination__page,
.oxy-oxyninja-slider .splide__pagination__page {
	width: var(--space-l);
	height: 1px;
	background: #323232;
	border-radius: 0;
	opacity: .2;
}

.splide .splide__pagination__page.is-active,
.oxy-oxyninja-slider .splide__pagination__page.is-active {
	background: #323232;
	transform: scale(1);
	opacity: .7;
}

.wc-product-gallery-1 .splide .splide__pagination,
.wc-product-gallery-2 .splide .splide__pagination,
.wc-product-gallery-1 .oxy-oxyninja-slider .splide__pagination,
.wc-product-gallery-2 .oxy-oxyninja-slider .splide__pagination {
	display: none;
}

  /* Error Notices Styling */
  ul.woocommerce-error{
  	display: flex;
    flex-direction: column;
    align-items: flex-start;
  }

/* Style WooCommerce Quantity Box */
.quantity .qty, .quantity .action {
  border: 1px solid var(--dark-20);
}

 form.cart .quantity .plus:hover svg, form.cart .quantity .minus:hover svg {
  stroke: var(--text-title);
}

/****** WOOCORE REVIEWS ******/
/* Styles for Review Plugin */

.cr-ajax-reviews-review-form .cr-review-form-wrap .cr-review-form-nav {
    border-top: 1px solid var(--dark-10) !important;
    border-bottom: 1px solid var(--dark-10) !important;
}

.cr-ajax-reviews-review-form .cr-review-form-wrap .cr-review-form-nav .cr-nav-left svg,
.cr-ajax-reviews-review-form .cr-review-form-wrap .cr-review-form-nav .cr-nav-left span {
    fill: var(--text-body) !important;
    color: var(--text-body) !important;
    font-size: var(--text-m) !important;
}

.cr-ajax-reviews-review-form .cr-review-form-item span {
    font-size: var(--text-l) !important;
    color: var(--text-body) !important;
}

.cr-ajax-reviews-review-form .cr-review-form-comment .cr-review-form-lbl,
.cr-ajax-reviews-review-form .cr-review-form-name .cr-review-form-lbl,
.cr-ajax-reviews-review-form .cr-review-form-email .cr-review-form-lbl {
    background-color: var(--bg-surface) !important;
    color: var(--text-body) !important;
    font-size: var(--text-s) !important;
}

.cr-ajax-reviews-review-form .cr-review-form-comment .cr-review-form-comment-txt,
.cr-ajax-reviews-review-form .cr-review-form-ne .cr-review-form-name input,
.cr-ajax-reviews-review-form .cr-review-form-ne .cr-review-form-email input {
    border: 1px solid var(--dark-10) !important;
    background-color: var(--bg-surface) !important;
    color: var(--text-body) !important;
}

.cr-ajax-reviews-review-form .cr-review-form-buttons .cr-review-form-submit {
    background-color: var(--dark) !important;
    color: var(--light) !important;
    font-size: var(--text-s) !important;
    border: 1px solid var(--dark-10) !important;
    transition-duration: 0.3s !important;
    font-weight: 300 !important;
    text-transform: uppercase !important;
}

.cr-ajax-reviews-review-form .cr-review-form-buttons .cr-review-form-submit:hover {
    background-color: var(--primary) !important;
    color: var(--light) !important;
    border: 1px solid var(--light-10) !important;
}

/* SUMMARY BAR */

.ivole-meter {
    background: var(--dark-10) !important;
    height: 7px;
    border-radius: 2px;
    box-shadow: none;
}

.ivole-meter .ivole-meter-bar {
    border-radius: 2px;
    box-shadow: none;
    background: var(--primary) !important;
}

.ivole-meter .ivole-meter-bar:before {
    display: none;
}

/* BUTTONS */

button.cr-ajax-reviews-add-review, #cr-ajax-reviews-sort {
    cursor: pointer;
    border-radius: 2px;
    border: 1px solid;
    padding: 12px;
    background: #ddd0 !important;
    color: #434343;
    font-size: 14px;
    font-weight: 400;
    font-family: inherit;
    transition: all 0.4s;
}

#cr-ajax-reviews-sort {
    border: none;
    padding: 0;
}

#cr-ajax-reviews-sort:focus {
    box-shadow: none;
}

#cr-ajax-reviews-sort,
button.cr-ajax-reviews-add-review:hover {
    color: black;
}

/****** WOOCORE REVIEWS (with review) ******/

.woocommerce textarea,
.woocommerce input,
.woocommerce select {
    max-width: 100%;
}

#reviews .cr-summaryBox-wrap {
    background-color: transparent;
    color: var(--text-body) !important;
}

#reviews .cr-summaryBox-wrap .cr-average-rating,
#reviews .cr-summaryBox-wrap .cr-total-rating-count,
#reviews .cr-count-row,
.cr-reviews-ajax-reviews .cr-ajax-reviews-sort-div .cr-ajax-reviews-sort,
#reviews #comments .cr-ajax-reviews-list .meta .woocommerce-review__verified {
    color: var(--text-body) !important;
}

#reviews #comments .meta .woocommerce-review__author {
    color: var(--text-title) !important;
}

#reviews .cr-ajax-reviews-add-review {
    color: var(--light)!important;
    background-color: var(--dark) !important;
    border-radius: 0;
    text-transform: uppercase;
}

#reviews .cr-input-text, 
.cr-all-reviews-shortcode .cr-ajax-search .cr-input-text, 
.cr-ajax-search input[type="text"] {
    background-color: var(--bg-surface)!important;
    border: 1px solid var(--dark-10)!important;
}

.cr-all-reviews-shortcode .cr-count-row,
#reviews .cr-count-row {
    background-color: var(--bg-surface)!important;
}

.cr-histogramTable tr.ivole-histogramRow .ivole-histogram-a {
    color: var(--text-title)!important;
}

.woocommerce #reviews #comments h2 {
    margin-bottom: 24px;
}

#reviews.cr-reviews-ajax-reviews #comments.cr-reviews-ajax-comments .cr-ajax-reviews-list .review .comment-text{
  border-bottom: unset!important;
}

#reviews .comment-reply-title {
    font-size: 1em;
}

#reviews .cr-ajax-reviews-cus-images-div2 {
    overflow-x: auto;
}

.woocommerce #reviews #comments ol.commentlist li .comment-text {
    border: none;
    background: none;
    padding: 0;
}

.woocommerce #reviews #comments .comment_container,
div.cr-ajax-reviews-sort-div,
.cr-ajax-reviews-cus-images-div {
    padding-bottom: 20px;
    margin-bottom: 20px;
    border-bottom: 1px solid var(--dark-10)!important;
}

.woocommerce #reviews #comments ol.commentlist li img.avatar {
    padding: 0;
    width: 30px;
    height: 30px;
    background: none;
    border: none;
    border-radius: 100%;
}

span.ivole-voting-cont {
    font-size: 12px;
    margin: 10px 0;
    color: #3d3d3d;
}

Bricks - Required PHP:

Similarly to the above CSS, the following PHP is necessary for the functionality of WooCore - specifically the cart counters:

/**
 * WooCore Cart Count
 *
 * @since    3.4.1
 */

// Check if WooCommerce is active
if (function_exists('WC')) {

    // Define the function
    function woocore_cart_count($fragments)
    {
        global $woocommerce;

        if ($woocommerce->cart->get_cart_contents_count() > 0) {
            ob_start();
            echo '<span class="wc-cart-count">';
            echo WC()->cart->get_cart_contents_count();
            echo '</span>';
            $fragments['.wc-cart-count'] = ob_get_clean();
        } else {
            ob_start();
            echo '<span class="wc-cart-count">';
            echo WC()->cart->get_cart_contents_count();
            echo '</span>';
            $fragments['.wc-cart-count'] = ob_get_clean();
        }

        return $fragments;
    }

    // Add the function to the WooCommerce filter
    add_filter('woocommerce_add_to_cart_fragments', 'woocore_cart_count');
}

/**
 * WooCore MiniCart Ajax - Add
 *
 * @since    3.5.0
 */
// Check if WooCommerce is active
if (class_exists('WooCommerce')) {

    function coreframework_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 '';
                        echo esc_html($product_name);
                        echo '';
                        do_action('oxy-ninja_woocommerce_minicart_after_product_name', $_product);
                        echo function_exists('wc_get_formatted_cart_item_data')
                            ? wc_get_formatted_cart_item_data($cart_item)
                            : WC()->cart->get_item_data($cart_item);
                        echo apply_filters(
                            'woocommerce_widget_cart_item_quantity',
                            '' .
                            sprintf('%s × %s', $cart_item['quantity'], $product_price) .
                            '',
                            $cart_item,
                            $cart_item_key
                        );
                        echo apply_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-details
                        echo '';
                        if (!$_product->is_visible()) {
                            echo str_replace(['http:', 'https:'], '', $thumbnail);
                        } else {
                            echo '';
                            echo str_replace(['http:', 'https:'], '', $thumbnail);
                            echo '';
                        }
                        echo ''; // End of .woocore-mini-cart-product-image
                        echo ''; // 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 users
    add_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
 */
function coreframework_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 users
add_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:

Untick "Enable default stylesheet"
Tick "Convert default dropdowns to button type"

PreviousViolet NextStyle Guide

Last updated 1 year ago