Want to make search queries go to Products, not Search the site

Hi
I've got a woocommerce site (https://goo.gl/hhMgoG), and want to make the search bar return results for products (without the tabs it's currently showing on the results page).

I've selected the setting that i THINK is for this in Theme Options, but to no avail.
Any help you can provide will be great.

Support access is granted :slight_smile:

Thanks
Farzan

  • Ash

    Hello Farzan Ahmed

    If your site is the goo.gl link then I am afraid the link is dead.

    If your attached website domain is the same site, then you can use the following code:

    add_action( 'wp_head', function() {
    	?>
    	<style>
    		.jaw-search-content .tab-content div.tab-pane {
    			display: none;
    		}
    		.jaw-search-content ul.nav.nav-tabs li {
    			display: none;
    		}
    	</style>
    	<script>
    		jQuery(function($){
    			$('.search-product').show().find('a').click();
    			$('#search_product').show();
    		});
    	</script>
    	<?php
    } );

    You can use this code in your child theme's functions.php if the theme is not changed. Otherwise mu-plugin is the best option. To create a mu-plugin, go to wp-content/mu-plugins folder. If there is no mu-plugins folder then, create one. Now, inside the mu-plugins folder create file with name anything.php (make sure file extension is .php). Now start with a <?php tag and then put the above code.

    Hope it helps! Please feel free to ask more questions if you have any.

    Have a nice day!

    Cheers,
    Ash

  • Nithin

    Hi Farzan Ahmed,

    If you are implementing the code via mu-plugins, the code should start with:
    <?php

    That was the reason it wasn't working in mu-plugins, this should be the new code:

    <?php
    add_action( 'wp_footer', function() {
    	?>
    	<style>
    	#content > div > div > div > div > ul > li:not(.search-product) {
    			display: none;
    		}
    
    	</style>
    	<script>
    		jQuery(function($){
    			$('.search-product').show().find('a').click();
    			$('#search_post').removeClass('active');
    			$('#search_product').addClass('active in');
    
    			$('#search_product').show();
    		});
    	</script>
    	<?php
    } );

    Unfortunately the WP File Manager doesn't allow to create PHP files, so I couldn't apply the changes. I have applied inside your themes functions.php file, and it seems to work fine.

    Please check, and let us know if you have any further query.

    Regards,
    Nithin

  • Ash

    Hello Farzan Ahmed

    I don't think this is possible. This is handled by js isotope library and all the items are set using position. So, there is no pattern that we can use to change the position. If we force one item, then we have to force all the later items.

    I think it's better to ask the theme (or plugin; who brought this feature) developer if they have any option to turn off isotope on the result. Then we can use custom css to change the position.

    Please let us know how it goes. Have a nice day!

    Cheers,
    Ash

    • Ash

      Yes, sorry about. Replace the following code:

      <?php
      add_action( 'wp_footer', function() {
      	?>
      	<style>
      	#content > div > div > div > div > ul > li:not(.search-product) {
      			display: none;
      		}
      
      	</style>
      	<script>
      		jQuery(function($){
      			$('.search-product').show().find('a').click();
      			$('#search_post').removeClass('active');
      			$('#search_product').addClass('active in');
      
      			$('#search_product').show();
      		});
      	</script>
      	<?php
      } );

      with this:

      <?php
      add_action( 'wp_footer', function() {
      	?>
      	<style>
      	.search.search-results #content > div > div > div > div > ul > li:not(.search-product) {
      			display: none;
      		}
      
      	</style>
      	<script>
      		jQuery(function($){
      			$('.search-product').show().find('a').click();
      			$('#search_post').removeClass('active');
      			$('#search_product').addClass('active in');
      
      			$('#search_product').show();
      		});
      	</script>
      	<?php
      } );

      It should fix the issue. After replacing this code, do check the search result page again.

      Have a nice day!

      Cheers,
      Ash

  • Nithin

    Hi Farzan Ahmed,

    I don't see any issue with homepage menu in desktop mode, but could notice the issue with "My Account", and menu in the mobile mode.

    However, the issue isn't related to the above given code, I have removed the above code temporarily, and "My Account", search bar, and the menus aren't displaying correctly in mobile mode.

    Either the issue is with some other custom codes added in your theme, or something specific within the theme side.

    For the Search bar, and the my account part, the following CSS is what's causing the issue:

    .col-lg-4:nth-child(2) {
        width: 550px !important;
    }
    
    .col-lg-4:nth-child(3) {
        width: 34% !important;
    }
    
    .header-widget-area {
        width: 33% !important;
    }

    You'll have to find the above CSS where it's added, and make sure to wrap the above CSS inside the following CSS media query:
    @media screen and (min-width: 480px) { }

    That's for example, change:

    .col-lg-4:nth-child(2) {
        width: 550px !important;
    }

    To:

    @media screen and (min-width: 480px) {
    .col-lg-4:nth-child(2) {
        width: 550px !important;
    }
    }

    Etc

    You could also wrap all the above CSS under one, media query as below too:

    @media screen and (min-width: 480px) {
    .col-lg-4:nth-child(2) {
        width: 550px !important;
    }
    
    .col-lg-4:nth-child(3) {
        width: 34% !important;
    }
    
    .header-widget-area {
        width: 33% !important;
    }
    
    }

    However, to fix the Hamburger menu, it looks more like a conflict with existing custom codes. Easiest would be to find out which exact custom code is causing the issue, by temporarily removing the custom codes added in your theme, one-by-one, and check which exact code when removed is making the menu work in mobile view.

    This would give a better idea, on how to move forward, and fix the issue. Please let us know how that goes.

    Regards,
    Nithin

  • Nithin

    Hi Farzan Ahmed,

    , but I put the above CSS in the media query and it worked well for mobile, but on tablet screens it goes funny now

    By default, when I check the theme, it only seems to display the logo, search bar, and icons one after another, this seems to be the same for tablets too. You can try the following CSS to correct this in tablets:

    @media only screen
      and (min-device-width: 768px)
      and (max-device-width: 1024px) {
    
    .col-lg-4:nth-child(2) {
    	width: 518px !important;
    }
    
    }

    You can add the CSS under the default WordPress customizer, under Appearance > Customize > Additional CSS.

    Update on this - I've removed all the css and it still didn't work :slight_frown:
    Also tried to install some menu plugins and that didn't do the trick either.

    I guess you meant about the Hamburger menu, seems like at the moment there isn't any Hamburger menu for mobile in your site when I check, and could notice the menu is configured in the form of a Select Box(dropdown) which seems to work when tested.

    Have you fixed the issue? Since support access to your site was disabled, I wasn't able to give a closer look. Did you try disabling other plugins in your system, to check whether that would help with making the hamburger menu? If the menu was part of the default theme, it should have worked fine, until there is a conflict.

    Please let us know how a conflict test goes, and please grant support access, if you still wants us to give a closer look.

    You can grant access from WPMU DEV > Support > Support Access > Grant Access, or check this manual: https://premium.wpmudev.org/docs/getting-started/getting-support/#chapter-5

    Please let us know once you enable access, so that we could get this sorted. Have a nice day. :slight_smile:

    Kind Regards,
    Nithin

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.