Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
  • #15299

    Hi there,

    Ok, so there are two parts to this question, hope they’re not too complex!

    I’d like to add a simple div to the header, just a white bar with a logo in it. Sounds easy enough, I hope?

    But, I’d also like to add the Woocommerce login into this div, and I will hopefully be able to style the CSS of this to make it look how I want it to.

    This is a mocked up image (just badly photoshopped in what I need at the top there onto my existing page) –

    Can anyone help me with this? Thank you so much!




    I think you can edit header.php and find this code.

    <div class='container_wrap' id='header'>

    Insert the logo there and the woocommerce login then style it on your custom.css, just adjust the style as you see fit.

    #header {
    background: white;
    height: 100px;
    margin-bottom: 50px;
    margin-top: 50px;




    Awesome, thanks for that. What exactly do I need to insert into the header on the Woocommerce side though? (the link to the widget?)

    Sorry, I have no idea on what code to insert here…


    Nevermind, think I worked around it. BUT, was wondering if I could find out how to style the widget so it appears more horizontally so it fits into the top bar? Also, I tried to fix it’s position in CSS but it’s not staying in place…

    Site can be seen here: , you’ll see what I mean.

    Thank you!


    Hi thewerkhaus,

    You’ll need to use something like Firebug for Firefox or Chrome/Safari’s Inspect element to identify what css needs to be changed for that specific widget. You can begin each new rule with:


    followed by the class names so that you are only targeting that single widget and then style it as you need. Unfortunately we aren’t able to get into individual design and customization at that level through support.



Viewing 5 posts - 1 through 5 (of 5 total)

The topic ‘Add DIV to header + customise Woocommerce login’ is closed to new replies.