[Resolved] Page Header Content

[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

[Tom]

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/

[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!.

[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.

[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; ?>

[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.

[Tom]

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

[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; ?>

[Tom]

Hmm, single_term_title() should do the trick.

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

[Andy]

ok will do thanks.

[Tom]

No problem 🙂

[Author]

Posts