In this post we’re going to explain how to integrate Google Customer Reviews into your WooCommerce Store. If you’re not comfortable adding snippets to your site, you might like to use the free Easy WC Google Merchant Center Reviews plugin or the premium Google Merchant Center Customer Reviews Integration plugin. It’s really simple to do without a plugin though, all you need to do is use the following snippet and change the relevant parts:
/**
* Add Google review language scripts
*/
add_action( 'wp_enqueue_scripts', 'snippetpress_google_customer_reviews_language', 20 );
function snippetpress_google_customer_reviews_language() {
$snippetpress_customer_reviews_language_script = 'window.___gcfg = {lang: \'en_GB\'};'; // Replace en_GB with your language
wp_register_script( 'snippetpress_customer_reviews_language_script', '', '', 'false', 'true' );
wp_enqueue_script( 'snippetpress_customer_reviews_language_script' );
wp_add_inline_script( 'snippetpress_customer_reviews_language_script', $snippetpress_customer_reviews_language_script );
}
/**
* Add Google Reviews request to order thank you page
*/
add_action( 'woocommerce_thankyou', 'snippetpress_google_customer_reviews_optin' );
function snippetpress_google_customer_reviews_optin( $order_id ) {
$order = new WC_Order( $order_id );
$snippetpress_google_customer_reviews_opt_in_script_js = '<script src="https://apis.google.com/js/platform.js?onload=renderOptIn" async defer></script>';
echo $snippetpress_google_customer_reviews_opt_in_script_js;
$snippetpress_google_customer_reviews_opt_in_script = '
window.renderOptIn = function() {
window.gapi.load(\'surveyoptin\', function() {
window.gapi.surveyoptin.render(
{
// REQUIRED FIELDS
"merchant_id": "123456789", // Replace with your merchant ID
"order_id": "' . $order->get_order_number() . '",
"email": "' . $order->get_billing_email() . '",
"delivery_country": "' . $order->get_billing_country() . '",
"estimated_delivery_date": "' . date( 'Y-m-d', strtotime( '+5 day', strtotime( $order->get_date_created() ) ) ) . '", // Replace 5 with the estimated number of days until the order is delivered
"opt_in_style": "CENTER_DIALOG" // Replace with the desired popup position
});
});
}';
wp_register_script( 'snippetpress_google_customer_reviews_opt_in_script', '', '', 'false', 'true' );
wp_enqueue_script( 'snippetpress_google_customer_reviews_opt_in_script' );
wp_add_inline_script( 'snippetpress_google_customer_reviews_opt_in_script', $snippetpress_google_customer_reviews_opt_in_script );
}
/**
* Add Google Reviews badge to site
*/
add_action( 'wp_enqueue_scripts', 'snippetpress_google_customer_reviews_badge', 20 );
function snippetpress_google_customer_reviews_badge() {
$snippetpress_google_customer_reviews_script = '<script src="https://apis.google.com/js/platform.js?onload=renderBadge" async defer></script>';
echo $snippetpress_google_customer_reviews_script;
$snippetpress_google_customer_reviews_badge_script = '
window.renderBadge = function() {
var ratingBadgeContainer = document.createElement("div");
document.body.appendChild(ratingBadgeContainer);
window.gapi.load(\'ratingbadge\', function() {
window.gapi.ratingbadge.render(ratingBadgeContainer, {
"merchant_id": "123456789", // Replace with your merchant ID
"position": "BOTTOM_LEFT" // Replace with the desired rating position
});
});
}';
wp_register_script( 'snippetpress_google_customer_reviews_badge_script', '', '', 'false', 'true' );
wp_enqueue_script( 'snippetpress_google_customer_reviews_badge_script' );
wp_add_inline_script( 'snippetpress_google_customer_reviews_badge_script', $snippetpress_google_customer_reviews_badge_script );
}
In the above code, there are a few things that you will need to change, depending on your requirements.
First of all, you will need to define what language you want the review request popup to display in on the thank you page. Google allows the following language codes:
- af
- ar
- bg
- ca
- cs
- da
- de
- el
- en
- en-AU
- en-GB
- en-US
- es
- es-419
- fa
- fi
- fil
- fr
- ga
- hi
- hr
- hu
- id
- it
- iw
- ja
- ko
- lt
- lv
- ms
- nl
- no
- pl
- pt-BR
- pt-PT
- ro
- ru
- sk
- sl
- sr
- de
- te
- th
- tr
- uk
- vi
- zh-CN
- zh-TW
Next you will need to insert your merchant ID. This can be found by logging in to the Google Merchant Center and looking in the top right corner. Your merchant ID will be a 9 digit number. There are two places in the snippet that this needs entering.
Next you need to enter the estimated number of days from when your customers place an order to when they receive the order. In the snippet above this is set to 5 days.
Next you need to choose where on the screen you want the review request form popup to display on the order thank you page. In the snippet above this is set to CENTER_DIALOG. Possible options are:
- CENTER_DIALOG
- BOTTOM_RIGHT_DIALOG
- BOTTOM_LEFT_DIALOG
- TOP_RIGHT_DIALOG
- TOP_LEFT_DIALOG
- BOTTOM_TRAY
Finally you need to choose where on your store you want the Google Customer Reviews Badge to display. In the snippet above it is set to BOTTOM_LEFT. Possible options are:
- BOTTOM_LEFT
- BOTTOM_RIGHT
Please note, your rating will only display once you’ve received around 100 reviews. Until that time, it is advised to remove the code that displays the ratings badge, as until your rating is showing it will just say “No rating available”.
Once you have inserted the snippet into your site, the Google Customer Review Opt In Form will display on the order thank you page when a customer has placed an order. Your Ratings Badge will also begin showing on your site.
Where to add the snippet?
The snippet should be placed at the bottom of the functions.php file of your child theme. Make sure you know what you’re doing when editing this file. Alternatively, you can use a plugin such as Code Snippets to add the custom code to your WordPress site. If you need further guidance on how to add the code, check out our post on How to Add WordPress Snippets.
Leave a Reply