How Can I Put a Header Image on a Single Product Page?

Hi, I’m using WooCommerce with your theme and I’d like help with a couple of things if possible please!

  1. I’ve added a slider to the shop page, but for the single product pages, where the slider image would go at the top of the page (below masthead) I’d like an image to go there instead (which shows behind the nav bar), but I haven’t got a clue how to do this!

  2. Is it possible to have a background image for the nav bar, but to keep the transparent colour overlay that is currently there at the minute?

I’ll put the URL in a secure note as I’m building it on a temporary link.

Thanks!

Hi There,

You should setup a child theme first: https://theme.co/apex/forum/t/setup-how-to-setup-child-themes/57.

It could be achieved with the global block, please create your global block. After that adding this custom code under functions.php file locates in your child theme:

add_option( 'x_after_view_global__slider-below', 'print_product_image' );
function print_product_image(){
	if(is_singular( 'product' )){
		echo do_shortcode( '[your-global-block-shortcode]' );
	}
}

Please add this custom CSS under Theme Options > CSS:

.x-navbar {
    background: rgba(0,0,0,0.5) url(//media.istockphoto.com/vectors/rumpled-paper-vector-pattern-gray-and-white-crumpled-background-vector-id696514968) repeat !important;
}

Hope it helps :slight_smile:

Hi, that’s great thanks! Can you let me know how to do it so it applies to all pages apart from the Home page - is that possible to do?

Thanks!

Hi There,

If it is a page, you can set your Slider as Feature Slider Below Masthead of the page.

Features Sliders Below/Above Masthead

Hope it helps,
Cheers!

Hi @friech, I’m not too sure how that will work for single product pages, as those pages don’t exist in the page listings of the dashboard.

@thai, would you mind letting me know how to do it so it applies to all pages apart from the Home page - if that’s possible to do.

Thanks!

Hi @core365

In the code above, replace:
if(is_singular( 'product' )){

with:

if(!is_home()){

Thanks.

Thanks!

The background image for the nav bar is on all the pages, but I don’t want it to appear on the Home page. I’ve tried to add in some code myself, but it’s not working! I’ll p

.page:not(.home) .x-navbar {
    background: rgba(0,0,0,0.2) url(//media.istockphoto.com/vectors/rumpled-paper-vector-pattern-gray-and-white-crumpled-background-vector-id696514968) repeat !important;
}

Hope you can help!

Thanks!

Hi again,

I tested your code using developer’s tool and it is working just fine. The background image doesn’t appear on homepage.

.page:not(.home) .x-navbar {
    background: rgba(0,0,0,0.2) url(//media.istockphoto.com/vectors/rumpled-paper-vector-pattern-gray-and-white-crumpled-background-vector-id696514968) repeat !important;
}

This could just be a cache issue, you could try clearing out the all caches including browser’s cache and see if this resolves the issue.

Hope this helps!

Ah, it’s because I just happened to view the shop page at the time and it wasn’t applied on there, so I’ve added in some more CSS for it to show on those pages too!

.woocommerce .x-navbar {

Thanks for your help!

I was wondering if the background image can be made transparent? I’ve searched for how to set the opacity within the CSS but can’t find a fix! is it possible to do?

.page:not(.home) .x-navbar {
    background: rgba(0,0,0,0.2) url(//media.istockphoto.com/vectors/rumpled-paper-vector-pattern-gray-and-white-crumpled-background-vector-id696514968) repeat !important;
}

Thanks!

Hi again,

Regretfully there is no way to make background image transparent using CSS but there is a work around mentioned in this article https://css-tricks.com/snippets/css/transparent-background-images/

Alternatively you can make your image transparent in photo editing software such as Photoshop.

Hope this helps!

That’s a shame, but thanks for letting me know, I’ll just get it done in Photoshop!

Thanks!

You’re welcome.

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.