[Resolved] Woocommerce Product Search Widget

[David]

Where did you add the jQuery? I just tried that script in the Dev tools and it works. Let me know

[Neil]

I added a code snippet to put it in the header of every page. Where should I add it?

add_action( 'wp_head', function () { ?>
	<script>

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

	</script>
<?php } );

I’ve checked the page source and it is in there.

[David]

Place in the WP_Foot, as the elements need to have loaded before the script is run.

[Neil]

Right, that’s got the cross appearing now but nothing happens with regards to the search box. Re-reading your earlier reply, I need to do something with the visible class on the search box. I’m not sure how to do that, sorry.

[Neil]

I’m in a little over my head here :/

Trying to add this functionality to the mobile header and can’t find anything on how to do that.

[David]

OK, so replace all the CSS with this, and make sure the jQuery is in the WP_foot…..

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

@media (min-width: 769px) {
    .custom-search-item {
        display: none;
    }

}

@media (max-width: 768px) {
    .inside-header .header-widget {
        display: flex;
        align-items: center;
        flex-direction: row-reverse;
    }

    .site-header {
        display: block !important;
        opacity: 1;
        padding: 0;
        z-index: 100;
    }

    .site-header .site-logo {
        display: none;
    }
    
    .inside-header .header-widget {
        display: flex;
        align-items: center;
    }

    .site-header .inside-header {
        padding: 0;
    }

    .site-header .site-logo {
        display: none;
    }

    .site-header .header-widget {
        position: absolute;
        bottom: -100px;
        left: 50%;
        transform: translateX(-50%);
    }

    #dgwt_wcas_ajax_search-2:not(.visible) {
        display: none;
    }

}

[Neil]

I’m learning lots of new CSS here 🙂

Not quite working though, jquery doesn’t seem to do anything anymore. Also there are some strange things going on with the alignment.

To clarify, I’m putting the jquery in the wp_footer, is that right?

[David]

Thats good 🙂

Forgot to add some z-index to the Site Header to move it in front of the navigation
Also noticed i had doubled up on some CSS above, so i have edited and compacted the CSS above.

[Neil]

Nearly there. This is great, thank-you but just a couple of issues remaining.

We’ve lost the search box when not on mobile.

There’s some funny alignment/ordering things going on when you reduce the screen size.

[David]

I made a tweak on the code above so it appears on desktop. The issue on small screens is there is not enough room for it so it overlaps the cart icon…. so need to free up some room. Is the “Menu” label necessary on the mobile menu?

[Neil]

Hi David, thanks so much for your efforts on this. I’m having to spend the day on something else but hopefully will be back on this soon.

I’ve updated the code on the server so you can see what it looks like. The place I’m trying to get to is so that it mimics how the search function in GP works on mobile.

Here’s a screenshot of how it looks on one of my other projects.

You see how the search box fills the whole width of the screen and is shown above what is currently in the header.

[David]

Tricky one. Does that Search Widget come with a shortcode? As it may be best we hook it into the header. Otherwise its gonna be impossible to size and fix its positioned for the sticky mobile header. Let me know.

[Neil]

Yep, it sure does – [wcas-search-form]

I do have a child theme if it’s going to be easier to overwrite some of the base GP functionality rather than trying to achieve everything in CSS.

[David]

wish i had asked that earlier lol
SO if you can create a GP Hook Element:

https://docs.generatepress.com/article/hooks-element-overview/

Add the short code in there. Select the inside_mobile_header hook. Check the Execute Shortcodes. And Set the display rules to the entire site….. it will look a complete mess but ill have a look when i get a minute.

[Neil]

😀

I’ll take a look a bit later on this evening. I’ve got something else I need to get finished first.

I will definitely owe you a coffee/beer after we get this sorted!

[Author]

Posts