Flexible Shipping Plugin

Hi @elena92,

You can easily target and adjust the color of the ‘Left for Free Shipping’ notice using the CSS rules, e.g., if you apply the following custom CSS rule in your theme:

.fs-free-shipping-notice-text {
    color: #ff0000;
}

the label will change to red:

https://monosnap.com/file/UbGmHi3rdKHUfjO2m3f61MvS86M4Oj

Please let me know if this is what you were looking for or if it needs some more adjustments.

Kind regards,
Luke

thank you for your support! yes, is working! but I can’t change the color of the button “continue shipping” and the color of the whole label.

Kind regards,
Elena

Hi Elena,

The way how these elements look can be also customized with CSS rules. Could you please show me the screenshot illustrating what exactly did you mean by ‘the whole label’ and describe how this element and the button should look like?

Knowing this, I believe I will be able to prepare a custom CSS for you.

Kind regards,
Luke

Hi Luke,

Thank you for your help. I would like change background color, button color and align the entire label in the center of the page. As you can see in the attached screen. https://ibb.co/rHRcn64
Thank you so much

Elena

Hi Elena,

The following CSS rules should center the label and change the color of the label’s and button’s background:

.woocommerce-info {
    display: flex;
    justify-content: center;
    width: 100%;
    background-color: #FF0000;
}

a.button.flexible-shipping-free-shipping-button {
    background-color: #FF0000;
}

Please simply change the part with #FF0000; hex color code with your preferred ones to adjust it to your needs.

Since we’re modifying the appearance of .woocommerce-info element background color here, please mind that this change might also have an influence on other notices coming from other plugins using this container.

Kind regards,
Luke

Since there are no further inquiries concerning this case, I’m marking this thread as resolved.

Kind regards,
Luke

yes thank you, I solved it, thanks

Regards,

Elena