Product Search In Nav Bar

[Stigan]

Hello is there a way to have the WooCommerce product search widget in the Nav bar? We know how to do the site search, but it shows all pages, we only want the products to show in the search results, much like the widget in the side bar

Thanks!

[ruenel]

Hello Adwin,

Thanks for writing in! Are you using Pro theme? You can utilize the Widget Area element in the header. Simply go to Appearance > Sidebars and create a sidebar for search. Go to Appearance > Widgets and insert the WooCommerce Search widget in the Search sidebar widget area you have created. Edit your custom header and then make use of the Widget Area element to insert the Search sidebar.

Hope this makes sense.

[Stigan]

Hello Rue, we’re not using the pro version, is there a way to do it without the pro?

Thanks for your help!

[ruenel]

Hey Adwin,

Since you are not using Pro theme. You can only add it in the topbar content or do it with custom modification of the header. I would recommend that you go to X > Global Block. you may create a global block that has a section, row and column. Insert a Widget Area element and use the sidebar that has the Woo Product Search widget in it. Take note of the Global Block shortcode. You can add the shortcode in the topbar content or in your custom modification of the header.

By the way, before the shortcode be rendered in the topbar content, you will need this php code added in your child theme’s functions.php file

add_filter('theme_x_topbar_content','x_topbar_do_shortcode');
function x_topbar_do_shortcode($content) {
 return do_shortcode( $content );
}

And for your custom header, you may have something like this added to the child theme’s functions.php file:

// Add global block with Woo product search in it
// =============================================================================
function add_custom_content_above_masthead(){ ?>
  
  <div class="custom-content-container x-container max width">
      <?php echo do_shortcode('[cs_gb id=123]'); ?>
  </div>

<?php }
add_action('x_after_view_global__navbar', 'add_custom_content_above_masthead');
// =============================================================================

Be sure to insert the correct global block shortcode in this line: <?php echo do_shortcode('[cs_gb id=123]'); ?>

Please note that custom coding is outside the scope of our support. Issues that might arise from the use of custom code and further enhancements should be directed to a third party developer.

Hope this helps.