[Support request] WooCommerce element background

[Gary]

Hi Guys

I am wanting to add a WooCommerce featured image as the background of a page header block element but can’t get it to work. I have previously done this with (with your help) using the theme page headers and it worked great but I can’t figure out how to do it with an element.

Any guidance on this would be massively appreciated.

Thanks in advance.

Cheers

Gary

[Fernando]

Hi Gary,

You can use a Block Element – Page Hero. Reference: https://docs.generatepress.com/article/block-element-page-hero/

This should work on WooCommerce Product pages as well.

[Gary]

Hi Fernando

Sorry for the late reply, I didn’t receive an email to let me know.

This method does not appear to work with product categories, I had the same issue with the standard GeneratePress headers and you guys supplied me with some code for this. The problem is that the category image is not the featured image.

The code I was supplied for the standard GeneratePress headers is below:

add_filter( ‘generate_page_hero_background_image_url’, function( $url ) {

if ( ! function_exists( ‘get_woocommerce_term_meta’ ) ) {
return $url;
}

global $wp_query;
$cat = $wp_query->get_queried_object();
$thumbnail_id = get_woocommerce_term_meta( $cat->term_id, ‘thumbnail_id’, true );
$background_image = wp_get_attachment_url( $thumbnail_id );

if ( $background_image ) {
$url = $background_image;
}

return $url;
});

Cheers

Gary

[Fernando]

Hi Gary,

To clarify, are you wanting to add this on a Single Product Page or a WooCommerce Product Archive page/Shop Page?

[Gary]

Hi Fernando

This is for product/category pages.

Cheers

Gary

[Fernando]

I see. What are you using currently, a Block Element or a Header Element?

[Gary]

I am using a block element set to a page hero.

[Fernando]

I see, give the Container Block a class of cu-container-bg.

Adding Custom Classes: https://wordpress.com/support/wordpress-editor/adding-additional-css-classes-to-blocks/

Then, add this snippet:

add_filter('generateblocks_background_image_url', function($url, $attributes){
	if ( ! is_admin() && ! empty( $attributes['className'] ) && strpos( $attributes['className'], 'cu-container-bg' ) !== false && wp_is_mobile() ) {
		if ( ! function_exists( ‘get_woocommerce_term_meta’ ) ) {
return $url;
}
global $wp_query;
$cat = $wp_query->get_queried_object();
$thumbnail_id = get_woocommerce_term_meta( $cat->term_id, ‘thumbnail_id’, true );
$background_image = wp_get_attachment_url( $thumbnail_id );

if ( $background_image ) {
$url = $background_image;
}

	}
	return $url;
}, 10, 2);

Adding PHP: https://docs.generatepress.com/article/adding-php/#code-snippets

[Gary]

Still not working for me mate, what block settings do you have?

[David]

Hi there,

remove the snippet that Fernando provided.

And add this:

// Container Background image Product Category
add_filter( 'generateblocks_background_image_url', function( $url, $settings ) {

    // Get the category thumbnail
    global $wp_query;
	$cat = $wp_query->get_queried_object();
	$thumbnail_id = get_term_meta( $cat->term_id, 'thumbnail_id', true );
	$image_url = wp_get_attachment_url( $thumbnail_id );
    if (   
	$image_url
        && ! empty( $settings['className'] )
        && strpos( $settings['className'], 'cat-image' ) !== false
    ){
        return $image_url;
    }

    return $url;
},10 ,2 );

Then select the Container block and in Advanced > Additional CSS classes add: cat-image

[Gary]

Success!! Thanks David that’s great mate. Much appreciated!!

[David]

You’re welcome

[Author]

Posts