[Resolved] Style WooCommerce Product Search Widget

Home Forums Support [Resolved] Style WooCommerce Product Search Widget

Home Forums Support Style WooCommerce Product Search Widget

Viewing 15 posts - 1 through 15 (of 16 total)
  • Author
  • #825027

    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:

    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
    Customer Support

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

    Customer Support

    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?

    Customer Support

    You can send them via the Account Issue form here:


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

    Customer Support

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

    Customer Support

    Ooops… made a mistake, corrected the CSS above… fingers crossed πŸ™‚


    YESSSS!! That did it!! Thank you SOOO much David!!! πŸ™‚

    Customer Support

    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.
    woocommerce product search bar

    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:

    function generate_add_custom_search()
          echo '<div class="custom-search">';
          echo '</div>';

    I would apreciate any help <3

    Customer Support

    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.

Viewing 15 posts - 1 through 15 (of 16 total)
  • You must be logged in to reply to this topic.