[Resolved] Style WooCommerce Product Search Widget

[Kristin]

Hello!
I’m using Generate Press Premium with Elementor Pro on my website. I’d like to use the WooCommerce Product Search field widget, however I would like to change the default style to look more like the general site search bar that I created using Elementor:
https://paste.pics/3aee2bac7fa8e0fbdba90118de0e97ae

I’ve tried looking for some CSS snippets that might achieve this but am having no luck. Any suggestions you might have are greatly appreciated!!

Thank you!

GeneratePress 2.2.2

GP Premium 1.7.8

[Kristin]

Search Bar

[David]

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;
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Kristin]

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!!

[David]

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.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Kristin]

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?

[David]

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.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[David]

Updated the CSS above

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Kristin]

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

[David]

Ooops… made a mistake, corrected the CSS above… fingers crossed 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Kristin]

YESSSS!! That did it!! Thank you SOOO much David!!! 🙂

[David]

Awesome – glad to be of help 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Szymon]

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

[Ying]

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 🙂

[Szymon]

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.

[Author]

Posts