[Resolved] Style WooCommerce Product Search Widget

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

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.

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.

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

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.