WooCommerce - Change the Color of the Warning Message "You must be logged in to checkout"-CodePudding

"You must be logged in to checkout" is probably the only message in WooCommerce that doesn't have any unique class and because of that I can't change its background color using or any other classes.

        <div >
        
                <header >
        
                    <h1 >Checkout</h1>
                </header><!-- .entry-header -->
        
                <div >
        
                    <div >
                        <div ></div>
                               <div ></div>

            You must be logged in to checkout.</div>

                </div><!-- .entry-content -->
        
        </div>

Is there any CSS solution for this? if this can only be done through a hook or filter is it possible to wrap it only with a class and get the translation directly from the source? I don't want a custom translation for it.

CodePudding user response：

add_filter('esc_html', 'wc_custom_html', 10, 2);

function wc_custom_html($safe_text, $text) {
    if ('You must be logged in to checkout.' === $text) {
        $safe_text = '<p id="wc-must-login">' . $safe_text . '</p>';
    }
    return $safe_text;
}

Add a specific ID and wrap it in a <p> tag using the above hook. Now you can add a specific style.

You can inline CSS using the below hook.

//Adding CSS inline style to an existing CSS stylesheet
function mujuonly_add_inline_css() {

        $mustlogin_custom_css = "
               #wc-must-login {
                  background-color:#ccc;
                  padding:10px;
               }
            ";

  //Add the above custom CSS via wp_add_inline_style
  wp_add_inline_style( 'woocommerce-inline', $mustlogin_custom_css ); //Pass the variable into the main style sheet ID

}
add_action( 'wp_enqueue_scripts', 'mujuonly_add_inline_css' ); //Enqueue the CSS style

CodePudding user response：

The code shared by mujuonly works fine but if they change the source translation text for any reason, the text of the function also needs to be manually updated. so as I said all I wanted was to call the "You must be logged in" function directly instead of its translation text. I somehow figured this out by comparing mujuonly's code with another similar hook.

So here is the filter that I found for changing the text:

function custom_woocommerce_checkout_must_be_logged_in_message( $var ) { 
        return 'Enter your custom text here'; 
}

add_filter( 'woocommerce_checkout_must_be_logged_in_message', 'custom_woocommerce_checkout_must_be_logged_in_message', 10, 1 );

And here is how I wrapped it in a class:

function custom_woocommerce_checkout_must_be_logged_in_message( $var ) { 
        echo '<p id="wc-must-login">' . $var . '</p>';
}
add_filter( 'woocommerce_checkout_must_be_logged_in_message', 'custom_woocommerce_checkout_must_be_logged_in_message', 10, 1 );

Please go ahead and edit the hook if this is not the right way to do it. I'm not a coder though.