Woocommerce Product Search Widget

Hi there,

so try this, i have added some option CSS that moves the search below nav when it becomes to 'narrow' on medium size screens:

/* Position search between logo and nav Desktop */

@media (min-width: 769px) {
    .inside-header {
        display: flex;
        align-items: center;
    }

    .inside-header .header-widget {
        flex: 1;
        margin-left: 40px;
        margin-right: 40px;
        max-width: 100%;
        top: 0;
    }

    .site-logo {
        order: -1;
    }

}

/* Option - move seearch below logo and nav on medium size devices */

@media (max-width: 920px) and (min-width: 769px) {
    .inside-header {
        flex-wrap: wrap;
    }

    .inside-header .header-widget {
        order: 3;

        flex: 1 0 100%;
        margin-top: 20px;
        margin-left: auto;
        margin-right: auto;
    }

    .site-logo {
        margin-right: auto;
    }
}

/* Move slideout widget above menu */

.main-navigation.offside .inside-navigation {
    display: flex;
    flex-direction: column-reverse;
}

David, that is spot on, thank you!

Awesome - looks great as well :)

You may want to limit the width of the .slideout-widget its currently breaking outside the nav :)

Thanks :)

I've noticed there are some funnies going on with the slideout widget, currently playing with some styles so I will check the width also.

It where Flex is being applied to the widget to put the search icon to the right. Flex will bust outside of its container if its not told to wrap..... so max-widths would do the trick.

Hmmm. max-width doesn't seem to do anything.

I'm trying to set it so that the search box takes up the full width of the slideout menu (with a small margin). I can't seem to get it right.

Try this:

.slideout-widget {
    margin: 3px;
}
.inside-navigation .woocommerce-product-search input {
    width: 100%;
}

Perfect :)

Awesome :) Glad to be of help

Hi David,

Bit of a change of plan on this one now. When on mobile, we don't want to have the search in the slideout menu. Instead we would like to replicate what GP does with the search icon in the header. However, we're now using a different search widget. I.e, we would like to have the search icon (only on mobile) clickable to expand into the search input that takes up the full header.

We're already running a child theme. Is this something that can be done there (overwriting the standard search function in GP) or can this be achieved purely in CSS? Advice please.

Neil.

hmmm.... tricky one, you wouldn't be able to use the GP Nav Search for this. Would require first off a search button to be added to hide and show the search widget.

So you could try this:

1. Add a Custom HTML widget to the header, above the search widget.
1.1 Add this HTML to create the button:

<span class="custom-search-item" title="Search"><a href="#"><span class="screen-reader-text">Search</span></a></span>

1.2 Add this CSS to style the button:

.custom-search-item a:before {
    content: "\f002";
    font-family: GeneratePress;
    width: 1.28571429em;
    text-align: center;
    display: inline-block;
}

.custom-search-item.close-search a:before {
    content: "\f00d";
}

2. Now add this jQuery:

jQuery('.custom-search-item').on('click', function(e) {
    jQuery(this).toggleClass("close-search");
    jQuery('#dgwt_wcas_ajax_search-2').toggleClass("visible");  
    e.preventDefault();
    }); 

If it works then what you should see is the search icon change to a close icon on click and the search widget element will toggle the visible class. Which is what you can use to style it when its :not(.visible) - then its just a case of styling the header widget alignment and setting the responsive behaviour...... should get you started, fingers crossed.

Hi David, thanks for this. I've made the changes but it does nothing sorry :(

I can't see the custom HTML widget or the CSS?

Sorry, working locally. I have now updated the server version with the changes.