Archived topic
Page Header on WooCommerce Product Archive not working
7 replies · Started by Joe on June 3, 2019
Hello,
I'm currently unable to get a Page Header element to work on the WooCommerce Product Archive: https://impressionberlin.com/all-products/
I have a Page Header set-up and set to Custom Image, but it does not display the image. (If I add a div with text to the page header content it does display, so the problem is not with the display rule).
On the other pages on the site, I am only able to display Page Header images by using Featured Image — if I set them just as a custom image, they do not display. (eg. https://impressionberlin.com/studio/ — the Page Header is displaying featured image)
Could you make any suggestions of how to fix this, please?
Hi there,
this page: https://impressionberlin.com/studio/ isn't actually showing the Header Element background but the normal featured image for that page - edit the header element and add some Top and Bottom padding to the element and you will see what i mean.
Is this possibly the issue you're having with the Product Archive? Let me know.
Hi David. Thank you!
You're quite right, so the question is: why aren't Page Header Elements displaying backround images?
The header element requires top and bottom padding to give it some height - if the padding is 0 and there is no content in the element than it has zero height.
Thank you — I had a feeling it would be something simple that I was missing :)
You're welcome.
As a guide for making images show full size and to be responsive use % top / bottom padding instead of pixels. Best method is to calculate the aspect ratio % by dividing the original image height by its width. The % you have should then be applied as the total top and bottom padding.
Thanks again — I was going to ask about making it responsive.
I've done what you suggested, but that sets the padding as a percentage of the browser width, not the container, right?
So on larger screens, where browser is considerably wider than container, the padding is too great. ( as seen on staging site: https://incandenza.net/impression_DEV/all-products/ )
I guess I just have to address that with responsive CSS for the largest screens, unless you can suggest something else I'm missing..?
Use the pixel padding for desktop and % padding for mobile.
