Return to previous page

I want to change my search bar and “all categories”

This topic has 4 replies, 2 voices, and was last updated 1 years, 6 months ago ago by Tony Rodriguez

atahan

Participant

June 18, 2023 at 18:43

I have been using xstore furniture3 as a template for my webpage. So I want to change my search bar css styles. Because it seems very basic and useless. Also “All Categories” part is not ordered and i i couldn’t able to fix it. What should i do?

So my search bar should look like this
https://prnt.sc/u7l9Wu6YvxCy
how can i do this? I think your theme doesn’t cover this. please explain me verbosely

Please, contact administrator
for this information.

#359691 Copied Theme version: 9.1.4

3 Answers
Tony Rodriguez

Support staff

June 19, 2023 at 05:54
Hello, atahan,

Thank you for choosing XStore as your WooCommerce WordPress theme.

In order to change the search bar style, please copy and paste the following CSS code to XStore >> Theme Options >> Theme Custom CSS >> Global CSS and check back to your site after clearing the browser cache:
```
body:not(.rtl) .et_b_header-search.et_element-top-level select{    
max-width: 30% !important;
padding-left: 25px !important;     
}
.et_b_header-search.et_element-top-level .input-row{
 border-radius: 30px !important; 
}
.et_b_header-search.et_element-top-level .search-button {
    border-radius: 30px !important;
}
```
The result should look like this: https://imgur.com/raFs8mT

If you have any additional questions or concerns, please do not hesitate to reach out to us. Our support team is always available to assist you.

Best Regards,
8Theme’s Team
#359696 Copied
atahan

Participant

June 19, 2023 at 10:54

Thank you for your help, also i couldn’t able to change the button color and icon color seperately. So whenever i try to change button color icon dissappers. The search bar is “#EAEAEA” also i want button has the some code “#EAEAEA”. But icon dissappers. So button’s icon should white.

search bar is #EAEAEA
search bar button #EAEAEA
search bar button’s icon “white”

how can i fix this too? I am very appreciate your help.

#359714 Copied

Tony Rodriguez

Support staff

June 20, 2023 at 06:15

Hello, atahan,

To change the background color of the search bar, the background color of the search bar button, and the color of the search bar button’s icon, please navigate to XStore > Theme Options > Header Builder > Search > Style. Select the Input Background Color, Button Background Color, and WCAG Color according to your preference and publish the changes.

Once you have done this, please clear your browser’s cache and check back on your site.

Please refer to the image provided at the following link for further reference: https://imgur.com/robnCu6

We hope this will solve your issue.

Best Regards,
8Theme Team

#359747 Copied
Tagged: all categories, change, optimize, search bar, templates, woocommerce, wordpress
Viewing 4 results - 1 through 4 (of 4 total)

The issue related to '‘I want to change my search bar and “all categories”’' has been successfully resolved, and the topic is now closed for further responses

I want to change my search bar and “all categories”

Recent Topics

Helpful Topics

Useful links WooCommerce & WordPress

Browse by popular tags:

Explore our best WordPress WooCommerce Themes collection