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!
Thank you very much @wpmajestic. I had the same problem and it has worked perfectly.
