How to install Klaviyo Reviews for WooCommerce

You will learn

Learn how to install Klaviyo Reviews on your WooCommerce store and add reviews widgets. To learn about all the steps required to get started, head to Getting started with Klaviyo Reviews.

Before you begin

Connect your WooCommerce store to Klaviyo before installing widgets. Your store also needs Klaviyo’s onsite JavaScript to load the widgets. If you haven’t started Klaviyo Reviews setup, go to Reviews in Klaviyo and click Add reviews.

There are 4 methods of installing Klaviyo Reviews for WooCommerce. The right one for you depends on your level of technical knowledge and your WordPress setup. Use the flowchart below to select the best installation method for you.

When selecting an installation method, consider the following:

• Adding star ratings to collection pages is only supported for 2 installation methods: plugin with visual editor and shortcodes.
• Consider your level of editor access in WordPress. Not all users have the option to edit website theme files directly. If you don’t have access to your functions.php file or similar, use one of the other methods.
• Several of these methods require adding another plugin to your WordPress site. The instructions below reference the Code Snippets plugin, but Klaviyo does not endorse any particular plugin and cannot assist with plugin-related troubleshooting.

Once you’ve selected the right installation steps for you, proceed to the relevant instructions.

Learn how to install Klaviyo Reviews for WooCommerce by:

• Installing a plugin and using the visual theme editor
• Installing a plugin, without using the visual theme editor
• Adding shortcodes
• Modifying your theme files

Available reviews widgets

Once you install Klaviyo Reviews, your store will display reviews widgets, which feature rating and review details.

• Star rating widget
  Displays your current star rating for a particular product, and is most often added beneath your product’s name either on the product page or a collection page.
  

• Product reviews widget
  Shows a chart breaking down all the ratings a product received, user images submitted with reviews, and the most common feedback the product has received.
  
  Below that is a list of all published reviews and customer questions along with a search bar, review filters, a Write a Review button, and an Ask a Question button.
  
  This widget is usually added near the bottom of a product page.

• Featured review carousel widget
  Displays highlighted reviews from all your products. You can feature this on your homepage, on a standalone reviews page, or anywhere else on your site. You can also select the reviews that are featured in this widget. If available, customer-submitted images accompany each review; your product images are used if no image was submitted.
  

• SEO / All reviews widget
  Displays all your reviews across all products on a single page. Use this widget to improve your SEO and provide a single place for potential customers to see what your current customers love. This widget is most often added to a standalone Reviews page on your site.
  

Install a plugin and use the visual theme editor

This method requires a WordPress block theme with access to the Site Editor. In order to use the visual theme editor to add Klaviyo Reviews widgets to your site, you must first add a piece of code to load these drag-and-drop blocks in your theme. You can use a tool like Code Snippets to add the source code for these blocks, then use the visual theme editor to drag-and-drop Klaviyo Reviews widgets into your theme.

Add reviews widget source code

These instructions assume you have already installed the Code Snippets plugin, but you can use a different plugin instead.

1. Select Snippets > Add new from the WordPress sidebar.
   

2. In the Enter title here field, name the snippet something clear, like “Klaviyo Reviews Widgets Code”.
3. In the Functions (PHP) tab of the Code section, add the code snippet below.
4. Click Save Changes and Activate.

Reviews widget source code

