Docs

[Ann]

Hi Guys,

Is there a way to add Woocommerce Search functionality to the main navigation bar?

Best,
Ann

[Rue Nel]

Hello Ann,

Thanks for writing in! Regretfully, at this time I am not entirely certain what it is you would like to accomplish based on the information given in your post. If you wouldn’t mind providing us with a little more clarification on what it is you’re wanting to do (a link to a similar example site would be very helpful, or perhaps some screenshots), we’ll be happy to provide you with a response once we have a better understanding of the situation.

Please let us know how it goes.

[Ann]

Hi Rue,

Thanks for your reply and I’m sorry for not being clear.

I installed woocommerce product search function, which is a separate, paid plugin, and I was wondering if I could add the search function to the menu bar instead of the built in search?

The plugin can be added as a widget or with a shortcode. I assume I’d have to make some template changes to add it to the menu bar though?

Does that makes sense at all?

Ann

[Rue Nel]

Hello Ann,

Thank you for the clarifications! Since your child theme is set up, please add the following code in your child theme’s functions.php file

// Custom product search widget
// =============================================================================
function custom_search_navbar_menu_item( $items, $args ) {

  if ( X_WOOCOMMERCE_IS_ACTIVE ) {
    if ( $args->theme_location == 'primary' ) {

      $items .= '<li class="menu-item current-menu-parent x-menu-item x-menu-item-woocommerce-search">'
                  . do_shortcode('[woocommerce_product_search]')
              . '</li>';
    }
  }

  return $items;

}
add_filter( 'wp_nav_menu_items', 'custom_search_navbar_menu_item', 9999, 2 );
// =============================================================================

Please let us know if this works out for you.

[Ann]

Yes, that worked!

This might not be something you would help with but do you know how to add some padding above the search box?

I would also like to increase the width for the search result, any idea how? I can only change the thumbnail from the plugin setting. I believe I’d have to add custom CSS to do that.

Thanks!

Ann

[Ann]

Screen shot file too big… here we go again 🙂

[Ann]

Ok, last time!

LOL

[Thai]

Hi There,

Please provide us with your website URL so we can take a closer look.

Thanks.

[Ann]

Sorry!

https://onlineconsigncouture.com/

[Thai]

Hi There,

Please add the following CSS under Customizer > Custom > Global CSS:

#product-search-form-1707334426 {
    margin: 9px 0 0;
}

.product-search.floating .product-search-results {
    min-width: 300px;
}

Hope it helps 🙂

[Ann]

Thanks for your quick response 🙂

It worked for the width but the padding though

[Thai]

Hi There,

Please update the previous CSS a bit:

form.product-search-form {
    margin: 9px 0 0 !important;
}

.product-search.floating .product-search-results {
    min-width: 300px;
}

Hope it helps 🙂

[Ann]

Awesome!

All good now, thanks a lot!

[Rad]

You’re so much welcome!

[Author]

Posts