How to hide the storefront search box for not logged users?

On woocommerce storefront header, I want to hide the search box for not-logged users, and replace it with 2 yellow buttons: “Login”, “Register” (like the stackoverflow landing-page header) that send to my customized login/register urls. I tried this CSS code that works to hide the search box, but I don’t know what to do next:

.site-header .site-search { display: none; }

Answer

You can use the following that will add a body class when users are not logged in as follow:

add_filter( 'body_class', 'add_body_class_for_guest' );
function add_body_class_for_guest( $classes ) {
    // Only for non logged users
    if( ! is_user_logged_in() ) {
        $classes[] = 'not-logged';
    }
    return $classes;
}

Code goes in functions.php file of the active child theme (or active theme).

Then you can use the following CSS rule to hide the storefront search box for non logged users:

.not-logged .site-header .site-search { display: none; }

Tested and works.