SOLVED: Woocommerce Notice element not working on Checkout Template

Browser: Chrome 114
OS: Windows

I have the impression that the Notice element doesn’t work on the Woocommerce checkout page.

There is always the notice: woocommerce-NoticeGroup woocommerce-NoticeGroup-checkout, which is located at the very top of the template (cannot be modified).



1 Like

Hi @alothbrok7 ,

Thanks for checking with us.

Unfortunately, this notice was created by WooCommerce checkout.js Script whenever there is an error while checkout submission. It always add a new div inside the checkout form.

You can try to do a test like visit your checkout page with add-to-cart param (with valid product ID)
https://yoursite/checkout/?add-to-cart=123

Then you should be able to see your Woo notice element showing as per your desired location.

You should be able to style your Woo notice through the Theme style as well.

Regards,
Jenn

OK, I understand, but then the notice element can’t be used for the checkout page ? Or in very rare cases @itchycode

1.Having the same issue with the checkout page specifically.

  1. When there are no notices the div still exists (on checkout page). I’ve tried adding conditions but there are none that exist for this, unless I’m mistaken?
1 Like

I can confirm the issue. Experiancing exactly the same thing. Hope this can be fixed soon!

2 Likes

I’m experiencing the same issue with the checkout page.
I have the Bricks WooCommerce “Notice” element enabled in the settings and added the notice element to the templates. It seems to work fine on the cart page but does not work on the checkout page.

Here are some printscreens for reference:

Backend template design:

Notices on the frontend:

1 Like

I am experiencing the same issue with single product page.

Hey guys,

Thanks for the feedback.
Please be rest assured as we already found a way to overwrite this native WooCommerce behavior when using the Bricks Woo Notice element.

However, I am not able to confirm it will be included in which release yet.
Thanks for your time and support Bricks. :raised_hands:

Regards,
Jenn

Hi @itchycode, Is there any article or guide how we can display woocommerce notice as popup? This is the question of many users, but no one knows how.

1 Like

@itchycode I’m overly interested in showing notices with popup as well! How about toast notifications? Snackbars? Snackbars – Material Design 3

Hi Jenn,
Thank you for the last update! The error notices are displayed in the right place now. :slight_smile:
Unfortunately the coupon code element is still at the top of the page. Is there a way to change the position of this aswell?
Thank you very much!
Kind regards,
Simone

Hi @simone, How is the coupon code located at the top of the page? Does coupon code have a element?

Hi Jolia,
I did not add an element for the coupon code. It just appears on the page. It is in a div with the class .before-checkout, so I guess it gets added dynamically.
If logged out the “returning customers” box also appears.

1 Like

Has this been resolved?

I am still experiencing the issue described here in BricksVersion: 1.9.1.1

Whether on not I have the ‘Notice element’ in my template, the notice appears on the frontend right at the top of the page.

Hi Sly,
The initial problem has been solved in Bricks 1.8.4 as far as I can see:

The coupon/returning customer “notice” is something completely different, see:
https://forum.bricksbuilder.io/t/placement-of-returning-customer-notice-for-woo-checkout/15655

The thread is unfortunately somewhat confused and accordingly confusing, because several problems were mixed up and our answers weren’t clear enough :v:

Thanks @timmse yes I can see now.

I think it was the ‘Have a coupon?’ bar that was making me think the notices were not appearing in the correct place. Shouldn’t ‘Have a coupon?’ be with the notices? If not, how do we set the position of the '‘Have a coupon?’ notification?

Hi Sly, we have the issue on our radar and will see how we can resolve it in the future.

Hello! This issue significantly impacts the checkout process, making it visually unappealing and unresponsive. I attempted to resolve it using CSS, but it seems that JavaScript elements are involved, which are beyond my current understanding.

Could you please share if there are any planned updates in the upcoming patches to address this?

Thank you.

Hi Mario,
As already mentioned: the original problem with this report was already solved in Bricks 1.8.4.

The coupon/returning customer “notice” is something completely different and there is no separate report for it yet, which is why the topic has unfortunately gone somewhat unnoticed. However, I have addressed it again within the team so that we have it on the radar.

Hello timmse, thanks for your response.

I apologize for not being more specific earlier. My concern is regarding the lack of styling options for the coupon/returning customer notice. This limitation is causing significant difficulties, as it disrupts the overall design and flow of the checkout process.

I appreciate you discussing this issue with the team.