How to add product search into…?

[marjolein23]

Hello Harry,

I discover I did forgot to add the product search into the shop, I have a Question..

Is it possible to add the product search in the shop menu and/or in the shop page by example before the sort by drop-menu ?

This is the product search i’m talking about:

In shop menu (header): Possible right-side ?

 

before the sort by drop-menu: Possible ?

Is it eventually possible to adapt the dimension of the product search widget in woocommerce sidebar and woocommerce filter ?

Thanks for your help.

Best regards,

Marjolein

 

[Harry]

Hi,

1. Sorry it can’t add search box on menu navigation and next to Sortby drop down. It have search icon on top right

2. Please add search to both WooCommerce Sidebar and Filter Sidebar it work well.

Best regards

Harry
Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

[jameslei]

I have already added this below code. I want the button to change color when I hover on the product search button and also I need rectangular button. How can I write the code?

.widget .woocommerce-product-search label, .widget .woocommerce-product-search .search-field { width: calc(100% – 120px) ; margin-left: 0;}
.widget .woocommerce-product-search button { background: #222; color: #fff;}

PANDALER [ https://pandaler.com/ ] - The Very Coolest of Panda Stuffs In One Place For You And Everyone In Your Life Who Loves Panda!

[marjolein23]

This reply has been marked as private.

[Harry]

Hi,

I help you fix the issue with search on filter sidebar.

Best regards

Harry
Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

[marjolein23]

Hello Harry,

Great ! Thank you so much for your help!

Have a nice evening.

Kind regards,

Marjolein

[Harry]

Hi,

Please add below code to Claue > Theme Option > General Layout > Custom CSS

.widget .woocommerce-product-search, .widget .search-form,
.widget .woocommerce-product-search .search-field,
.widget .woocommerce-product-search button {
	border-radius: 0;
}
.widget .woocommerce-product-search button { background: #222; color: #fff;}
.widget .woocommerce-product-search button:hover { background: #56cfe1 !important; border-color: #56cfe1 !important;}

and change #56cfe1 with your color

Harry
Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

[jameslei]

Thanks for your help. It’s almost perfect for me. I want to adjust the space between search button and box. I think it is too wide.

PANDALER [ https://pandaler.com/ ] - The Very Coolest of Panda Stuffs In One Place For You And Everyone In Your Life Who Loves Panda!

[jameslei]

I found the other thing that ADD TO CART. It seems the size is bigger than the normal size. How can I change its size?

PANDALER [ https://pandaler.com/ ] - The Very Coolest of Panda Stuffs In One Place For You And Everyone In Your Life Who Loves Panda!

[Harry]

Hi,

1. Please add below code

.widget .woocommerce-product-search .search-field {
	width: calc(100% - 120px);
}

2. Could you create new topic with your site url. I will check and help you solve.

Thanks

Harry
Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

[Author]

Posts