Replace WooCommerce storefront search box for guests by a custom button

Question

On woocommerce storefront header, for not-logged users, I want to replace the search box area with 2 gold bootstrap buttons: "Login", "Register" (like the stackoverflow landing-page header), to send guests to my customized login/register urls. With your help I have this PHP and CSS snippets that work fine to hide the search box for no-logged users, but I don't know what to do next:

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

CSS:

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

Answer 1

To replace Storefront search box by a button linked to Login / Register page, for unlogged users, you can use the following instead (so don't use your code and remove the CSS rule):

add_action( 'storefront_header', 'custom_storefront_header_search', 1 );
function custom_storefront_header_search() {
    // Only for non logged users
    if( ! is_user_logged_in() ) {
        remove_action( 'storefront_header', 'storefront_product_search', 40 ); // remove search box
        add_action( 'storefront_header', 'storefront_product_search_replacement', 40 ); // Replacement
    }
}

// Function that displays the replacement buttons
function storefront_product_search_replacement() {
    ?>
    <div class="site-search login-register">
        <a href="<?php echo wc_get_page_permalink('myaccount'); ?>" class="button"><?php _e('Login / Register', 'woocommerce'); ?></a>
    </div>
    <?php
}

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

Now you will be able to add your custom buttons html code and style them as you like…

---

You will get the following for guest users: