Woocommerce search widgets

For some reason the Woocommerce widgets look awful.

Syndey Pro put a submit button below the search.
I’ve been looking quite a while for a solution to have a fa-search icon inline the search field.

Also the standard filter widget look awful.

https://www.vanal.be/nl/product/

Hello there,

To resize the search input field and put a search icon, add the below CSS code to Appearance > Customize > Additional CSS from dashboard.

    .woocommerce-product-search .search-field {
      width: calc(100% - 118px);
      width: -moz-calc(100% - 118px);
      width: -webkit-calc(100% - 118px);
      padding-left: 25px;
    }

    .woocommerce-product-search {
      position: relative;
    }

    .woocommerce-product-search:before {
      font-family: FontAwesome;
      content: '\f002';
      position: absolute;
      top: 23px;
      left: 5px;
      color: #ccc;
    }

Regarding the design aspect of the product filter widget, do you have a recommendation we should apply in future update?

Regards,
Kharis

Thanks Kharis,

This is almost what I wanted.
I meant how to turn the search button into a \f002 and place it inside the search field on the right.

Like this search widget in the header https://shop.8tone.be

I would suggest at least a unified look for widgets that come with Woocommerce.
Right now with the update Woocommerce 3.0 they changed the filter field.
Bigger and with rounded corners while the search widget has a better size and comes without rounded corners.

The option to have the search button or search icon inline the search field would help many Sydney Pro users.
Also If I may suggest the ability to choose wether the below header widget area is shown on a page or not.
Sticky or not.

Try and checkout the search widget on mobile placement… I use the below header widget area to have the search in a logically place but sadly it’s on every page.

Anyway I really like appreciate the way you guys are working and helping out your customers.

Is it possible to change the search field like that ?

Can you help me further with this topic ?

Hello there,

I would like to apologize in advance for the long delay as it requires some code testing. Please try these steps:

  1. Install and activate the TC Custom JavaScript plugin
  2. Go To Appearance > Custom JavaScript
  3. Paste the following code into the provided box
    (function($){

      $('.woocommerce-product-search input[type="submit"]').remove();
      $('.woocommerce-product-search').append('<button type="submit"><i class="fa fa-search"></i></button>');

    })(jQuery);

4 . Update
5 . Add this CSS code to Appearance > Customize > Additional CSS from dashboard.

    .woocommerce-product-search .search-field,
    .woocommerce-product-search button[type="submit"] {
      float: left;
    }
    .woocommerce-product-search .search-field {
      width: calc(100% - 70px);
      width: -moz-calc(100% - 70px);
      width: -webkit-calc(100% - 70px);
      padding-left: 25px;
      border-right: none;
    }
    .woocommerce-product-search button[type="submit"] {
      font-family: FontAwesome;
      width: 70px;
      padding-left: 0;
      padding-right: 0;
      margin-top: 0;
      border-radius: 0;
    }

Regards,
Kharis

Awesome thanks a lot !

You’re welcome!

Please let us know in a new topic if you have any further questions, or if we can provide you with any other assistance.

Regards,
Kharis