[Resolved] Woocommerce Product Search Widget

[Neil]

Hi Guys,

I’m trying to do some stuff with the Woocommerce Product Search Wigdet. I have modified the search form in my child theme to display a search icon instead of the text. I have also used one of your excellent support posts to style it a bit better https://generatepress.com/forums/topic/style-woocommerce-product-search-widget/.

I have two further things I’m trying to do but I just can’t work it out. I would like the search box to fill the gap between the site icon and the nav menu, so it’s all on one line and lined up nicely.

Additionally, I have the search widget in the slide-out menu. How can I have it so the search box is before the menu rather than after?

Thanks,

Neil.

[David]

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;
}

[Neil]

David, that is spot on, thank you!

[David]

Awesome – looks great as well 🙂

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

[Neil]

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.

[David]

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.

[Neil]

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.

[David]

Try this:

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

[Neil]

Perfect 🙂

[David]

Awesome 🙂 Glad to be of help

[Neil]

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.

[David]

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.

[Neil]

Hi David, thanks for this. I’ve made the changes but it does nothing sorry 🙁

[David]

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

[Neil]

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

[Author]

Posts