Removing search box and adding a new one

  • Hi,

    My goal is to remove the storefront search box and replace it with one via a plugin and add that to my secondary menu.

    I followed these instructions from a tutorial which hid the search box:

    Go to Appearance > Customize > Additional CSS. Then copy & paste the following code:

    /* remove search box */
.site-header .widget_product_search , .site-search{
display: none;
}

    However, where the search box used to be turned into a “block” my secondary menu is not aligned to the right side of the page. To the right of the cart is where the search box used to be, and as you can see, although the search box is hidden, it still acts like it’s there. Example image: https://i.imgur.com/yA1BDCc.png

    Does anyone know an easy way I can remove the search box completely from the storefront theme so that I can align my secondary menu to the right of the page without the old search box space leaving a big “gap”?

    Thanks in advance!

    The page I need help with: [log in to see the link]

Viewing 1 replies (of 1 total)

  • Hello @whflive,

    You can remove the header search box by adding ton following code snippet to your site:

    
/* Remove Storefront search box */
add_action( 'init', 'nl_remove_storefront_header_search' );
function nl_remove_storefront_header_search() {
  remove_action( 'storefront_header', 'storefront_product_search', 40 ); 
}

    This code snippet can be added using the Code Snippets plugin.

Viewing 1 replies (of 1 total)
  • The topic ‘Removing search box and adding a new one’ is closed to new replies.