Target WooCommerce Product Gallery Image (rather than Featured) for og:image

Resolved

(@ddumondgmailcom)

I’m using the following code to set my Open Graph meta data in functions.php

It works great for selecting the featured image, however I would like to set it to use the product gallery image instead (which is better for social media marketing). Here’s a screen grab to be more specific: https://snipboard.io/buvHfk.jpg

How can I modify the code below to target the 1st WooCommerce gallery image? I could not find anything on this.

function insert_fb_in_head() {
    global $post;
    if ( !is_singular()) //if it is not a post or a page
        return;
        echo '<meta property="og:title" content="' . get_the_title() . '"/>';
        echo '<meta property="og:type" content="article"/>';
        echo '<meta property="og:url" content="' . get_permalink() . '"/>';
        echo '<meta property="og:site_name" content="My Website"/>';
    if( isset( $gallery_image_ids[1] ) ) { //the post does not have featured image, use a default image
        $default_image="https://www.website.com"; //replace this with a default image on your server or an image in your media library
        echo '<meta property="og:image" content="' . $default_image . '"/>';
    }
    else{
        $thumbnail_src = wp_get_attachment_image_url( $gallery_image_ids[1], 'single-post-thumbnail');
        echo '<meta property="og:image" content="' . esc_attr( $thumbnail_src[0] ) . '"/>';
    }
    echo "
";
}
add_action( 'wp_head', 'insert_fb_in_head', 5 );

Thank you in advance for your help.

Dan

This topic was modified 5 years, 3 months ago by Daniel.

Viewing 4 replies - 1 through 4 (of 4 total)

Plugin Support Gabriel – a11n
(@gabrielfuentes)

5 years, 3 months ago

Hi there 👋

This is a fairly complex development topic. I’m going to leave it open for a bit to see if anyone is able to chime in to help you out.

I can also recommend the WooCommerce Developer Resources Portal for resources on developing for WooCommerce.

You can also visit the WooCommerce Facebook group or the #developers channel of the WooCommerce Community Slack. We’re lucky to have a great community of open-source developers for WooCommerce, and many of our developers hang out there, as well.

Cheers!
Thread Starter Daniel
(@ddumondgmailcom)

5 years, 3 months ago
Hi and thanks for the other support options,

I’m not a php developer, but I didn’t think the answer would be that complex for someone in the know…

Here’s the bit of code that calls the featured image:

wp_get_attachment_image_url( $gallery_image_ids[1], 'single-post-thumbnail');

I would just like it to call the first product gallery image instead.

I tried a few variations, but it always seems to grab the feature image.

Thanks again! 🙂
- This reply was modified 5 years, 3 months ago by Daniel.
Thread Starter Daniel
(@ddumondgmailcom)

5 years, 3 months ago
I found a solution on on a another board which works great and I’d like to share it here to help others.

Credit goes to **helgatheviking** from *WooCommerce Community* on Slack (thanks for the tip @gabrielfuentes). 😉
```
    function insert_fb_in_head() {
        global $post;
        // If it is not a post or a page.
        if ( ! is_singular() ) { 
            return;
        }
        echo '<meta property="og:title" content="' . get_the_title() . '"/>';
        echo '<meta property="og:type" content="article"/>';
        echo '<meta property="og:url" content="' . get_permalink() . '"/>';
        echo '<meta property="og:site_name" content="My Website"/>';
    	$gallery_image_ids = get_post_meta( $post->ID, '_product_image_gallery', true );
    	$gallery_image_ids = wp_parse_id_list( $gallery_image_ids );
    	// The product has product gallery, use a default image.
        if( ! empty ( $gallery_image_ids ) ) {
    		$thumbnail_src = wp_get_attachment_image_url( current( $gallery_image_ids ), 'single-post-thumbnail' );
            echo '<meta property="og:image" content="' . esc_attr( $thumbnail_src ) . '"/>';     
        } else {
        	// The post does not have featured image, use a default image.
        	$default_image="https://www.website.com"; //replace this with a default image on your server or an image in your media library
            echo '<meta property="og:image" content="' . $default_image . '"/>';
        }
    }
    add_action( 'wp_head', 'insert_fb_in_head', 5 );
```
Thanks again.
Plugin Support Gabriel – a11n
(@gabrielfuentes)

5 years, 3 months ago

That’s awesome! 🎉

Glad to know that you could found a solution. If you have any further questions, you can start a new thread.

Cheers! 🙂

Viewing 4 replies - 1 through 4 (of 4 total)

The topic ‘Target WooCommerce Product Gallery Image (rather than Featured) for og:image’ is closed to new replies.

Tags