Messages boxes styling changed

  • Resolved elainewildash

    (@elainewildash)


    9 months, 2 weeks ago

    After updating to the latest Woocommerce version the message boxes (success, info and alert) styling has changed from the colours set.

    Seeing this on numerous websites.

    Where a theme is being used the Customise colours section doesn’t appear to have any effect on the Woocommerce messages boxes colours?

Viewing 5 replies - 1 through 5 (of 5 total)
  • Plugin Support Shameem a11n

    (@shameemreza)

    Hi @elainewildash

    For better assistance, can you provide screenshots showing the issue on your end? For screenshots, you may use https://snipboard.io – please follow the instructions on that page, then paste the URL in this thread.

    In the meantime, you can run a conflict test to help you identify the cause of the issue. More info: https://woo.com/document/how-to-test-for-conflicts/

    We also recommend contacting your theme developer to see whether they have any insights related to this.

    Rest assured, I couldn’t replicate the issue using the Storefront theme and WooCommerce’s latest version.

    Let us know how that goes for you.

    Thread Starter elainewildash

    (@elainewildash)

    Hi @shameemreza,

    Thanks for your reply.

    The issue is defintely with Woocommerce. The coding/CSS class has changed for message boxes e.g. the code for the success message on the product page after adding the product to the cart has changed from:

    https://snipboard.io/4k6qBh.jpg

    to

    https://snipboard.io/8d3Nwx.jpg

    so went from:

    https://snipboard.io/kl1Q0z.jpg

    to

    https://snipboard.io/xQfcSB.jpg

    We can see this on other Woocommerce sites where the custom styling has been taken over by the styling set in Woocommerce 8.5.0. This includes sites setup in Generate Press where in the Customising > Woocommerce > Colours > Messages tab colours previously set are now being ignored on the front end.

    Plugin Support Shameem a11n

    (@shameemreza)

    Hi @elainewildash,

    Thanks for the additional information.

    It looks like your theme has been applying color through the classic element’s CSS class. However, after the latest upgrade, everything shifted to block. This change also altered the CSS class name and disrupted your customized color settings.

    To resolve this, you have two options. You could use the WooCommerce shortcode instead of Block, or reach out to your theme developer for an update.

    I hope this clarifies your concern. If you have any other questions, feel free to ask.

    Thread Starter elainewildash

    (@elainewildash)

    Hi @shameemreza,

    Thanks for your reply and confirmation this issue arose due to the Woocommerce update.

    We knew the coding/CSS class had changed as per my previous message. We understand that we will now have to go through all of the sites whether using a page builder or theme or custom coding where the message boxes have styling (other than that as per Woocommerce default). This is what we were pointing out — that the Woocommerce update had affected the message box styling – on ALL sites that custom style these boxes.

    It’s just a shame that Woocommerce didn’t include the old CSS class so that so many sites aren’t affected by the update.

    Hi there @elainewildash ??

    Feel free to take a look at the following two Pull Requests (PRs), for some more context on what’s changed.

    You’re welcome to participate on GitHub, as WooCommerce is an open-source project and contributions are welcome!

    I hope this is helpful!

    • This reply was modified 9 months, 2 weeks ago by anastas10s. Reason: clarification
Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Messages boxes styling changed’ is closed to new replies.