Filter wpseo_opengraph_image missing on WC_endpoint

[evertsemeijn]

What did you expect to happen?

I expected a custom og:image on the WooCommerce Thank you page.

What happened instead?

Although wpseo_opengraph_type, wpseo_opengraph_title, wpseo_opengraph_desc and wpseo_opengraph_url can be filtered on this endpoint wpseo_opengraph_image isn't available. So nothing happened.

How can we reproduce this behavior?

function fourleafed_change_opengraph_img( $img ) {
if ( ! function_exists( 'is_wc_endpoint_url' ) ) {
return $img
}
if ( ! is_wc_endpoint_url( 'order-received' ) ) {
return $img;
}
return get_field( 'seo_image', 'option' );
}
add_filter( 'wpseo_opengraph_image', 'fourleafed_change_opengraph_img' );

Technical info

• WordPress version: 4.6.1
• Yoast SEO version: 3.8.0

[stodorovic]

I can provide simple explanation, but I'm not sure 100%. You can try to create simple post which contains only text, don't set feature image.

Check filter now, it will not be triggered because post doesn't contain image.
Add image into post, filter will be triggered.

[evertsemeijn]

Can't set featured images to WooCommerce endpoints. Anyway to force show wpseo_opengraph_image?

[stodorovic]

I know, you didn't understand my logic. It's general approach, it can't work if image doesn't exist. It isn't related to woocommerce endpoints.

You can try to create simple test post and you will see. Also, it's possible to plugin can't parse shortcodes which contains images (eg. Visual editor, Divi builder, custom plugins,...) Do you have plugin for custom thank you page?

You can add custom header through action wpseo_opengraph, but I don't recommend it:

add_action( 'wpseo_opengraph','my_og_image',  35);

function my_og_image() {
        if ( function_exists( 'is_wc_endpoint_url' ) && is_wc_endpoint_url( 'order-received' ) ) {
                echo '<meta "og:image" content="..." />', "\n";
        }
}

it's possible to make better code. But it's basic logic.

PS. endpoint order-received or page use shortcode [woocommerce_thankyou] (or action woocommerce_thankyou ), if you have custom plugin/code, Yoast can't easy parse images.

[evertsemeijn]

@stodorovic Thank again for you reply. The current use-case is adding og data to the order received page because we want to encourage customers to share their order with the rest of the world. It's a custom theme, no theme builder or shortcodes.

I understand the logic of not working when there is no image. However, when using the filter I'd expect og:img to be added to the header, because, well, there is an image now… This is currently not happening. To me this is unexpected and not logic ;-)

Since you're not recommending the above snippet what would your solution be to add og data to the WooCommerce endpoints?

[stodorovic]

An option is to create page instead endpoints (if you have a lot of customization). So, you can create page and insert shortcode in content. (Similar as account, shop, checkout pages). Then you can set tags as usual.

You can see logic in plugin:

https://wordpress.org/plugins/wc-custom-thank-you/
https://github.com/SiR-DanieL/woocommerce-custom-thankyou/

When you activate plugin, you can create real thankyou page and set it. (Woocommerce -> Settings -> Checkout -> at the end you can see option ). I'm sure for all details, I done something similar before.

PS. This page will be included in sitemap, it's separate page.

[stodorovic]

It isn't directly related, but you can look screenshot at #5915, endpoint is child page of checkout, maybe it's possible without plugin.

PS. Because you want to share order, URL should contains order_id, I'm not sure that's possible with this solution.

[stodorovic]

There are ideas, you can choice something. I tried to optimize first solution for you:

//add action after Yoast action. look in wp-seo-main.php
add_action( 'template_redirect', 'my_custom_tags', 1000 );

function my_custom_tags() {

        if ( class_exists('WooCommerce') && isset( $GLOBALS['wpseo_og'] ) ) {

                if ( is_checkout() ) {
                        remove_action( 'wpseo_opengraph', array( $GLOBALS['wpseo_og'], 'image' ), 30 );
                        add_action( 'wpseo_opengraph', 'my_custom_checkout_opengraph', 30 );
                }
        }
}

function my_custom_checkout_opengraph() {

        if ( is_order_received_page() ) {
                 $image_url = '......';
                echo '<meta property="og:image" content="' . esc_attr( $image_url ) . '"/>' . "\n";
        }
}

Basically, it works, but you need to check it after each Yoast update (it's possible to something will be changed in the future). This code removes default yoast action and then add your custom action.

You need to add other properties. template_redirect is first action where is safe to use conditional function and you can optimize your filters in first hook.

I hope that's helpful.

[evertsemeijn]

Thanks again @stodorovic I'd rather not create a custom page, but instead use filters. I'll give your improved snippet a go tomorrow.

[stodorovic]

I checked functionality at my server. It works. If you want to customize only the order received page, the best variant is:

//add action after Yoast action. look in wp-seo-main.php
add_action( 'template_redirect', 'my_custom_og_checkout', 1000 );

function my_custom_og_checkout() {

        // Work only if Woocommerce and Yoast SEO are activated
        if ( class_exists('WooCommerce') && isset( $GLOBALS['wpseo_og'] ) ) {

                if ( is_order_received_page() ) {
                        remove_action( 'wpseo_opengraph', array( $GLOBALS['wpseo_og'], 'image' ), 30 );
                        add_action( 'wpseo_opengraph', 'my_custom_og_order_rcvd_image', 30 );
                        add_filter( 'wpseo_opengraph_title', 'my_custom_og_order_rcvd_title' );
                        add_filter( 'wpseo_opengraph_url', 'my_custom_og_order_rcvd_url' );
                }
        }
}

function my_custom_og_order_rcvd_url( $url ) {
        return home_url($GLOBALS['wp']->request);
}

function my_custom_og_order_rcvd_title( $title ) {
        $title = 'test title';
        return $title;
}

function my_custom_og_order_rcvd_image() {

        $image_url    = '......';
        $image_type   = '......';
        $image_width  = '9999';
        $image_height = '9999';

        echo '<meta property="og:image" content="' . esc_attr( $image_url ) . '"/>' . "\n";
        echo '<meta property="og:image:type" content="' . esc_attr( $image_type ) . '"/>' . "\n";
        echo '<meta property="og:image:width" content="' . esc_attr( $image_width ) . '"/>' . "\n";
        echo '<meta property="og:image:height" content="' . esc_attr( $image_height ) . '"/>' . "\n";
}

I added couple filters. You need filter for url because Yoast opengraph uses canonical URL by default.

[jonoalderson]

Related to #3638 ?
See also, #2416

[Djennez]

This was possibly fixed in #3638 so I'm closing this. If this was not fixed, please do leave a reply with your findings.