Product Search in top bar for Enfold WooCommerce Sites with Ajax dropdown

Hi All,

I have recently been looking for a way to place the search bar in the header in the following arrangements. I wanted to provide some clear instructions as the documentation in the area is a little hard to follow, and other posts in the forum don’t quite work as expected.

I have discovered that the Ajax dropdown looks at the position of the search bar – If the search bar is within the header area then the Ajax dropdown still applies to Enfolds default search widget.

-Logo left, menu right, search bar next to logo in header
-Logo left, menu below, search bar in header above menu next to logo
-Logo Centre menu below, search bar in header above menu next to logo
-Search can be modified following the guide linked below to include SKUs and only include products
-Tip! Always set a feature image so the enfold default search results looks prettier!

To make the default enfold search cover products only, follow my tutorial here: https://kriesi.at/support/topic/improved-search-for-woo-commerce/

Add the search bar to the header area
1. Set the desired header (logo, left, menu below etc).
2. Disable the append search icon to main menu
3. Add the following to the functions .php file:

add_action( 'ava_before_bottom_main_menu', 'enfold_customization_header_widget_area' );
function enfold_customization_header_widget_area() {
    dynamic_sidebar( 'header' );
}

4. Create a widget area called Header in the widgets section
5. Add the default Search Widget

6. Use the following CSS in the quick CSS box (play around with the mobile page breaks in chrome to confirm position works on all device sizes)
7. Change the DIV ID to match the ID given to the search widget!

  /* Change the Div ID#search-4 to match the ID given to the new widget in the widget area */
  /* Large screens and desktop positioning */
#search-4 {
    left: auto;
    right: 490px;
    padding: 0;
    position: absolute;
    top: 40px;
    transform: translate(-0%);
    z-index: 999999;
    width:400px;
}

  /* Set the padding around the Ajax dropdown */
.ajax_search_response {
background:#ffffff;
padding-top:20px;
}

  /* Change background of search box */
#top input[type='text'] {
background-color:#ffffff !important;
}

  /* Hide the search bar on mobiles and correct shopping cart position if necessary */
@media only screen and (max-width: 989px) {
#search-4 {
display:none;
}
.cart_dropdown_link {
    line-height: 90px !important;
}
}

  /* Adjust the position of the search bar for desktops up to 1480px */
@media only screen and (min-width: 989px) and (max-width: 1480px) {
  /* Add your Desktop Styles here */
#search-4 {
    left: auto;
    width:280px;
    right: 400px;
}
}

8. Assuming you have figured it out – Say thank you by visiting Think Jarvis Website
9. Or Follow us on Facebook/Instagram! Think Jarvis Facebook

• This topic was modified 4 years, 5 months ago by thinkjarvis.