Style WooCommerce Product Search Widget

Search Bar

Hi there,

tricky, might be able to get close (ish). Try something like this:

.woocommerce-product-search {
    border-radius: 40px;
    overflow: hidden;
    display: flex;
    flex-direction: row-reverse
}

.woocommerce-product-search input {

    border-radius: 0 40px 40px 0;
    border-left: 0
}

.woocommerce-product-search button:before {
    content: "\f002";
    font-family: GeneratePress;
    text-align: center;
    display: inline-block;
    font-size: 15px;
}

.woocommerce-product-search button {
    font-size: 0px;
    background-color: #fafafa;
    color: #666666;
    border: 1px solid #cccccc;
    border-right: 0;
    border-radius: 40px 0 0 40px;
}

Hi David,

Thanks so much for your quick response and suggestion!

It gets me about halfway there :)
Adjusted Search Box

Is it possible to change the teal button color to white with a rounded edge to match the right side of the field? (Basically so the whole field looks like a pill shape)

And reduce the heigh so it's not so "bulky"?

Also would be an excellent bonus to replace the "Search" label with a Font Awesome search icon??

Any suggestions are very much appreciated!!

Can you link me to the site? That code should have swapped the Seach button for the magnifying glass. You can edit your original topic and use the Site URL for privacy.

Thanks David,

I added my site URL, but it's a staging site so there are currently some passwords to reach the site...what is the best way to disclose them?

You can send them via the Account Issue form here:

https://generatepress.com/contact/

Please add the URL for this topic to the form so we can track.

Updated the CSS above

Thank you - I applied the updated CSS, but it looks the same...? (Cleared cache etc).

Ooops... made a mistake, corrected the CSS above... fingers crossed :)

YESSSS!! That did it!! Thank you SOOO much David!!! :)

Awesome - glad to be of help :)

Hi, im beginning with php and can't find a solution.

I've added woocommerce product search form to the nav bar. Now i would like to display a default GP search icon instead of the text button.

I found in searchform.php following function:
generate_get_svg_icon( 'search' )
, but still don't know how to use this to replace the text

to display woocommerce product search form in navigation bar i used this hook in my child theme:

add_action('generate_inside_navigation','generate_add_custom_search');
function generate_add_custom_search()
{
      echo '<div class="custom-search">';
            get_product_search_form();
      echo '</div>';
}

I would apreciate any help <3

Hi Szymon,

As the search form is added by a plugin, we are not able to tell how it works or if the text is filterable.

It's better to contact the plugin support :)

It's styling WooCommerce Product Search Widget as above... If i can find WooCommerce options in Customization menu of GeneratePress theme i hope you are here to help in this case.