New border shows around added to cart message

Hi @uriahs-victor,

If you can share the site URL, I can tell you how to fix this because I can inspect the code and see what’s happening. Regarding these CSS things – we need to see a code with live inspector, to write a working solution.

Kind Regards.

@wpmajestic I was testing on local but it doesn’t matter where the site is…you can test from your install just update to the latest version of WC and then add a product to cart, you will see a border shows around the added to cart message

Hi @uriahs-victor,

I was able to replicate it – https://prnt.sc/Ze8BsbbPJNwa – and here is how it looks when the border is removed -> https://prnt.sc/BmJKiOpwsonk, add this code to custom CSS:

.woocommerce-message {border-top: none;}

if that is not working try using the !important directive:

.woocommerce-message {border-top: none !important;}

Kind Regards.

@wpmajestic That’s not what im talking about, that is the default border that has been there for a long time…Please take a look at this video to see that when an item is added to card there is a border that comes around the whole notice and then disappears when you click anywhere on the page: https://share.vidyard.com/watch/bxuajSZMqzgYwYqq6rBi5a?

Hi @uriahs-victor,

I don’t have that issue on my sites, the border that appears on your video – does not appear, I tried with the Storefront theme as well, on my end it does not appear. If you can provide me with a link to the site where this happens – I will resolve the issue for you.

Kind Regards.

@wpmajestic I deployed a fresh site just to show that it doesn’t matter where I test, see this site: https://strategic-baboon-a33339.instawp.xyz/product/test-product/

That site only has WooCommerce installed and is a fresh install.

You can see that when I added a product to cart, this blue border shows around the notice: https://prnt.sc/XLbCr0nophmt

This wasn’t happening in previous WooCommerce installs

Hello @uriahs-victor,

Thank you. I was able to see the issue, and the border appeared on focus. To fix it, you need to add custom CSS to the Customizer.

.woocommerce-message:focus-visible {
    outline: none;
}

If that does not work, add !important, like this:

.woocommerce-message:focus-visible {
    outline: none !important;
}

Let me know did it resolved your issue?

Kind regards.

Hi @uriahs-victor,

It looks like @wpmajestic already shared some tips to try and solve this issue. Did you already get a chance to try out the CSS code @wpmajestic shared?

Should you still need further assistance, please feel free to reach out and we’d be happy to help.

Just tested it and it’s gone now

Hello @uriahs-victor,

Glad to know that the issue has been resolved with the solution provided by @wpmajestic.

Should you have further inquiries, kindly create a new topic here.

Meanwhile, if it isn’t too much to ask for – would you mind leaving us a review here? It only takes a couple of minutes but helps us tremendously. It would mean so much to us and would go a long way.

Thanks!