Website Building » WooCommerce » How Do I Edit the WooCommerce Product Search Widget?

How Do I Edit the WooCommerce Product Search Widget?

Last updated on January 18, 2023 @ 6:11 am

If you want to change the look of the WooCommerce product search widget, there are a few things you can do. By default, the product search widget is just a simple text box. However, you can easily change the look of the widget by editing the HTML code.

To edit the WooCommerce product search widget, simply go to Appearance > Widgets and click on the WooCommerce Product Search widget.

From here, you can change the Title, Placeholder Text, and Button Text. You can also change the Layout of the widget from vertical to horizontal.

In addition to changing the appearance of the WooCommerce product search widget, you can also style the text within the widget. To do this, simply go to Appearance > Customize > Additional CSS. From here, you can add any CSS code you want. For example, if you want to make the text within the widget bold, you would add the following code:

.widget_product_search 
    .woocommerce-product-search input[type="search"], 
    .woocommerce-product-search input[type="submit"] {
    font-weight: bold;
}

Conclusion:
If you want to change the appearance of your WooCommerce product search widget, or style the text within it, there are a few things you can do. However, by editing the HTML code or adding CSS code, you can easily change its appearance.

Dale Leydon

Dale Leydon

Sysadmin turned Javascript developer. Owner of 20+ apps graveyard, and a couple of successful ones.