Black Friday Sale! Get up to $30 off GP Premium! Learn more ➝

[Resolved] Page Header Content

Home Forums Support [Resolved] Page Header Content

Home Forums Support Page Header Content

Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • #221033
    Andy

    Hi Tom,

    I’ve created a full-width page header on this page: http://tinyurl.com/jebzxdw

    I wanted the content to be contained so the heading would be in-line with the content below it. However, despite setting the Page Header Content Container Type to Contained the content/heading was still displaying outside of the container at the far left of the screen. To get around this I added some container HTML, so my current content looks like this:

    <div class="grid-container"><h2 style="margin-left:20px;">About</h2></div>

    Is it necessary to add markup to make the content contained or should that container type setting be doing this anyway?.

    Also, how would I go about adding the page banner to Woocommerce Category pages along with relevant headings?.

    cheers,

    Andy

    #221082
    Tom
    Lead Developer
    Lead Developer

    It should do it for you, but you have this CSS added which is stopping that from working:

    .inside-page-header-container.inside-content-header.grid-container {
        max-width: 100%;
    }

    As for the WooCommerce headings, you would need to use GP Hooks.

    Something like this: https://generatepress.com/forums/topic/page-header-addon-not-working-on-woocommerce-pages/#post-102444

    You would replace is_shop() with the conditional that meets your needs: https://docs.woocommerce.com/document/conditional-tags/

    #221164
    Andy

    Thanks Tom. I hadnt understood the container type setting correctly, when selecting fluid it makes the header background full-width but keeps the content contained. I think I had added the CSS originally to force it full-width when set to contained.

    I’ll try the GP hooks for Woocommerce too.

    Keep up the first class development work and superb support!.

    #221196
    Andy

    For the Woocommerce Category headers I tried adding the following code to the After Header GP Hook with Execute PHP enabled:

    <?php if ( is_category() ) : ?>
       <div class="page-header-image grid-container grid-parent generate-page-header"><img src="http://preview.qualitycompliments.co.uk/wp-content/uploads/2016/08/header-2.png" alt=""/></div> 
    <?php endif; ?>

    Unfortunately nothing is showing on the category pages.

    #221206
    Andy

    ok I have this working now, I needed to change the if statement to the Woocommerce specific one. Also had to change inline image html to CSS background so I could overlay the text.

    Just need to work out the best way of vertically centering the title now. Also, it would be good if the title could dynamically pulled from woocommerce based on current category instead of me having to manually create an if statement for each category

    Current code is:

    <?php if ( is_product_category('mugs') ) : ?>
       <div class="page-header-image generate-page-header category-header">
           <div class="grid-container"><h2>Mugs</h2></div>
    </div> 
    <?php endif; ?>
    #221210
    Andy

    ok, I have this working perfectly now, title is centred and it automatically displays name based on current category being viewed, incase anyone else wants to achieve this, here is all my code:

    After Header GP Hooks Code (make sure Execute PHP is ticked):

    <?php if ( is_product_category() ) : ?>
       <div class="page-header-image generate-page-header category-header">
           <div class="grid-container"><h1><?php single_term_title(); ?></h1></div>
    </div> 
    <?php endif; ?>

    CSS:

    .category-header { background: url('/wp-content/uploads/2016/08/header-2.png') no-repeat; height:170px; color:white;}
    
    .category-header .grid-container h1 { line-height: 160px; margin-left: 20px;   }

    I also removed the existing category title which sits below the Woocommerce Breadcrumb Navigation by adding the following PHP to my child theme functions file, this is entirely optional but having two category titles looked messy:

    /* Removes Category Page Titles */
    add_filter('woocommerce_show_page_title', create_function('$result', 'return false;'), 20);

    Tom, don’t know if my code is the best way to accomplish this, appreciate any input if it could be improved. I’m also looking into doing the same for individual products.

    #221219
    Tom
    Lead Developer
    Lead Developer

    Beautiful – great job! Thanks for sharing your code here, I’m sure others will find it very useful πŸ™‚

    #223025
    Andy

    I’m still trying to get the Category title to also display on Single Product pages, by altering the code from above I managed to get the header bg image to display, but not the category title, any ideas Tom?:

    <?php if ( is_product_category() || is_product() ) : ?>
       <div class="page-header-image generate-page-header category-header">
           <div class="grid-container"><h1><?php single_term_title(); ?></h1></div>
    </div> 
    <?php endif; ?>
    #223037
    Tom
    Lead Developer
    Lead Developer

    Hmm, single_term_title() should do the trick.

    Might be worth asking WC if they have any ideas why that function wouldn’t work.

    #223041
    Andy

    ok will do thanks.

    #223042
    Tom
    Lead Developer
    Lead Developer
Viewing 11 posts - 1 through 11 (of 11 total)
  • You must be logged in to reply to this topic.