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

Question

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

Daniel

2021年2月26日 03:56

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

Topic woocommerce-offtopic open-graph gallery Wordpress

Category Web

Daniel · Accepted Answer · 2021年2月26日 03:56

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.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 everyone.

Coder At Heart · Accepted Answer · 2021年2月25日 08:46

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.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{
        $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 );

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

About