function register_klaviyo_reviews_blocks() {
    // Register the blocks
    register_block_type( 'klaviyo/product-reviews', array(
        'editor_script' => 'klaviyo-block-editor-script',
        'render_callback' => 'render_klaviyo_product_reviews',
    ));
    register_block_type( 'klaviyo/product-star-ratings', array(
        'editor_script' => 'klaviyo-block-editor-script',
        'render_callback' => 'render_klaviyo_star_ratings',
    ));
    register_block_type( 'klaviyo/featured-reviews', array(
        'editor_script' => 'klaviyo-block-editor-script',
        'render_callback' => 'render_klaviyo_featured_reviews',
    ));
    register_block_type( 'klaviyo/all-reviews', array(
        'editor_script' => 'klaviyo-block-editor-script',
        'render_callback' => 'render_klaviyo_all_reviews',
    ));
}
add_action( 'init', 'register_klaviyo_reviews_blocks' );
function enqueue_klaviyo_block_editor_assets() {
    // Register and enqueue the logo image
    wp_register_script(
        'klaviyo-block-editor-script',
        false,
        array( 'wp-blocks', 'wp-element', 'wp-editor' ),
        false,
        true
    );
    $logo_url = plugins_url( 'img/klaviyo-logo.png', 'klaviyo/klaviyo.php' );
    wp_add_inline_script( 'klaviyo-block-editor-script', '
        ( function( blocks, element ) {
            var el = element.createElement;
            // Add custom category
            blocks.updateCategory( "widgets", {
                slug: "klaviyo",
                title: "Klaviyo",
                icon: el("img", { src: "' . $logo_url . '", style: { width: "20px", height: "20px" } })
            } );
            blocks.registerBlockType( "klaviyo/product-reviews", {
                title: "Klaviyo Product Reviews",
                icon: "admin-comments",
                category: "klaviyo",
                edit: function() {
                    return el(
                        "div",
                        { className: "klaviyo-product-reviews" },
                        "Klaviyo Product Reviews will be displayed here"
                    );
                },
                save: function() {
                    return null;
                },
            });
            blocks.registerBlockType( "klaviyo/product-star-ratings", {
                title: "Klaviyo Star Ratings",
                icon: "star-filled",
                category: "klaviyo",
                edit: function() {
                    return el(
                        "div",
                        { className: "klaviyo-product-star-ratings" },
                        "Klaviyo Product Star Ratings will be displayed here"
                    );
                },
                save: function() {
                    return null;
                },
            });
            blocks.registerBlockType( "klaviyo/featured-reviews", {
                title: "Klaviyo Featured Reviews",
                icon: "admin-post",
                category: "klaviyo",
                edit: function() {
                    return el(
                        "div",
                        { className: "klaviyo-featured-reviews" },
                        "Klaviyo Featured Reviews will be displayed here"
                    );
                },
                save: function() {
                    return null;
                },
            });
            blocks.registerBlockType( "klaviyo/all-reviews", {
                title: "Klaviyo All Reviews",
                icon: "admin-page",
                category: "klaviyo",
                edit: function() {
                    return el(
                        "div",
                        { className: "klaviyo-all-reviews" },
                        "Klaviyo All Reviews will be displayed here"
                    );
                },
                save: function() {
                    return null;
                },
            });
        } )(
            window.wp.blocks,
            window.wp.element
        );
    ' );
}
add_action( 'enqueue_block_editor_assets', 'enqueue_klaviyo_block_editor_assets' );
// Callback functions to render the blocks
function render_klaviyo_product_reviews( $attributes, $content ) {
    global $product;
    if ( is_product() && isset($product) ) {
        return "<div id='klaviyo-reviews-all' data-id='" . esc_attr($product->get_id()) . "'></div>";
    }
}
function render_klaviyo_star_ratings( $attributes, $content ) {
    global $product;
    if (isset($product)) {
        return "<div class='klaviyo-star-rating-widget' data-id='" . esc_attr($product->get_id()) . "'></div>";
    }
}
function render_klaviyo_featured_reviews( $attributes, $content ) {
    return "<div id='klaviyo-featured-reviews-carousel'></div>";
}
function render_klaviyo_all_reviews( $attributes, $content ) {
    return "<div id='fulfilled-reviews-all' data-id='all'></div>";
}

Add Klaviyo Reviews widgets

1. Navigate to Appearance > Editor.
2. Select Templates.
3. Choose your Single Product template. Note that it might have a slightly different name.
4. Click + to open the block menu.
   

5. Navigate to the Klaviyo section of the Blocks menu.
   

6. Drag and drop Klaviyo Reviews widgets into your theme.
7. Click Save.

Add the collections star rating widget

1. Navigate to Appearance > Editor.
2. Select Templates.
3. Choose a page that contains a collection of products.
4. Click + to open the block menu.
   

5. Navigate to the Klaviyo section of the Blocks menu.
6. Drag the Klaviyo Star Ratings widget onto any product in the collection.
7. Click Save.

.page-id-YOUR_PAGE_ID 

.klaviyo-star-rating-widget { 
    display: flex; 
    justify-content: center; 
    align-items: center; 
    text-align: center; 
    margin: 0 auto; 
}

Install a plugin and add widgets with code

This process requires adding a third-party code snippet tool, so you can add code to your site without directly editing your theme files. You can use a tool like Code Snippets to add the code for these widgets.

Add reviews widget source code

These instructions assume you have already installed the Code Snippets plugin, but you can use a different plugin instead.

1. Select Snippets > Add new from the WordPress sidebar.
   

2. In the Enter title here field, name the snippet something clear, like “Klaviyo Reviews Widgets Code”.
3. In the Functions (PHP) tab of the Code section, add the code snippets below.
4. Click Save Changes and Activate.

You must install a code snippet for each widget you plan to use. The sections below outline the code for each widget.

Product reviews widget code snippet

To adjust the location of the widget on your site, edit the location of ('woocommerce_after_single_product_summary') and priority (15) in the add_action function.

function klaviyo_add_product_reviews_widget() {
    global $product;
    if (is_product() && isset($product)) {
        $product_id = $product->get_id();
        echo "<div id='klaviyo-reviews-all' data-id='{$product_id}'></div>";
    }
}
add_action('woocommerce_after_single_product_summary', 'klaviyo_add_product_reviews_widget', 15);

Star rating widget code snippet

To adjust the location of the widget on your site, edit the location of ('woocommerce_single_product_summary') and priority (6) in the add_action function.

function klaviyo_add_product_star_ratings_widget() {
    global $product;
    if (is_product() && isset($product)) {
        $product_id = $product->get_id();
        echo "<div class='klaviyo-star-rating-widget' data-id='{$product_id}'></div>";
    }
}
add_action('woocommerce_single_product_summary', 'klaviyo_add_product_star_ratings_widget', 6);

Additional optional code snippets

Use these code snippets to add optional widgets anywhere on your site. Note that you must add these to the HTML for a specific page; they cannot be added to your functions.php file.

SEO widget

<div id='klaviyo-reviews-all' data-id='all'></div>

Featured reviews carousel widget

<div id='klaviyo-featured-reviews-carousel'></div>

Add shortcodes

This process involves registering shortcodes with a code snippet plugin, then inserting them where you want the widgets to appear. Product reviews and star ratings need a current WooCommerce product, so their placement differs from the all-reviews and featured reviews widgets.

To complete this, you must first add a third-party code snippet tool so you can add code to your site without directly editing your theme files. You can use a tool like Code Snippets to add the code for these widgets.

Register the shortcodes and add widgets

These instructions assume you have already installed the Code Snippets plugin, but you can use a different plugin instead.

1. Select Snippets > Add new from the WordPress sidebar.
   

2. In the Enter title here field, name the snippet something clear, like “Klaviyo Reviews Widgets Code”.
3. In the Functions (PHP) tab of the Code section, add the code snippets below.
4. Click Save Changes and Activate.
5. Add each widget’s shortcode where you want it to appear. In the WordPress block editor, use a Shortcode block.
6. Save or publish the page or template after adding the shortcodes.

Code snippets and shortcodes

Product reviews widget

Code snippet (add to the Functions (PHP) tab):

function klaviyo_add_product_reviews_widget() {
    global $product;
	if (isset($product)) {
        $product_id = $product->get_id();
        $tag = "<div id='klaviyo-reviews-all' data-id='{$product_id}'></div>";
		return $tag;
    }
}
add_shortcode('klaviyo-reviews-all', 'klaviyo_add_product_reviews_widget');

Shortcode: [klaviyo-reviews-all]

Star rating widget

Code snippet (add to the Functions (PHP) tab):

function klaviyo_add_product_star_ratings_widget() {
    global $product;
    if (isset($product)) {
        $product_id = $product->get_id();
        $tag = "<div class='klaviyo-star-rating-widget' data-id='{$product_id}'></div>";
		return $tag;
    }
}
add_shortcode('klaviyo_star_rating', 'klaviyo_add_product_star_ratings_widget');

Shortcode: [klaviyo_star_rating]

SEO / All reviews and featured carousel widgets

Code snippet (add to the Functions (PHP) tab):

function klaviyo_add_featured_reviews_widget() {
    return "<div id='klaviyo-featured-reviews-carousel'></div>";
}
function klaviyo_add_all_reviews_widget() {
    return "<div id='fulfilled-reviews-all' data-id='all'></div>";
}
add_shortcode('klaviyo-featured-reviews-carousel', 'klaviyo_add_featured_reviews_widget');
add_shortcode('fulfilled-reviews-all', 'klaviyo_add_all_reviews_widget');

Shortcode: [klaviyo-featured-reviews-carousel]

Shortcode: [fulfilled-reviews-all]

Modify your theme files directly

If you have access to the functions.php file of your WordPress instance, add the product reviews and star rating snippets below to that file, then save it. Your product template must support the WooCommerce hooks used by these snippets. Add the optional HTML snippets to the pages where you want those widgets to appear.

Product reviews widget code snippet

// create a function that renders a dynamic div with the correct product ID
function klaviyo_add_product_reviews_widget() {
    global $product;
    if (is_product() && isset($product)) {
        $product_id = $product->get_id();
        echo "<div id='klaviyo-reviews-all' data-id='{$product_id}'></div>";
    }
}
// place the widget after the single product summary
add_action('woocommerce_after_single_product_summary', 'klaviyo_add_product_reviews_widget', 15);

Star rating widget code snippet

// create a function that renders a dynamic div with the correct product ID
function klaviyo_add_product_star_ratings_widget() {
    global $product;
    if (is_product() && isset($product)) {
        $product_id = $product->get_id();
        echo "<div class='klaviyo-star-rating-widget' data-id='{$product_id}'></div>";
    }
}
// place the widget after the single product summary
add_action('woocommerce_single_product_summary', 'klaviyo_add_product_star_ratings_widget', 6);

Additional optional code snippets

Add these code snippets to add optional widgets anywhere on your site. Note that you must add these to the HTML for a specific page; they cannot be added to your functions.php file.

SEO / All reviews widget

<div id='klaviyo-reviews-all' data-id='all'></div>

Featured reviews carousel widget

<div id='klaviyo-featured-reviews-carousel'></div>

Outcome

After completing your chosen installation method, open the pages where you added widgets on your live store and check their placement. If a product’s star rating or reviews widget does not appear, check whether it is set to hide products with no reviews.

Additional resources