I am trying to get rid of the purple search button... See attached. Th WordPress

Arnav Joy answers:

I think there should bw setting in admin panel to disable it.. else we can hidw it using CSS.
Let me know what you prefer.?

Dario Ferrer answers:

The direct answer is:

.woocommerce-product-search > button {
display: none
}

You paid $25. I think you deserve a bit more than a 3 words answer.

In my opinion the button is a very important element of a search form, which must to be always present. The reasons are directly related to nothing less than accesibility and usability.

What we can do, is turning the Search Form into something nicer. In your case, a little rearrange of the other 2 columns was necessary (you header is composed by 3 main columns). Now we will create a new css file, so it will not be necessary to touch the existing files.

1) In you functions.php file, paste this little code:

add_action( 'wp_enqueue_scripts', 'include_styles_0165k', 100 );

function include_styles_0165k() {
$url = trailingslashit( get_stylesheet_directory_uri() );
wp_enqueue_style( 'style-0165k', $url . 'storefront/assets/sass/mods.css', array() );
}

2) Now paste the following code to an empty css file, and name it "mods.css". Save it in your theme:

https://www.national-park-posters.com/wp-content/themes/storefront/assets/sass/mods.css

3) Finally, this is the code to copy.

@media screen and (min-width: 1170px) {

.sp-header-active .sp-header-row {
display: flex;
height: 82px;
}

.sp-header-active .sp-header-row > * {
flex: 1 1 0;
width: auto;
height: 82px;
margin: 0;
float: none;
position: relative;
}

.sp-header-active .sp-header-span-3 {
align-items: stretch;
flex: 0 0 350px;
padding: 0 50px 0 0;
}

.sp-header-active .sp-header-span-3 .site-branding {
width: 100%;
float: none;
}

.sp-header-active .sp-header-span-2 {
flex: 0 0 280px;
}

.sp-header-active.woocommerce-active .site-header .site-search,
.sp-header-active.woocommerce-active .site-header .widget_product_search {
width: 100%;
height: 60px;
padding: 0;
}

.sp-header-active .sp-header-span-2 > *,
.sp-header-active .sp-header-span-2 > * > *,
.sp-header-active .sp-header-span-2 > * > * > * {
width: 100%;
padding: 0;
}

.sp-header-active .sp-header-span-2 .woocommerce-product-search {
height: 48px;
display: flex;
position: absolute;
bottom: 15px;
}

.sp-header-active .sp-header-span-2 .woocommerce-product-search::before {
content: none;
}

.site-search .widget_product_search form input[type="search"] {
flex: 1 0 auto;
max-width: calc( 100% - 48px );
font-size: 14px;
width: 100%;
height: 48px;
display: block;
color: #fff;
background: rgba(0, 0, 0, 0.2);
border: 0;
padding: 6px 20px;
}

.site-search .widget_product_search form label {
display: none;
}

.site-search .widget_product_search form button {
flex: 0 0 48px;
display: block;
height: 48px;
background: rgba(0, 0, 0, 0.3);
float: none;
box-sizing: border-box;
padding: 0;
position: relative;
color: transparent;
overflow: hidden;
text-align: center;
}

.site-search .widget_product_search form button::before {
font-family: FontAwesome;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
content: "\f002";
width: 100%;
height: 48px;
font-size: 15px;
text-align: center;
line-height: 48px;
color: #fff;
}

.sp-header-active.woocommerce-active .site-header .main-navigation {
min-width: 560px;
}
}

@media screen and (max-width: 1170px) {
.sp-header-active .sp-header-span-2 {
display: none;
}
}

The result will be something like this:

Dario Ferrer comments:

If you have any question or comment, I will be here.

Jayaram Y answers:

Add this to your child theme CSS or Custom css section
.woocommerce-product-search button {
display: none
}


Cesar Contreras answers:

Only use this css code

.woocommerce-product-search > button {
display: none !important;
}