WooCommerce element background

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.

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

Hi Gary,

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

Hi Fernando

This is for product/category pages.

Cheers

Gary

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

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

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

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

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

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

You're welcome