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: .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=";; //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

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"; //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

• woocommerce-offtopic
• gallery
• open-graph

• You'll want to change the wp_get_attachment_image_url() to be whatever the function is to get the WC gallery images. WooCommerce is technically off-topic here but I think this is 'standard' enough WordPress stuff that I hope you get an answer. – Tony Djukic Commented Feb 25, 2021 at 18:24
• Thanks Tony, I thought it would be that simple too, but everything I tried didn't work! Needless to say I was happy to come across a solution! :) – Daniel Commented Feb 26, 2021 at 3:58

2 Answers 2

You will need to use the methods on one of the WooCommerce product object

for example:

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"; //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{
        $product = wc_get_product($post->ID);
        $image = wp_get_attachment_image_src($product->get_image_id(), 'full');
        echo '<meta property="og:image" content="' . $image . '"/>';
    }
    echo "
";
}
add_action( 'wp_head', 'insert_fb_in_head', 5 );

Thank you for your help, but something in that code broke the site (likely a small oversight by one of us). :)

I did however find 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.

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"; //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 everyone.