Modify widget_product_search css and fields order

  • ahbdigital

    (@ahbdigital)


    5 years ago

    Hello,

    I have been trying to modify the default woocommerce search bar without a lot of success. So after hours on this I am reaching out for help !
    So far, I have managed to add text before with css ::before and to change border-radius for 2 elements. I cannot find the class of the the input field element.

    In my wildest dreams, usually possible with css but this one seems out of my reach, I would like to do the following :
    – Show the category dropdown before the input field
    – Change the default dropdown select (right now “All categories”)
    – Remove white background for both fields (show none in dropdown and only a bottom line in input field)

    If anyone has ever done that or knows how to and have the time to write it down for me I would really appreciate the help !

    Thank you very much !

    The page I need help with: [log in to see the link]

Viewing 4 replies - 1 through 4 (of 4 total)
  • Carike

    (@carike)

    5 years ago

    – Show the category dropdown before the input field
– Change the default dropdown select (right now “All categories”)

    Those two are not done via CSS.
    You would need to make edits to your theme’s PHP in order to do that (at least until Full Site Editing becomes available in WordPress core, in which case, you would just be able to change the order of the blocks for the first).
    It is possible to create a child theme to do that.

    – Remove white background for both fields (show none in dropdown and only a bottom line in input field)
    For that, you could use CSS, if there is a separate CSS class defined for the input (which does not seem to be the case here), by setting the opacity of the element and the border-radius and border-color properties for the class.

    Thread Starter ahbdigital

    (@ahbdigital)

    5 years ago

    Thank you for your quick answer.

    About the PHP, any idea how to do that ?

    – if there is a separate CSS class defined for the input (which does not seem to be the case here)

    This is what I said in my message yes. Is there a solution to modify an element which does not seem to have a class ?

    Carike

    (@carike)

    5 years ago

    > Is there a solution to modify an element which does not seem to have a class ?

    The CSS class is defined in the HTML, so it depends on where the other classes are being added, but yes, it is possible in general.
    You appear to be using Elementor’s WooCommerce product search widget, so the code that outputs that widget would need to be modified.
    Some plugins offer filters, in which case the code can be modified without changing the base plugin. Changing the base plugin, unless you have the knowledge and the time to maintain a fork of the plugin is inadvisable.
    To find out if there is a filter available for this purpose, you can ask in the Elementor support forum:
    https://wordpress.org/support/plugin/elementor/
    You may also want to read their documentation.

    > About the PHP, any idea how to do that ?

    The answer is pretty much the same as the above.
    You would need to find the code that is responsible for the output and decide on the best way to modify it.
    Again, this is most likely Elementor.

    Thread Starter ahbdigital

    (@ahbdigital)

    5 years ago

    Hello,

    Thank you for taking the time to answer.

    The widget_product_search is actually not an Elementor element as this is a WC widget.
    CSS can however be added in Elementor to modify it, PHP in theme function file.

    I found the solution myself after few headaches, so here is the class if anyone else is looking to customise the widget_product_search text input field :
    form.search-form.product-search-form input[type=text]

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Modify widget_product_search css and fields order’ is closed to new replies.

Tags