HOW TO ADD SEARCH PRODUCTS IN MOBILE MENU

[Conscious Crafties]

Hello, how can I add a product search box or search icon alongside the Basket/Cart icon on MOBILE devices?

Search seems to be missing on mobile.

Many thanks,

Karen

 

 

[Laura]

Hello, i see the search correctly at mobile, please check attached 🙂

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

Laura Solanes - Graphic Designer and Web Designer

Please be patient as I try to answer each topic as fast as i can.

If you like the theme or the support you've received please consider leaving us a review on Themeforest!

Always happy to help you 🙂

Attachments:

You must be logged in to view attached files.

[Conscious Crafties]

Hi Laura,

Oh I never noticed it appear after all the categories!

So guessing that’s why I’m getting tonnes of complaints from customers who can’t find it.

Is there a way to add the product search box or search icon alongside the Basket/Cart icon on MOBILE devices?

Thank you,

Karen

[Conscious Crafties]

Oooh I’ve had an idea that might be more doable…

Is it possible to move the Search Box to the top of the categories menu on mobiles rather than the bottom?

Many thanks for your help,

Karen

[Laura]

Hello, will assign the ticket to a higher support level who can help and advise you in your query.
Thanks! ?

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

Laura Solanes - Graphic Designer and Web Designer

Please be patient as I try to answer each topic as fast as i can.

If you like the theme or the support you've received please consider leaving us a review on Themeforest!

Always happy to help you 🙂

[Conscious Crafties]

Thank you 🙂

[Radu]

Hi,

You can add the search feature beside the cart icon on mobile following the next screenshot

Wp-admin -> theme options -> header options.

Cheers
R.

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

What support service includes ? What not ?

[Conscious Crafties]

Hi Radu,

I already have those settings (see screenshot). However on Mobile the search cannot be found by customers (see screenshot).

Thanks

Attachments:

You must be logged in to view attached files.

[Radu]

Hi,

I see,

For the moment to have search on mobile like on desktop (click search and expand the input) isn’t possible.i’ve tried to make a workaround but it has more dependencies, I will add this to improvement list and in future will be implemented

Cheers
R

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

What support service includes ? What not ?

[Conscious Crafties]

Is there any way you can change the order of the Menu so the search box appears at the top rather than the bottom where it’s missed?

Many thanks,

Karen

[Radu]

Hi,

There is no specific setting to change that, cuz adding it at the top when you search and the results are displayed will overlap and will push the menu items.

Cheers
R.

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

What support service includes ? What not ?

[Conscious Crafties]

Surely it’s just changing the order in the menu? If users searches in the search box within the mobile menu, it takes the user to the search results page. So why would moving the search to the top of the menu cause any sort of overlap?

This should be an easy change to make…

[Radu]

Hi,

To have search menu item first instead of latest use the next code

COPY CODE

function kleo_search_menu_item($items, $args)
{
    if (sq_option('ajax_search', 1) == 'logged_in' && !is_user_logged_in()) {
        return $items;
    }

    $location = sq_option('menu_search_location', 'primary');

    if ($args->theme_location == $location) {
        $form = kleo_get_search_menu_item();
        $items = '<li id="nav-menu-item-search" class="menu-item kleo-search-nav">' . $form . '</li>' . $items;
    }

    return $items;
}

The function needs to be pasted in wp-content/themes/kleo-child/functions.php

NOTE: Child theme needs to be installed and activated.

The results will pull rest of the menu items.

Cheers
R.

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

What support service includes ? What not ?

[Conscious Crafties]

Thank you that worked really well 🙂

[Conscious Crafties]

Actually sorry just spotted that the search bar on Desktop is now partially hidden so users can’t type in the box (see attached)

Many thanks,

Karen

Attachments:

You must be logged in to view attached files.

[Radu]

Hi,

Just add those CSS lines

COPY CODE

#ajax_search_container:before {right: 279px !important;}

#ajax_search_container {left: -10px !important;}

The css will be added to wp-admin -> theme options -> General settings -> Quick CSS

That’s it

Cheers
R

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

What support service includes ? What not ?

[Conscious Crafties]

That’s worked great thank you 🙂

Could you check something for me? On mobile when clicking the menu hamburger symbol (3 horizontal lines), if I then click the search box (located at the top of that menu) it takes several attempts to click into the search box.

Here’s our site:
https://www.consciouscrafties.com/

[Radu]

Hi,

You’re welcome 🙂

Please make a video cuz I cannot see/notice what you describe on mobile to can figure out.

Cheers
R.

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

What support service includes ? What not ?

[Author]

Posts