Question 3034 in Woocommerce Question posted in
The official Woocommerce documentation can be found here.

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

"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 class="woocommerce" or any other classes.

        <div class="post-content clearfix">
        
                <header class="entry-header">
        
                    <h1 class="page-title">Checkout</h1>
                </header><!-- .entry-header -->
        
                <div class="entry-content clearfix">
        
                    <div class="woocommerce">
                        <div class="woocommerce-notices-wrapper"></div>
                               <div class="woocommerce-notices-wrapper"></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.

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    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.


  2. 0 
    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

    enter image description here

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search