How Can I Center the search bar in store front theme?

Hi @digitsworld – you can use Powerpack for that: https://woocommerce.com/products/storefront-powerpack/

Hello sir thanks for response, is there an alternative code for that? for now i cant afford paid plugins please help thanks

Hey @digitsworld,

The search box in the header is added to the storefront_header action using the storefront_product_search function with a priority of 40 and you can see all of the actions within the storefront themes header.php file.

https://github.com/woocommerce/storefront/blob/master/header.php

You may need to move that using remove_action() and then add it to a new position by increasing or decreasing the priority using add_action().

https://codex.www.ads-software.com/Function_Reference/remove_action

https://codex.www.ads-software.com/Function_Reference/add_action

If you also need to restyle or position the box with CSS I would recommend using Google Chrome Developer Tools. You can right-click anywhere on your webpage to select ‘Inspect Element’, the HTML and CSS properties show up right in your browser.

https://developer.chrome.com/devtools

Below is a tutorial for Chrome Developer Tools that explains how to use that to locate CSS classes which you can then write custom CSS for to change the colour of desired elements on a site.

https://www.codeschool.com/courses/discover-devtools

If you’d like to learn more about CSS in general this is also a great tutorial: https://tutsplus.com/course/30-days-to-learn-html-and-css/

I cant target the specific element sir sorry im just a newbie please help

Hi @digitsworld – that’s a bit the challenge: either you go for the free approach that Stu helped with, but that’ll require upping your developer skills. Or you can pay for the Powerpack. There’s no easy in-between solution.

Hi,

I followed the advice above and removed and added the storefron_product_search as shown below:

remove_action(‘storefront_header’, ‘storefront_product_search’, 40);
add_action(‘storefront_header’, ‘storefront_product_search’, 20);

However, the product search still keeps at the right of the MyAccount link.

Does anyone know what I′m doing wrong?