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:

Just Bricks

: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);
}

Automatic CSS

.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);
}