[Resolved] Woocommerce Product Search Widget

[David]

Keep us posted 🙂

[Neil]

I was intrigued (and it’s a bit more interesting than the other work I’m doing) so went ahead and made the changes. Why am I only just finding out about the GP Elements functionality now? – Could have saved me a lot of time and hassle with some other things 🙂

I quite like the fact that the search bar is always visible now but let’s see how easy it is to show/hide it on a click of the search icon…

My concern now is that the search bar has its own internal cross to clear the search. This is going to look messy when the other cross is also showing.

[David]

Haha – we do need to start some better promotion 🙂 Its been around for a while now….

So i can see the UI could be somewhat confusing. Might take a little working.

If you can also add the button to the hook ie.

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

Then at least we have the elements in place. Can then look at making it so when the Search icon is clicked the Search widget appears below the nav. And the Search Icon changes to “Close” or something…

[Neil]

I’ve made that update now.

[David]

So for now you can remove the jQuery as this will change and all of the CSS from here:

https://generatepress.com/forums/topic/woocommerce-product-search-widget/page/2/#post-828779

Apart from this:

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

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

[Neil]

Ok, made those changes.

[David]

Lets try this CSS:

@media (max-width: 768px) {
    #mobile-header>.inside-navigation {
        align-items: center;
    }
    .dgwt-wcas-search-wrapp {
        order: 5;
    }
    .custom-search-item {
        order: 3;
        padding-left: 20px;
        padding-right: 20px;
    }
    
    .dgwt-wcas-search-wrapp {
        max-height: 0;
        visibility: hidden;
        pointer-events: none;
    }
    .dgwt-wcas-search-wrapp.visible {
        max-height: 100%;
        visibility: visible;
        pointer-events: auto;
    } 
}

and this JS:

jQuery('.custom-search-item').on('click', function(e) {
    jQuery(this).toggleClass("close-search");
    jQuery('.dgwt-wcas-search-wrapp').toggleClass("visible");  
    e.preventDefault();
    });

[Neil]

Hmmm, not quite.

The search box has vanished on the desktop again and clicking the search icon on mobile doesn’t make the search box appear.

[David]

Urgh (lol) – edited the CSS above so it only applies to mobile.

Did you swap over the jQuery?

[Neil]

🙂

Swapped the jQuery. It’s running as the search icon changes to the cross. No search box appears though.

[David]

Try clearing your cache. Works for me 🙂

[David]

Added a bit more CSS here to remove the search widget visibility and pointer events when hidden just to be safe.

[Neil]

And we’re finally there I think 🙂

I just need to sort the colour out (not sure why it’s gone orange) but I think that’s within my limited capabilities.

Thanks so much for your support and perseverance with me. I honestly owe you a beer/coffee!

I’ll test it fully over the next few days and let you know how I get on.

[David]

Awesome 🙂 Glad to hear that.

Tom appreciates any donations to support developments 😉

https://generatepress.com/ongoing-development/

Or feel free to leave a review. All welcome.

[Neil]

Donation made, grab yourself a coffee on me 🙂

[Author]

Posts