Customising WooCommerce Search Widget

Try this custom css in your child theme’s style.css:

.woocommerce-product-search label {
  display:none;
}
.woocommerce-product-search input[type="search"] {
  margin:10px 0 6px 0;
  padding:4px 12px 4px 12px;
}
::-webkit-input-placeholder {
   color:#fff;
}
:-moz-placeholder { /* Firefox 18- */
   color:#fff;
}
::-moz-placeholder {  /* Firefox 19+ */
   color:#fff;
}
:-ms-input-placeholder {
   color:#fff;
}
.woocommerce-product-search input[type="submit"] {
  margin:6px 0 10px 0;
  padding:4px 12px 4px 12px;
  background-color:#f88;
}

If it doesn’t work, leave it in so it can be debugged.

Hi lorro,

That’s much better, thank you!

I don’t seem to be able to influence the colours of the button though. It looks like it has two colours set for normal and hover. I’ve used Firebug, but I can’t tell where it’s pulling styles from.

Myles

Normal and hover are both #f88 in the above snippet.

It must be getting the style from somewhere else though as the button shows two different colours between normal and hover states.

I’ve tried changing the colour to quite a deep red as follows, but there is no change in the button –

.woocommerce-product-search input[type="submit"] {
  margin:6px 0 10px 0;
  padding:4px 12px 4px 12px;
  background-color:#d54c4d;
}

Firebug normally helps me track down where the styles are coming from, but on this ocassion I can’t see it!

You’ll need to use ” not "

Validate style.css using this service:
https://jigsaw.w3.org/css-validator/

Ah, I missed that. I copied and pasted from the email instead of this online post!

I’ve corrected the error, but still no joy with button. There are some other errors when running through validator,(some theme, some plugins) but I can’t see any that are connected with this issue.

I think I’ll test switching theme to see if it’s a theme issue. If it is, I’ll raise a ticket with the software vendor for theme and see what they say. The theme creator I’m using is supposed to export Standard Compliant W3C Valid HTML and CSS, but that doesn’t seem to be the case at the moment!

I think it should be :

[type="submit"]

not

[type="submit";]

and there is another pair of "s further up. As you say, the validation service shows 40 odd other errors. The thing is, css is fussy and once there is a parse error, other snippets further down may not be being read. For example, the “#d54c4d;” bit doesn’t appear in the inspector although it is in the style sheet, so its not being parsed.

I should restore /parent-theme/style.css to its original and put your custom css in /child-theme/style.css, then validate that.

That’s a good suggestion to separate out my custom css. I’ll do that later and see what the results are.

Thanks for the help and advice. I appreciate it. ??