Search bar on TOP of woocomerce

  • hi there,

    i need the searchbar to be displayed on TOP of the woocommerce page like so: https://ibb.co/YZyBmMb

    when i dd the shortcode to the SHOP page, it lands on the very bottom of the page. i just had a customized shortcode for another search plugin. can someone help doing one for this plugin?

    here was the php code for the other plugin:

    add_action( 'woocommerce_before_shop_loop', function() {
  echo '<div class="fibosearch-bar">' . do_shortcode('[fibosearch layout="classic"]') . '</div>';
}, 1 );

add_action( 'wp_footer', function() { ?>
<script>
window.onload = function() {
  var wooTitle = document.querySelector(".woocommerce-products-header__title");
  var fibosearchBar = document.querySelector(".fibosearch-bar");
  if (wooTitle !== null && fibosearchBar !== null) {
    wooTitle.parentNode.insertBefore(fibosearchBar, wooTitle.nextSibling);
  }
}
</script>
<?php } );
Viewing 5 replies - 1 through 5 (of 5 total)
  • Plugin Author wpdreams

    (@wpdreams)

    Hi,

    That looks almost perfect, can you please try to change it simply to this:

    add_action( ‘woocommerce_before_shop_loop’, function() {
    echo ‘<div class=”search-bar”>’ . do_shortcode(‘[wpdreams_ajaxsearchlite]’) . ‘</div>’;
    }, 1 );

    If you are lucky, this should already do the trick. If not, you can try also this variation based on the original code:

    add_action( 'woocommerce_before_shop_loop', function() {
  echo '<div class="search-bar">' . do_shortcode('[wpdreams_ajaxsearchlite]') . '</div>';
}, 1 );

add_action( 'wp_footer', function() { ?>
<script>
window.onload = function() {
  var wooTitle = document.querySelector(".woocommerce-products-header__title");
  var searchBar = document.querySelector(".search-bar");
  if (wooTitle !== null && searchBar !== null) {
    wooTitle.parentNode.insertBefore(searchBar, wooTitle.nextSibling);
  }
}
</script>
<?php } );

    Best,
    Ernest M.

    Thread Starter tobilotta

    (@tobilotta)

    thank you so much, it worked!

    HOW can i keep activated BOTH search options (blog and products) if someone search something?

    check : https://www.tobilotta.ch/shop/

    Plugin Author wpdreams

    (@wpdreams)

    Hi,

    Just make sure, that on the sources panel the Posts and the Products custom post type is both selected.

    Best,
    Ernest M.

    Thread Starter tobilotta

    (@tobilotta)

    https://ibb.co/CJsNSZ1 please check. is this right?

    Plugin Author wpdreams

    (@wpdreams)

    Yes, that looks okay to me. That should give you posts and products in the live results list.

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Search bar on TOP of woocomerce’ is closed to new replies.