How to customize WooCommerce messages on cart and checkout pages

TIPS

Jun 25, 2019 | WooCommerce Tips | 0 comments

Add the following CSS in the Divi theme options area and customize however you like.
[css]
.woocommerce-error, 
.woocommerce .woocommerce-error, 
.woocommerce-info, 
.woocommerce .woocommerce-info, 
.woocommerce-message, 
.woocommerce .woocommerce-message {
    padding: 1em 2em 1em 3.5em !important;
    margin: 0 0 2em !important;
    position: relative !important;
    background-color: #f7f6f7 !important;
    background: #f7f6f7 !important;
    color: #515151 !important;
    border-top: 3px solid #79bde9 !important;
    border-top-color: rgb(121, 189, 233) !important;
    list-style: none outside !important;
    width: auto !important;
    word-wrap: break-word !important;
}
.woocommerce-info::before {
    color: #79bde9 !important;
}
.woocommerce-error::before, 
.woocommerce-info::before, 
.woocommerce-message::before {
    font-family: WooCommerce;
    content: '\e028' !important;
    display: inline-block !important;
    position: absolute !important;
    top: 1em !important;
    left: 1.5em !important;
    color: #79bde9!important;
}
.woocommerce-info a {color: #79bde9 !important;}
[/css]

0 Comments

Submit a Comment

Your email address will not be published. Required fields are marked *

More Tips

Ad - Web Hosting from SiteGround - Crafted for easy site management. Click to learn more.

Cloudways Hosting

WPEngine Hosting

Pressable Hosting

AccuWeb Hosting

Ask the Divi Guy a Question

"*" indicates required fields