Error messages

  • Resolved stevert

    (@stevert)


    2 years, 10 months ago

    Hi,

    I am trying to change the look of the Woocommerce error messages on the checkout page. I want them to be like a modal, fixed in the center of the screen, with a dark background. I have this CSS:

    .woocommerce-error{
    position:fixed;
    background: white;
    padding: 1rem;
    top:50%;
    left:50%;
    z-index:1000;
}
.woocommerce-NoticeGroup{
    position:fixed;
    background: rgba(51, 51, 51, .5);
    top:0;
    left:0;
    height:100%;
    width:100%;
    z-index:999;
}

    and this works for the styling, but now the user cannot close the “modal”, so the dark background of the NoticeGroup is always visible. How can I turn it into a modal, so that when you click on any point of the screen the error message disappears and the background-color turns back to normal again?

Viewing 3 replies - 1 through 3 (of 3 total)

  • Hello,

    It is difficult to see what you are trying to do without the page link, but customization goes beyond the scope of support we are able to provide in this forum. You can also contact your theme developer to check if they can help you with this.

    Alternatively, you can contact a web developer or one of the services on our customizations page and have them customize the appearance for you: https://woocommerce.com/customizations/

    Thread Starter stevert

    (@stevert)

    @maykato thanks. I am trying to make the error messages on the checkout page stand out more, so I made them fixed on the center of the screen and by giving the div around it a dark bckground, they look like a popup/modal. But my issue is that of course a popup or modal can be closed/disappears when you click on any point of the screen. So now I tried adding this script:

    <script type="text/javascript">let button = document.querySelector('.woocommerce-NoticeGroup');
button.addEventListener('click', function() {
    button.classList.add('hide');
});</script>

    in order to remove the div and the error message when you click on the screen, but it does not work…what do I need to modify in my script?

    Plugin Support Paulo P – a11n

    (@paulostp)

    Hello,

    The look of WooCommerce error messages is controlled by your WordPress theme.

    This forum is dedicated to WooCommerce core, so for theme customization it would be best to reach out directly to the theme developer, as MayKato mentioned.

    I’m going to leave this topic open for a bit to see if anyone from the community wants to chime in and help you out.

    You can also visit the WooCommerce Facebook group or the #developers channel of the WooCommerce Community Slack. We’re lucky to have a great community of open-source developers for WooCommerce, and many of our developers hang out there, as well.

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Error messages’ is closed to new replies.