SOLVED: WooCommerce VIew Cart Message

Bugs
1

Bricks Version: 1.3.1
Browser: Chrome 90
OS: macOS / Windows / Linux / etc.

The ‘View Cart’ Woo message that appears after a product is added to cart seems to be missing from the Single Product builder elements - is this scheduled for a future release?

woomessage

2

Hello @neilg

I confirm the message is missing. We’re investigating and it will be added soon.

Thank you.

3

@luistinygod Any update regarding this? Has it been released yet?

4

Hello @Syahrenzy ,

Yes, this issue was fixed in the Bricks 1.3.3 release: Changelog – Bricks.

5

@luistinygod Sorry, I understood the bug report incorrectly so my question was wrong

So the bug is only reporting the missing woo message (not the element), while I am searching how to place/style it (the woo message) in the add to cart element…

Is this possible?

6

Hello @Syahrenzy

The Cart page already contains the WooCommerce notification wrapper, inserted automatically by Woo.

<div class="woocommerce-notices-wrapper">
    <div class="woocommerce-message" role="alert">
		Cart updated.	
    </div>
</div>

We still don’t have this part as a separated element that you could place and style. Until then, you can override the default styles with custom CSS. Just inspect the element with right-click > inspect element, check the applied classes and styles, and override them in your custom CSS.

In the meantime, you could also suggest it as a new idea under Bricks ideas board: Ideas – Bricks

7

Is the styling of the Woo cart messages still to be done with custom CSS?

I cannot see any other way to edit the notices although they do have bricks variables in the CSS. But I can’t track this variable down to change it. I feel like I’m missing something very basic!

8

Hey Dale,
Welcome to the forum!

You can change the success, alert, … colors within the theme styles (Theme Styles » Colors) or simply override them.

Success message example:

.woocommerce-notices-wrapper .woocommerce-message {
  background-color: green;
  color: yellow;
  /* Override the variables 
  --bricks-bg-success: red;
  --bricks-text-success: yellow;
  */
}

Best regards,
timmse

9

How can I style or remove this notification? I seriously need it.

10

I’m having problems with this message too when using the “sticky” header.
As the message alert is added as the first

to the main, it appears behind the header. I moved it using z-index but is so weird to fix this.

Isn’t there any other way to do this? So annoying.

11

Hey Leandro,
Can you provide me with a live link?

12

Oh It’s a local environment.
I just fixed it adding 3 lines of JS Screenshot - d68d256d47261e0b6672fc46312c5b4c - Gyazo
Screenshot - f5ee1a66d51e0ca7e73f611b072086b9 - Gyazo

Thanks for your reply Timmse

13

Ok, then we won’t consider it a problem for now, because I can’t understand it. But I’m glad you could solve it!

14

I’m not sure if I understood correctly but where can I find the woocommerce message colors explicitly under the theme styles?
have found only the regular colors (see screenshot) and these are not working for woo message colors on cart and checkout.

Bildschirm­foto 2023-04-26 um 20.38.36
Bildschirm­foto 2023-04-26 um 20.38.36624×1312 78.4 KB

15

Hey Sawan,
Currently, there are no dedicated settings to change the Woo notice colors, and they are not picking up the Theme Style Colors.

But you can surely override and change them to your liking. These are the defaults. Place the following code in Bricks » Settings » Custom Code » Custom CSS and change it accordingly.

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

.woocommerce-error {
    background-color: var(--bricks-bg-danger);
    color: var(--bricks-text-danger);
}

.woocommerce-error .button {
    background-color: var(--bricks-text-danger)!important;
    color: #fff!important;
}

.woocommerce-info {
    background-color: var(--bricks-bg-info);
    color: var(--bricks-text-info);
}

.woocommerce-info .button {
    background-color: var(--bricks-text-info)!important;
    color: #fff!important;
}
1 Like
16

Alright, thank you :pray: