Bricks Boilerplate Documentation
PricingDemo
  • Intro
  • Getting Started
    • Requirements
    • 5 minutes launch ⚡
    • Import into an existing project
  • Basics
    • Inside the package
    • Global Styles
      • General
      • CSS Variables
      • Buttons
      • Utility classes
    • Templates
    • ACF
      • Global topbar
    • Bricks Boilerplate Addon plugin
      • Wishlist
      • Variation swatches
      • Checkout
    • Code snippets
  • Tutorials
    • Blog in 5 minutes
    • Custom Off-canvas cart
    • Off-canvas cart without addon plugin
    • Custom Thank you page
    • Custom Checkout page
    • Custom Cart page
    • My account page
    • Product gallery with thumbnails
    • Custom query for product reviews
  • Advanced
    • Custom slider controls
    • Custom accordions
    • Megamenu
    • GSAP animations
  • Common issues
    • Custom CSS
    • Product galleries
    • Restoring site with WPvivid
Powered by GitBook
On this page
  1. Common issues

Custom CSS

When you import some WooCommerce templates that include the Woo Notice element into an existing project, they might look different from the demo. This is because we used custom CSS to style them, which was added in Bricks Settings > Custom CSS.

Copy the code below and place it there:

:where(p) {
    margin: 0;
}

/* Woocommerce buttons */
.woocommerce .button {
  transition: var(--bt-transition-medium);
  min-height: unset;
}

.woocommerce .button:hover {
  box-shadow: 0px 24px 48px 0 rgba(0, 0, 0, 0.1);
}

.woocommerce .button.disabled {
  background-color: var(--bt-neutral-6);
  color: var(--bt-neutral-9);
  border-color: var(--bt-neutral-6);
}

/* Woocommerce notices */
.woocommerce-error, .woocommerce-info, .woocommerce-message {
  position: relative;
}

.woocommerce-error:before {
  content: "\f268";
  font-size: var(--bt-text-l);
  display: inline-block;
  font-family: Ionicons;
  font-style: normal;
  font-variant: normal;
  font-weight: 400;
  line-height: 1;
  text-transform: none;
  position: absolute;
  left: var(--bt-space-xs);
}

.woocommerce-info:before {
  content: "\f1a0";
  font-size: var(--bt-text-l);
  display: inline-block;
  font-family: Ionicons;
  font-style: normal;
  font-variant: normal;
  font-weight: 400;
  line-height: 1;
  text-transform: none;
  position: absolute;
  left: var(--bt-space-xs);
}

.woocommerce-message:before {
  content: "\f14a";
  font-size: var(--bt-text-l);
  display: inline-block;
  font-family: Ionicons;
  font-style: normal;
  font-variant: normal;
  font-weight: 400;
  line-height: 1;
  text-transform: none;
  position: absolute;
  left: var(--bt-space-xs);
}

.woocommerce .button.disabled {
  background-color: var(--neutral-light);
  color: var(--neutral-semi-dark);
  border-color: var(--neutral-light);
}

/* Woocommerce notices */
.woocommerce-error, .woocommerce-info, .woocommerce-message {
  position: relative;
}

.woocommerce-error:before {
  content: "\f268";
  font-size: var(--text-l);
  display: inline-block;
  font-family: Ionicons;
  font-style: normal;
  font-variant: normal;
  font-weight: 400;
  line-height: 1;
  text-transform: none;
  position: absolute;
  left: var(--space-xs);
}

.woocommerce-info:before {
  content: "\f1a0";
  font-size: var(--text-l);
  display: inline-block;
  font-family: Ionicons;
  font-style: normal;
  font-variant: normal;
  font-weight: 400;
  line-height: 1;
  text-transform: none;
  position: absolute;
  left: var(--space-xs);
}

.woocommerce-message:before {
  content: "\f14a";
  font-size: var(--text-l);
  display: inline-block;
  font-family: Ionicons;
  font-style: normal;
  font-variant: normal;
  font-weight: 400;
  line-height: 1;
  text-transform: none;
  position: absolute;
  left: var(--space-xs);
}

PreviousGSAP animationsNextProduct galleries

Last updated 6 months ago