Return to previous page

Search Widget - by Ocelynx - on WordPress WooCommerce support

This topic has 11 replies, 4 voices, and was last updated 9 years, 5 months ago ago by Jack Richardson

Ocelynx

Participant

June 12, 2015 at 05:59

Hi,

My client has used the default search widget in one of their sidebars, but the search function is only searching through the woocommerce products, not the rest of the site. I notice that the default search has been overwritten to search only products in searchform.php but this function already exists in woocommerce as the woocommerce product search widget (which is styled badly).

My client would like the user to be able to search within the site (mainly the blog) but also have the functionality of having a search for products. Should I rewrite the searchform.php in the child theme to search the entire site and rewrite the woocommerce product search to the same styles that the default search uses? Or is there a simpler way?

Thank you for your time.

#69315 Copied Theme version: 3.0 WooCommerce version: 2.3.8

10 Answers

Jack Richardson

Support staff

June 12, 2015 at 08:09

Hello,

You can comment the line 13 <input type="hidden" name="post_type" value="product" /> in the file searchform.php and you’ll get default search form.
Please try it.

Best regards,
Jack Richardson.

#69330 Copied

Ocelynx

Participant

June 12, 2015 at 08:24

For some reason commenting out that line results in the site losing its boxed layout. But the search works properly.

#69340 Copied

Ocelynx

Participant

June 12, 2015 at 08:34

The <!– –> comment was breaking the layout, copying the file into the child theme and deleting the line worked though. Also using php tags and comments on the line worked without breaking.

How can I fix the layout of the woocommerce search products widget?

#69344 Copied

Eva Kemp

Support staff

June 12, 2015 at 09:56

Hello,

Could you please show on a screenshot what you want to modify?

Thank you.
Regards,
Eva Kemp.

#69359 Copied

Ocelynx

Participant

June 12, 2015 at 10:03

Basically, the search widgets look like this:

The standard search, modified by 8theme is:
‘Input Field’ ‘Button “Go”‘
This is inline and how it should look.

The woocommerce search is:
‘Input Field’
‘Button “Search”‘
This is on two lines and the button is hard up on the input box.

You can see the examples on the web site under the Shop section for the woocommerce widget and blog for the standard widget. Both are at the top left of the page.

Thank you.

#69363 Copied
Robert Hall

Support staff

June 12, 2015 at 10:12
Hello,

Please try to add the following code in custom.css file
```
.products-sidebar .woocommerce-product-search .search-field{
float: left;
width: 130px;
}
.products-sidebar .woocommerce-product-search input[type="submit"]{
float:right;
height: 27px;
}
```
Regards,
Robert Hall.
#69366 Copied
Ocelynx

Participant

June 12, 2015 at 13:58
Thank you, for the start. I added the code, but made a few changes:
```
#products-sidebar .woocommerce-product-search .search-field{
	width: 106px;
}
#products-sidebar .woocommerce-product-search input[type="submit"]{
	margin-left:2px;
	height: 28px;
}
```
products-sidebar is an id not a class and the width of the input was too wide so I brought it down to 106px, the same width as the 8theme search. But because of the value of the button “Search” as opposed to “Go”, it is too wide when viewed on a smaller device so it falls to the line below. I might have to look into overriding the search box with a custom widget and then I can use the same styles and values as the 8theme search keeping the search boxes the same.

Thanks again.
#69421 Copied
Robert Hall

Support staff

June 12, 2015 at 14:11
You can also try to use this code
```
#products-sidebar .woocommerce-product-search .search-field{
width: 68%;
}
#products-sidebar .woocommerce-product-search input[type="submit"]{
margin-left: 2px;
  height: 28px;
  float: right;
  width: 30%;
}
```
Regards,
Robert Hall.
#69424 Copied
Ocelynx

Participant

June 13, 2015 at 02:23

I used this method instead to get the “Go” button which fits a lot better:

http://docs.woothemes.com/document/overriding-the-product-search-box-widget/

#69450 Copied

Jack Richardson

Support staff

June 13, 2015 at 07:38

Hello,

We are glad you have found the solution.
Let us know if you need further assistance.

Best regards,
Jack Richardson.

#69460 Copied
Tagged: customizable, search widget, seo friendly, themes, user friendly, woocommerce, wordpress
Viewing 11 results - 1 through 11 (of 11 total)