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

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 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