Class .woocommerce-info .notifications-sticky

Hi

I’ve been using Woodmart 2.6 and YITH Social Login plugin.
On YITH Social Login settings page I could enter an instruction text to be shown on Checkout page.
So that instruction text was shown on top of social login buttons saying something like “Simply login with Facebook account for faster checkout!”.

YITH Social Login instruction was inserted inside .woocommerce-info class.

Now after I updated to Woodmart 4.0, it seems that this instruction text went down to the bottom of the screen with brown background full-width notification tab.

It seems like the new versions of Woodmart has this .woocommerce-info css together with .notifications-sticky which are different from the old versions.

.notifications-sticky div.wpcf7-response-output, .notifications-sticky .mc4wp-alert, .notifications-sticky .woocommerce-error, .notifications-sticky .woocommerce-message, .notifications-sticky .woocommerce-info, .notifications-sticky .yith_ywraq_add_item_product_message {
    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;
}
div.wpcf7-response-output, .mc4wp-alert, .woocommerce-error, .woocommerce-message, .woocommerce-info, .dokan-alert, .dokan-message, .dokan-info, .dokan-error, .dokan-store-contact .alert-success, .yith_ywraq_add_item_product_message {
    position: relative;
    display: flex;
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap;
    margin-bottom: 20px;
    padding-top: 10px;
    padding-bottom: 10px;
    padding-right: 80px;
    padding-left: 65px;
    min-height: 60px;
    border: none;
    color: #FFF;
    line-height: 1.3;
}
div.wpcf7-validation-errors, div.wpcf7-mail-sent-ng, .mc4wp-error, .mc4wp-notice, .woocommerce-error, .woocommerce-info, .dokan-alert-warning, .dokan-alert-danger, .dokan-alert-info, .dokan-error, .dokan-info {
    background-color: #E0B252;
}

How could I remove .woocommerce-info from these CSS values?

Thank you,

Mike

Hello,

You need to delete: .woocommerce-error, and .woocommerce-error, and .woocommerce-message, and .woocommerce-info,

Best Regards

Hi,

How do I do this on Theme child’s style.css?
I think if I add these classes in child style.css without those 4 classes, they will still inherit the values from the parent style.css right?

Thank you.

Hello,

You show me CSS code. Where did you take it?

For you just to designate: There are CSS fields in the Theme Settings > Custom CSS. All the custom CSS should be added here, no matter if you run parent or child theme. If you need to change the styles for these classes, let me know what you would like to change. I will provide custom CSS.

Best Regards

.notifications-sticky div.wpcf7-response-output, .notifications-sticky .mc4wp-alert, .notifications-sticky .woocommerce-error, .notifications-sticky .woocommerce-message, .notifications-sticky .woocommerce-info, .notifications-sticky .yith_ywraq_add_item_product_message {
    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;
}

div.wpcf7-validation-errors, div.wpcf7-mail-sent-ng, .mc4wp-error, .mc4wp-notice, .woocommerce-error, .woocommerce-info, .dokan-alert-warning, .dokan-alert-danger, .dokan-alert-info, .dokan-error, .dokan-info {
    background-color: #E0B252;
}

div.wpcf7-response-output, .mc4wp-alert, .woocommerce-error, .woocommerce-message, .woocommerce-info, .dokan-alert, .dokan-message, .dokan-info, .dokan-error, .dokan-store-contact .alert-success, .yith_ywraq_add_item_product_message {
    position: relative;
    display: flex;
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap;
    margin-bottom: 20px;
    padding-top: 10px;
    padding-bottom: 10px;
    padding-right: 80px;
    padding-left: 65px;
    min-height: 60px;
    border: none;
    color: #FFF;
    line-height: 1.3;
}

Here’s the related codes I took from the parent style.css.
I know the Custom CSS menu. What I’m asking is you wouldn’t recommend me to just remove
.woocommerce-error, and .woocommerce-error, and .woocommerce-message, and .woocommerce-info,from the parent theme style.css right? because any future updates will overwrite them.
Or are you just recommending me to remove them from the parent style.css?

Hello,

What do you want to change for these classes: .woocommerce-error, and .woocommerce-error, and .woocommerce-message, and .woocommerce-info?

I thought you took them from the Theme Settings > Custom CSS that is why I suggested removing the classes not to inherit these styles.

What styles do you want to rewrite?

Best Regards

It’s not related to Custom CSS at all.
Ok let me do some TLDR summary for you.
I updated from Woodmart 2.6 -> 4.0
The .woocommerce-info and other 3 classes you mentioned NOW share common styles with .notifications-sticky on Parent Theme’s STYLE.CSS.
.notifications-sticky didn’t exist in earlier versions and I do not want .woocommerce-info be shown as a brown colored sticky bar at the bottom.

If you have version 2.6 handy, you can check where .woocommerce-info is shown on checkout page.

Thank you.

Hello,

Yes, I see, in order to change the styles of these classes, you need to assign new styles and add them to the Theme Settings > Custom CSS.

I do not have the previous version of Woocommerce I do not have anything to refer to, please advice what would you like to change?

Best Regards

[Author]

Posts