How to add product search into…?

Topic Resolution: Resolved

This topic has 9 replies, 3 voices, and was last updated 6 years, 5 months ago by Harry.

Viewing 6 reply threads

Save

Author

Posts
- April 3, 2018 at 8:05 pm #18772
  
  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
- April 3, 2018 at 10:51 pm #18782
  
  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
  - July 26, 2018 at 1:46 pm #23261
    
    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!
- April 4, 2018 at 3:53 pm #18809
  
  marjolein23
  
  This reply has been marked as private.
- April 5, 2018 at 1:01 am #18830
  
  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
- April 5, 2018 at 9:21 pm #18856
  
  marjolein23
  
  Hello Harry,
  
  Great ! Thank you so much for your help!
  
  Have a nice evening.
  
  Kind regards,
  
  Marjolein
- July 26, 2018 at 2:12 pm #23263
  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
  - July 26, 2018 at 2:31 pm #23266
    
    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!
    - July 26, 2018 at 4:25 pm #23270
      
      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!
- July 26, 2018 at 4:31 pm #23271
  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