Return to previous page

Advanced Woo Search CSS / stylize like default theme search bar

This topic has 4 replies, 3 voices, and was last updated 1 years, 3 months ago ago by Rose Tyler

HUSSTLE

Participant

July 24, 2023 at 16:31

I have implemented “Advanced Woo Search” to replace the default Woo Search to present products based on our current search criteria and how upper management has determined products to be searchable.

Question, when implemented it takes on a “less desirable” look and I would like to stylize as the default theme look. Any assistance to provide CSS?

https://pasteboard.co/1HLySAAeXB4C.png

Please, contact administrator
for this information.

#362823 Copied Theme version: 9.1.7 WooCommerce version: 7.8.0

3 Answers
Tony Rodriguez

Support staff

July 25, 2023 at 09:33
Hello @HUSSTLE,

We understand that you are using a third-party plugin, and as such, the theme options will not work on it. If you wish, you can use the following Custom CSS code to change the appearance of the plugin:
```
.aws-container.aws-js-seamless {
    width: 100% !important;
}
#header .aws-container .aws-search-form .aws-search-btn.aws-form-btn {
    background-color: #fff !important;
 
}
#header .aws-container .aws-search-form .aws-search-btn svg {
    fill: #000 !important;
}
.aws-container .aws-search-form {
    height: 50px !important;
}
```
Please copy and paste this code into Xstore >> Theme Options >> Theme Custom CSS >> Global CSS, and then clear your browser cache.

The result should look like this: https://postimg.cc/d7zVCkNf

We hope this helps.

Best Regards,
8Theme’s Team.
#362909 Copied
HUSSTLE

Participant

July 25, 2023 at 14:54

Wonderful.

One additional request with regards to CSS and styling, how can the search bar have rounded corners to closely match the default search bar?

In the end, I want the custom plugin to visually look as close to the theme search.

Thanks!

#362946 Copied
Rose Tyler

Support staff

July 25, 2023 at 15:44
Hello @HUSSTLE,

Thank you for your response.

Have you tried to contact support of the plugin?
Please note that we do not provide support for 3rd-party plugins, because this is out of our basic support scope.

The next code can be used to change the border-radius:
```
header .aws-container .aws-search-form, header .aws-container .aws-search-field {
    border-radius: 5px 0px 0px 5px !important;
}
#header .aws-container .aws-search-form .aws-form-btn {
    border-radius: 0px 5px 5px 0px !important;
}
header form.aws-search-form.aws-show-clear {
    border-radius: 5px !important;
}
```
We hope this information is helpful.

Best Regards,
8Theme’s Team.
#362951 Copied
Tagged: advanced woo search, default theme, json, stylize, woocommerce, wordpress templates
Viewing 4 results - 1 through 4 (of 4 total)

The issue related to '‘Advanced Woo Search CSS / stylize like default theme search bar’' has been successfully resolved, and the topic is now closed for further responses

Advanced Woo Search CSS / stylize like default theme search bar

Recent Topics

Helpful Topics

Useful links WooCommerce & WordPress

Browse by popular tags:

Explore our best WordPress WooCommerce Themes collection