Your account expired support, please renew to get your support.

Home Forums Themes Support Myha Woocommerce – Move searchbar widget to top on mobile

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #7727
    nnn1
    Support Expired

    Is there a way to easily move (or clone) the search widget on Woocommerce to the top while on mobile screens ? On XS/SM screens, both product grid and the sidebar use 12 as column width so the sidebar is pushed down, making the search input unusable.
    There should be a second search widget either above or below .archive-product-filter

    #7728
    nnn1
    Support Expired

    Done.

    Solution for other users:
    Edit /wp-content/themes/myha-child/templates/header/header-mobile-template.php
    Line 115 after <div class="header-elements">

    <?php get_template_part('templates/header/header-elements/search-button'); ?>

    • This reply was modified 10 months, 3 weeks ago by nnn1.
    #7730

    Thanks so much for your feedback and your solution.
    Sorry for late reply because we just have weekend.
    We’re very happy when you can resolved it now.

    ****
    Regards,
    HaruTheme

    #7731
    nnn1
    Support Expired

    No worries.

    Another solution (more like a bug fix imo, search bar should be present on top on mobile devices also):

    Add searchbar on top of woocommerce page

    Edit .../wp-content/themes/myha-child/woocommerce/archive-product-default.php (ajax also if you are using it)
    Line 119
    Add the following

    <div class="col-xs-12 hidden-md hidden-lg" style="margin-bottom: 30px;">
        <style>#woocommerce_product_search-top > form, #woocommerce_product_search-top > form > input[type="search"] { width: 100% } </style>
        <aside id="woocommerce_product_search-top" class="widget woocommerce widget_product_search">
            <?php get_product_search_form(); ?>
        </aside>
    </div>
    • This reply was modified 10 months, 3 weeks ago by nnn1.
    #7737

    Hi,
    Thanks for your suggestion but your code will make duplicate id or search element on page.
    We’ll notice about your suggestion.
    Thanks for your time and have a good day!

    ****
    Best regards,
    HaruTheme

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.