Dazzling - woocommerce product search plugin - replace Bop search box

Hi guys,

Seems the ‘Bop search’ plugin doesn’t produce accurate enough results from a search when it comes to the products especially. I have the ‘Woocommerce product search’ plugin which I would possibly replace the Bop Search plugin with, as this may be more accurate on product searches, and is bundled with woocommerce.

Now, Bop search places a search box in the header/nav. I would need to try achieve the same thing with the woocommerce search plugin (seems I have to use a WP filter for this, according to their woocommerce product search api page?).

It refers to inserting php code into a template page. Can you give me direction on which Dazzling theme template page I’m to be looking at and also where I could possibly put it within the page. I have a child theme.

Website is: http://www.bolus.co.za/

Thank you.

Hi @drazeni,

I hope you are well today and thank you for your question.

You can try achieving this by using the attached small plugin specially developed for you that contains some custom code.

Best Regards,
Movin

Movin, once again you’ve pulled a rabbit out of the bag… absolutely awesome and such a simple solution. You always go the extra mile to help! Truly appreciated and taught me something about simple plugins.

I’ve now disabled the BOP search plugin. I’m battling a little with the CSS of the new woocommerce search box. I tried to target ‘.woocommerce-product-search’ class to get the search box on the same line as the rest of the nav items (like Bop search was), but failed.

I’ve attached a screenshot of how it was, which is the aim to achieve.

Can you assist with this? It just won’t go right all the way and the cart link wants to go there instead. I’ve tried things like float:right; and a few other ways but failed.

Please check it out the test site that I use for testing instead, until everything is resolved http://d-base.dyndns.biz/bolus (note: this test site may be slow because it’s on a dev test server)

I have disabled all previous Bop CSS, just in case.

Hi @drazeni,

I waited for half an hour but your shared site is not loading at all for me.

Please advise.

Regards,
Movin

Hi Movin, my apologies, I forgot that I set the WP settings to my local IP (for speed during dev) and forgot to set them back to external URL. Please try again.

Thank you for making the site accessible.

You can try achieving this by adding the following CSS code in the Custom CSS option of your theme on the below path.

Admin Area -> Appearance -> Customize -> Dazzling Options -> Other -> Custom CSS

#logo img {
    max-width: 220px;
}
.navbar-nav form.woocommerce-product-search {
    float: left;
    margin-top: 15px;
}
.navbar-nav li.pull-right {
    float: left !important;
}
.navbar-nav form.woocommerce-product-search input.search-field {
    width: 150px;
    background-color: #8A8A8A;
    border-color: #8A8A8A;
    color: #fff;
}

Awesome Movin! Thank you very much. It’s working well on the test site. I will be implementing on the live site soon.

This small plugin could be a useful solution for many people requiring the same.

Thank you!

You are most welcome here :slight_smile: