Style WooCommerce Product Search Widget

WordPress Development Asked by Chirlet Deusa on December 19, 2020

good evening.

I got this custom CSS code for the WooCommerce product search bar on the generatepress forums, thanks to David.

When I enter that custom CSS code, the search bar looks like this:

search bar with this CSS

.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: "seach";
    font-family: "Arial";
    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;

I want the bar to stay that way but with the "search" button on the right side, like this:
search bar I want

Please, could you help me to do it? I would appreciate it very much.

—EDIT 12/11/2020—


<div class="woocommerce widget_product_search"><form role="search" method="get" class="woocommerce-product-search" action="">
    <label class="screen-reader-text" for="woocommerce-product-search-field-0">Search for:</label>
    <input type="search" id="woocommerce-product-search-field-0" class="search-field" placeholder="Search products&hellip;" value="" name="s" />
    <button type="submit" value="Search">Search</button>
    <input type="hidden" name="post_type" value="product" />

Add your own answers!

Ask a Question

Get help from others!

© 2024 All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP