Search Bars

[leadgenmedia]

Hi Swift Ideas,

1. Is it possible to have the search bar element work only for products? I’m referring to the search bar shortcode we can insert via the Swift Page Builder -> Elements -> Search.

2. Is it possible to style WooCommerce product search widget the same as simple search widget (see screenshot)?

Thank you!

Attachments:

You must be logged in to view attached files.

[Rui Guerreiro – SUPPORT]

Hi,

1) Check in Theme Options-> Header Options
In the option Header Search Post Type you can select only products.

2) I’m afraid that’s outside our support scope.

-Rui

[leadgenmedia]

Hi Rui,

Thank you for your reply.

1. I’ve already done that but I’m not talking about the header search. I’m referring to the search bar shortcode we can insert via the Swift Page Builder -> Elements -> Search. While the header search function is ALREADY set to only look for products, search bars inserted via the Swift Page Builder looks for both products and posts and searching for a query will show results in blog archives template. I’m asking if that search bar (inserted through Swift Page Builder to PAGES) can be set to look for products and products alone.

2. That’s a bit surprising, I must say. Maybe it’s my ignorance talking but I thought a widget built-in WooCommerce would have been styled anyway (since this theme is mainly built for WooCommerce). And the CSS is already there for the normal search bar, I’m simply asking how to apply the SAME styling to WooCommerce’s product search.

If that’s really outside the scope of your support, could you tell me if it’s possible to have the default search bar (that you have styled) to only look for products?

Thank you.

[David Martin – Support]

Hello,

Could you post up a link and login details to your website so we can take a further look?

Thanks,
David.

[leadgenmedia]

This reply has been marked as private.

[leadgenmedia]

This reply has been marked as private.

[David Martin – Support]

Hey,

Question 1:

Rather than use the search widget from the page builder, insert the HTML element and copy this code in. This will limit that search box to just your products.

			<div class="spb_search_widget spb_content_element col-sm-12">
				<div class="spb-asset-content">
					<form method="get" class="search-form search-widget" action="http://toonfolio.com/">
<input type="text" placeholder="Search" name="s" class="input-standard">
<input type="hidden" name="post_type" value="product" />
					</form>
				</div>
			</div>

I’ll take a look at your second issue now.

Thanks.
David.

[David Martin – Support]

For Question 2:

Please add this code to your theme options CSS input:

.widget_product_search form {
	position: relative;
}

form.woocommerce-product-search:after {
  content: "\e605";
  font-family: 'atelier';
  font-weight: normal;
  font-style: normal;
  display: inline-block;
  text-decoration: inherit;
  font-size: 18px;
  padding-right: 15px;
  position: absolute;
  float: right;
  top: 9px;
  right: 0;
  color: #333;
}

.woocommerce-product-search input {
  margin: 0;
  border: solid #e3e3e3;
  border-width: 0px 0px 2px 0px;
  width: 100%;
  height: 42px;
  font-size: 14px;
  line-height: 19px;
  padding-left: 15px;
  -moz-border-radius: 0;
  -webkit-border-radius: 0;
  border-radius: 0;
  -moz-background-clip: padding;
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
}

Thanks,
David

[leadgenmedia]

This is PERFECT. Thank you very much – I really appreciate your effort.

[Kyle – SUPPORT]

Great, thanks David