Docs

[amihaidani]

Hello,

If i add a search field for products, using woocommerce own search widget, or a plugin like yith ajax search – it always using the theme’s search field design, which is great – but the magnifying glass button is not clickable! so, if both plugins act this way, i guess it’s an X issue.

Any help with that?
Thank you

[amihaidani]

This reply has been marked as private.

[Jade]

Hi there,

Please add this code in the CSS customizer:

.form-search:before, .widget_product_search form:before {
    cursor: pointer;
}

then add this in the custom JS:

(function($){

    $('.form-search:before, .widget_product_search form:before').on('click',function(){
         $(this).closest('form').submit();
    });

})(jQuery);

Hope this helps.

[amihaidani]

Thank you for your reply.

It makes the button look like it’s clickable now, but clicking on it does nothing.

[Rad]

Hi there,

Javascript events are not attachable to CSS pseudo selector. It has to be an existing element like a real button.

Please remove the javascript code and add this CSS 🙂

.widget_product_search input[type="submit"] {
    display: block !important;
    padding: 0px;
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 31px;
    overflow: hidden;
    text-indent: 100px;
    border: 0px;
    background: transparent;
}

Cheers!

[amihaidani]

That did the trick. Thank you!

[Rue Nel]

You’re welcome! We’re happy to help you out.
If you need anything else we can help you with, don’t hesitate to open another thread.

[Author]

Posts