my website is http://www.langelir.com

1. How could I add the search bar at the menu (instead of just the magnifying glass you see)

2. Alternatively, is it possible to add it to the top bar? Please advise (:

3. Also how do I fix the photos of the products on the search result page as of current, using the in-built search by woo commerce or X theme (the magnifying glass in the menu bar)?

Thank you so much for your help!

Best regards,
Vivien

Thanks for writing in!

To be able to do this customization, you’ll need to set up a child theme first.

How to Setup Child Themes

1. To add search in menu

You can add the code below in child theme’s functions.php

function add_search_to_wp_menu ( $items, $args ) {
    if( 'primary' === $args -> theme_location ) {
$items .= '<li class="menu-item menu-item-search">';
$items .= '<form method="get" class="menu-search-form" action="' . get_bloginfo('home') . '/"><p><input class="text_input" type="text" value="Enter Text & Click to Search" name="s" id="s" onfocus="if (this.value == \'Enter Text & Click to Search\') {this.value = \'\';}" onblur="if (this.value == \'\') {this.value = \'Enter Text & Click to Search\';}" /><input type="submit" class="my-wp-search" id="searchsubmit" value="search" /></p></form>';
$items .= '</li>';
    }
return $items;
}
add_filter('wp_nav_menu_items','add_search_to_wp_menu',10,2);

2. To add search in topbar

Create file _topbar.php in x-child-renew/framework/views/global/_navbar.php
then copy the code below into that file

<?php

// =============================================================================
// VIEWS/GLOBAL/_TOPBAR.PHP
// -----------------------------------------------------------------------------
// Includes topbar output.
// =============================================================================

?>

<?php if ( x_get_option( 'x_topbar_display', '' ) == '1' ) : ?>

  <div class="x-topbar">
    <div class="x-topbar-inner x-container-fluid max width">
      <?php if ( x_get_option( 'x_topbar_content' ) != '' ) : ?>
      <p class="p-info"><?php echo x_get_option( 'x_topbar_content' ); ?></p>
      <?php endif; ?>
      <?php x_social_global(); ?>
      <div class="searchform"><?=get_search_form();?></div>
    </div>
  </div>

<?php endif; ?>

3. I am not sure what you want to do with the photos, but you can remove it in the search results page using the code below.

You can add this under Custom > CSS in the Customizer.

.search.search-results img {
    display:none;
}

Hope that helps

Thank you so much!
But I have a terrible experience with functions.php, my screen “white” out twice so I’m not gonna touch that HAHA do you have alternative like plugins or custom > css instead?

Sorry for the trouble!

Thank you so much for your help, I appreciate it(:

Best regards,
Vivien

Sorry for the trouble, I understand the issue with messing up your functions.php, 😉

Would you mind providing wordpress and FTP access to your site so I can implement the changes directly, and mess with your functions.php lol

Don’t forget to provide FTP access so we can fix for any functions.php error

Cheers

I just added the code with no problem, but I couldn’t check if it works with your menu. You’re using a cache plugin which I couldn’t check your output in real time.

Please provide an admin login too, or clear your cache then check if it works.

Thanks!

My friend managed to get it in hahaha
but thank you so much for all the help!
SUPER appreciate all the support! ((:

Best rgds,
Vivien (:

I have another problem with the search bar, it does not centre itself like My Account and My Cart when view in a mobile version. Could you help me fix that problem?

Thanks!

We’d love to help you with your concern however, that would be additional development so that would fall beyond the scope of our support.

Thank you for understanding.