Sticky Woocommerce Messages

How to make Woocommerce messages (.woocommerce-message) sticky just like the error & info messages (.woocommerce-error, .woocommerce-info)? Example -> sticky coupon messages displayed at the bottom of the screen.

Can you provide the code?

Hello,

Our support does not cover the customization of Woocommerce functionality. Please try to find a plugin or developer who would do it for you.

Best Regards

Sorry but this is not the kind of support that I was expecting after paying for the theme.

After looking into CSS I was able to make the coupon messages sticky just like other WC messages (took me 2 minutes of work). It had nothing to do with customizing Woocommerce files, so asking me to find WC developer/plugin is either a poor excuse to not help or lack of knowledge about your own product.

Attachments:

You must be logged in to view attached files.

Hello,

Sorry for the misunderstanding. By default, our theme styles have two types of notifications: sticky and default (https://prnt.sc/oof457).

Woocommerce notifications on cart and checkout page have the ability to scroll the screen to notification after appearing and along combined with sticky messages it forced to scroll the screen to the bottom of the page on several browsers (https://gyazo.com/efa226fd7b4257edd453167a4cc16d7d). Unfortunately, we can’t influence this woocommerce scroll behaviour via WordPress theme and had to disable sticky notification on cart and checkout.

You can disable all sticky messages on the site via the option to make them look the same or use CSS code snippet provided below to make cart/checkout notices sticky, but it may have scroll issue we described before.

body.woocommerce-cart .woocommerce-notices-wrapper [role=alert],
body.woocommerce-checkout .woocommerce [role=alert], 
body .woocommerce-form-coupon-toggle>.woocommerce-info, 
body .woocommerce-form-login-toggle>.woocommerce-info {
    position: fixed;
    top: auto;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1050;
    margin: 0;
    cursor: pointer;
    -webkit-transform: translate3d(0,200%,0);
    transform: translate3d(0,200%,0);
    -webkit-animation: wd-fadeInUpBig .35s ease .5s both;
    animation: wd-fadeInUpBig .35s ease .5s both;
}

Regards

Now, that makes sense. Thanks so much for the detailed explanation and the code! Great support, Bogdan!

You are welcome!

[Author]

Posts