Search code examples
csswordpresssearchwoocommercesearchbar

how can i edit the look and position of wordpress searchbar?


I am using a premium woocommerce theme.I don't like the position and look of the search-bar.Its tiny and I want to make it look like Google search-bar.So I want to change it.I don't know coding that well.What specific thing should I do to make it happen.What coding language I have to learn to do this?


Solution

  • If you are lucky the Premium WooCommerce theme which you have bought must have an option to add Custom Code(CSS) through the WordPress dashboard itself.

    If not please go through the following procedure:

    You can change the look and position of the WordPress searchbar using CSS. In order to add the CSS to your WordPress site you need to know basics of PHP how exactly WordPress works.

    You need to enqueue style in theme's(Creating a child theme of your theme is more preferable to avoid the loss of code due to theme update) function.php file or using you own custom plugin.

    Both these options are given in details in this link.

    Languages you need to know: PHP, CSS

    You need not have to be master of PHP to do the changes just the basics of php is fine.