- This topic has 9 replies, 2 voices, and was last updated 7 years, 8 months ago by
.
-
Posts
-
Hi Tom,
When I add a Woocommerce Product Search field to the Header widget it moves the logo over to the left so its not central anymore. Any ideas how to get around this?.
Also, I’d like to change the search text in the button to just a search icon, not sure whether it would best to copy and edit the Woocommerce template or do it via CSS?.
URL: http://tinyurl.com/zrtj257
Cheers,
AndyLead Developer
Hi Andy,
Adding something to the header changes the flow of the elements.
One solution would be making the widget absolute on desktop:
@media (min-width: 769px) { .header-widget { position: absolute; right: 20px; top: 20px; } }You might have to ask WC about the button – they might have a filter you can hook into 🙂
Thanks Tom. CSS worked, just had to increase right to 240px.
I forgot to ask, when on Mobile/Tablet I would prefer the widget to go below the logo, it currently sites above it.
Is there a filter that would do this?.
Regarding the Woocommerce search button there is a filter but if the theme has a product-searchform.php template (which GP does) then it will override the filter. So I copied the template to my child theme/woocommerce folder and then edited the html as below changing the original button to hidden:
<form role="search" method="get" class="woocommerce-product-search" action="<?php echo esc_url( home_url( '/' ) ); ?>"> <label class="screen-reader-text" for="woocommerce-product-search-field"><?php _e( 'Search for:', 'woocommerce' ); ?></label> <input type="search" id="woocommerce-product-search-field" class="search-field" placeholder="<?php echo esc_attr_x( 'Search Products…', 'placeholder', 'woocommerce' ); ?>" value="<?php echo get_search_query(); ?>" name="s" title="<?php echo esc_attr_x( 'Search for:', 'label', 'woocommerce' ); ?>" /> <input type="hidden" value="<?php echo esc_attr_x( 'Search', 'submit button', 'woocommerce' ); ?>" /> <button type="submit" class="search-submit"><span class="fa fa-search"></span></button> <input type="hidden" name="post_type" value="product" /> </form>Thought this may help someone.
Thanks for the snippet!
You can change the order of the header items with this function: https://gist.github.com/generatepress/4cfa628cec96088dcbf8dd8cf399b83e
You might need to adjust some CSS, but that should get you on your way 🙂
Hi Tom,
I added the php to my child themes functions.php file but it doesnt appear to have made any difference?.
Any help appreciated.
Cheers.
Did you change the order?
Haha, whoops, that might help. Sorry, I was working on another site at the same time and looks like I added the function then forgot to change the order. Its working great now thanks Tom.
No problem 🙂
Hi Tom,
Sorry to drag this up again. The absolute positioning for the logo works fine on my 20inch 1680×1050 desktop but if you resize the browser window eventually the widget begins to overlap the logo as you can see in the screenshot below:This means the widget wont be correctly positioned on a tablet in landscape mode.
I could add multiple media queries for different screen resolutions and adjust the right property but that could get a bit messy, so was wondering if you had a better method?Unfortunately that’s the downside to using absolute positioning.
Without it, the header widget will push the logo over a bit and won’t allow it to center properly.
One solution might be to just center the header widget below a certain media query.
- You must be logged in to reply to this topic.