New to the community? Start here

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

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

Tue, 18 Dec 2018 17:24:12

Ash
- WordPress Hacker
- 3,784 pts: Hero points 38,450 pts: Rep. points LEVEL 30
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
Farzan Ahmed
- The Crimson Coder
- 260 pts: Hero points 654 pts: Rep. points LEVEL 6
Hi Ash

It certainly is that site – thanks for letting me know about the goo.gl link :slight_smile:

I tried your solution, but when I put it in the mu-plugins folder, it doesn’t do anything; but when I paste it in to the theme’s functions.php file; it returns just the products tab but no results?

Where am I going wrong?

Thanks

Farzan
Farzan Ahmed
- The Crimson Coder
- 260 pts: Hero points 654 pts: Rep. points LEVEL 6
PS – if you need to see the mu-plugins folder, I’ve just installed WP File Manager for you to be able to browse to it :slight_smile:

Thanks

Farzan
Nithin
- Support Wizard
- 1,777 pts: Hero points 13,016 pts: Rep. points LEVEL 28
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
Farzan Ahmed
- The Crimson Coder
- 260 pts: Hero points 654 pts: Rep. points LEVEL 6
Thanks Nithin

That works now – is there any chance I can have it displaying the results in a row of 3 columns though – at the moment, it shows a row with 2 columns of results and then a blank space for the 3rd column.

Thanks

Farzan
Ash
- WordPress Hacker
- 3,784 pts: Hero points 38,450 pts: Rep. points LEVEL 30
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

Farzan Ahmed

The Crimson Coder

260 pts: Hero points 654 pts: Rep. points LEVEL 6

Thanks Ash, I can look at that later and live with it for now, but I’ve just noticed the slider on the home page has stopped working – not sure if its connected to this or a different issue, but would be great if you can take a look?

Thanks

Farzan

Ash

WordPress Hacker

3,784 pts: Hero points 38,450 pts: Rep. points LEVEL 30

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

Farzan Ahmed
- The Crimson Coder
- 260 pts: Hero points 654 pts: Rep. points LEVEL 6
Hi Ash

Is this in the functions.php? I can’t see it at the end?

Thanks

Farzan
Kris
- Support
- 804 pts: Hero points 3,702 pts: Rep. points LEVEL 18
Hi Farzan Ahmed

This code should exist inside your themes functions.php file. Also could you enable support access again to double check this?

Kind Regards,

Kris
Farzan Ahmed
- The Crimson Coder
- 260 pts: Hero points 654 pts: Rep. points LEVEL 6
Hi Ash

When I paste that code, I get this message

“Your PHP code changes were rolled back due to an error on line 1130 of file wp-content/themes/goodstore/functions.php. Please fix and try saving again.

syntax error, unexpected ‘<‘”

I’ve granted support access though if you can take a look?

Thanks

Farzan
Ash
- WordPress Hacker
- 3,784 pts: Hero points 38,450 pts: Rep. points LEVEL 30
Hello Farzan Ahmed

I have made the changes on your functions.php, so would you please check now?

Have a nice day!

Cheers,

Ash
Farzan Ahmed
- The Crimson Coder
- 260 pts: Hero points 654 pts: Rep. points LEVEL 6
Hi Guys

That works, but the menu on the homepage doesn’t now :disappointed:

Also, the search bar and ‘My Account’ part on the mobile bit goes all wonky too?

Thanks

Farzan
Nithin
- Support Wizard
- 1,777 pts: Hero points 13,016 pts: Rep. points LEVEL 28
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
Farzan Ahmed
- The Crimson Coder
- 260 pts: Hero points 654 pts: Rep. points LEVEL 6
Thanks Nithin

Will work through the css for the hamburger menu, but I put the above CSS in the media query and it worked well for mobile, but on tablet screens it goes funny now :disappointed:

Can you help with css for that as well please?

Thanks

Farzan
Farzan Ahmed
- The Crimson Coder
- 260 pts: Hero points 654 pts: Rep. points LEVEL 6
Hi Folks

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.

Any help with this will be brill :slight_smile:

Thanks

Farzan
Nithin
- Support Wizard
- 1,777 pts: Hero points 13,016 pts: Rep. points LEVEL 28
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

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

Learn more

In The WordPress

Resources

Blog

Learn more

How do you rate me?

Thank you for rating your experience!