Como instalar o Klaviyo Reviews na WooCommerce

O que você vai aprender

Saiba como instalar o Klaviyo Reviews na sua loja WooCommerce e adicionar widgets de avaliações. Para saber quais são todas as etapas necessárias para começar, acesse Guia de introdução ao Klaviyo Reviews.

Antes de começar

Há 4 métodos para instalar o Klaviyo Reviews para WooCommerce. O ideal para você depende do seu nível de conhecimento técnico e da sua configuração do Wordpress. Use o fluxograma abaixo para selecionar o melhor método de instalação para você.

Ao selecionar um método de instalação, considere o seguinte:

• A adição de avaliações por estrelas às páginas de coleção só é compatível com 2 métodos de instalação: plugin com editor visual e códigos curtos.
• Considere seu nível de acesso de editor no Wordpress. Nem todos os usuários têm a opção de editar arquivos de tema do site diretamente. Se você não tiver acesso ao seu arquivo functions.php ou semelhante, use um dos outros métodos.
• Vários desses métodos exigem adicionar outro plugin ao seu site WordPress. As instruções abaixo fazem referência ao plugin snippet de código, mas a Klaviyo não endossa nenhum plugin específico e não pode ajudar com a resolução de problemas relacionados a plugins.

Depois de selecionar as etapas de instalação certas para você, prossiga para as instruções relevantes.

Saiba como instalar o Klaviyo Reviews para WooCommerce:

• Instalar um plugin e usar o editor visual de temas
• Instalar um plugin sem usar o editor de tema visual
• Adicionando códigos curtos
• Modificar seus arquivos de tema

Widgets de avaliações disponíveis

Depois que você instalar o Klaviyo Reviews, sua loja vai exibir widgets de avaliações, que incluem classificação e detalhes da avaliação.

• Widget de avaliação por estrelas
  Exibe sua avaliação atual por estrelas para um produto específico e, na maioria das vezes, é adicionado abaixo do nome do seu produto, seja na página do produto ou em uma página de coleção.
  

• Widget de avaliações de produtos
  Mostra um gráfico detalhando todas as avaliações que um produto recebeu, as imagens dos usuários enviadas com as avaliações e o feedback mais comum que o produto recebeu.
  
  Abaixo disso, há uma lista de todas as avaliações publicadas e das perguntas de clientes, junto com uma barra de pesquisa, filtros de avaliação, um botão Escrever uma avaliação e um botão Fazer uma pergunta.
  
  Esse widget geralmente é adicionado perto da parte inferior de uma página de produto.

• Widget de carrossel de avaliações em destaque
  Exibe avaliações em destaque de todos os seus produtos. Você pode destacar isso na sua página inicial, em uma página de avaliações independente ou em qualquer outro lugar do seu site. Você também pode selecionar as avaliações que aparecem em destaque neste widget. Se disponível, imagens enviadas pelos clientes acompanham cada avaliação; suas imagens do produto são usadas se nenhuma imagem tiver sido enviada.
  

• SEO / Widget de todas as avaliações
  Exibe todas as suas avaliações, de todos os produtos, em uma única página. Use esse widget para melhorar seu SEO e oferecer um único lugar para clientes potenciais verem o que seus clientes atuais adoram. Este widget é mais frequentemente adicionado a uma página independente de Avaliações no seu site.
  

Instalar um plugin e usar o editor visual de temas

Para usar o editor visual de temas para adicionar widgets do Klaviyo Reviews ao seu site, primeiro você precisa adicionar um trecho de código para carregar esses blocos de arrastar e soltar no seu tema. Você pode usar uma ferramenta como snippet de código para adicionar o código-fonte desses blocos e, em seguida, usar o editor visual de temas para arrastar e soltar widgets do Klaviyo Reviews no seu tema.

Adicionar código-fonte do widget de avaliações

Estas instruções pressupõem que você já instalou o plugin snippet de código, mas você pode usar um plugin diferente.

1. Selecione Snippets > Adicionar novo na barra lateral do Wordpress.
   

2. No campo Digite o título aqui, dê ao snippet um nome claro, como "Código dos widgets do Klaviyo Reviews".
3. Na aba Functions (PHP) da seção Code, adicione o snippet de código abaixo.
4. Clique em Salvar alterações e ativar.

Código-fonte do widget de avaliações

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

Adicionar plugins do Klaviyo Reviews

1. Navegue até Aparência > Editor.
2. Select modelo.
3. Escolha seu modelo de Produto único. Observe que ele pode ter um nome um pouco diferente.
4. Clique em + para abrir o menu de blocos.
   

5. Navegue até a seção Klaviyo do menu Blocos.
   

6. Arraste e solte os widgets do Klaviyo Reviews no seu tema.
7. Clique em Save.

Adicionar o widget de classificação por estrelas das coleções

1. Navegue até Aparência > Editor.
2. Select modelo.
3. Escolha uma página que contenha uma coleção de produtos.
4. Clique em + para abrir o menu de blocos.
   

5. Navegue até a seção Klaviyo do menu Blocos.
6. Arraste o widget Avaliação por estrelas para qualquer produto na coleção.
7. Clique em Save.

.page-id-YOUR_PAGE_ID 

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

Instale um plugin e adicione widgets com código

Esse processo exige adicionar uma ferramenta de snippet de código de terceiros, para que você possa adicionar código ao seu site sem editar diretamente os arquivos do seu tema. Você pode usar uma ferramenta como snippet de código para adicionar o código desses widgets.

Adicionar código-fonte do widget de avaliações

Estas instruções pressupõem que você já instalou o plugin snippet de código, mas você pode usar um plugin diferente.

1. Selecione Snippets > Adicionar novo na barra lateral do Wordpress.
   

2. No campo Digite o título aqui, dê ao snippet um nome claro, como "Código dos widgets do Klaviyo Reviews".
3. Na guia Funções (PHP) da seção Código, adicione os snippet de código abaixo.
4. Clique em Salvar alterações e ativar.

Você deve instalar um snippet de código para cada widget que pretende usar. As seções abaixo descrevem o código de cada widget.

Snippet de código do widget de avaliação de produtos

Para ajustar a localização do widget no seu site, edite a localização de ('woocommerce_after_single_product_summary') e a prioridade (15) na função add_action.

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);

Snippet de código do widget de classificação por estrelas

Para ajustar a localização do widget no seu site, edite a localização de ('woocommerce_single_product_summary') e a prioridade (6) na função add_action.

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);

Snippets de código opcionais adicionais

Use estes snippets de código para adicionar widgets opcionais em qualquer lugar do seu site. Observe que você precisa adicioná-los ao HTML de uma página específica; eles não podem ser adicionados ao seu arquivo functions.php.

Widget de SEO

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

Widget de carrossel de avaliações em destaque

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

Adicionar códigos curtos

Esse processo envolve primeiro registrar os códigos curtos nos arquivos de tema e depois inserir os códigos curtos em qualquer lugar do seu site.

Para concluir isso, primeiro você deve adicionar uma ferramenta de snippet de código de terceiros para poder adicionar código ao seu site sem editar diretamente os arquivos do seu tema. Você pode usar uma ferramenta como snippet de código para adicionar o código desses widgets.

Registre o código curto e adicione o widget

Estas instruções presumem que você já instalou o plugin snippet de código, mas você pode usar um plugin diferente.

1. Selecione Snippets > Adicionar novo na barra lateral do Wordpress.
   

2. No campo Digite o título aqui, dê ao snippet um nome claro, como "Código dos widgets do Klaviyo Reviews".
3. Na guia Funções (PHP) da seção Código, adicione os snippet de código abaixo.
4. Clique em Salvar alterações e ativar.
5. Adicione o código curto de cada widget à página em que você quer que o widget apareça.

Snippet de código e código curto

Widget de avaliação de produtos

Snippet de código (adicione à guia Funções (PHP)):

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');

Código curto: [klaviyo-reviews-all]

Widget de classificação por estrelas

Snippet de código (adicione à guia Funções (PHP)):

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');

Código curto: [klaviyo_star_rating]

SEO / Todas as avaliações e widget de carrossel em destaque

Snippet de código (adicione à guia Funções (PHP)):

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

Código curto: [klaviyo-featured-reviews-carousel]

Código curto: [fulfilled-reviews-all]

Modificar seus arquivos de tema diretamente

Se você tiver acesso ao arquivo functions.php da sua instância do Wordpress, use os snippets de código abaixo para adicionar widget de avaliações.

Snippet de código do widget de avaliação de produtos

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

Snippet de código do widget de classificação por estrelas

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

Snippets de código opcionais adicionais

Adicione estes snippet de código para incluir widgets opcionais em qualquer lugar do seu site. Observe que você precisa adicioná-los ao HTML de uma página específica; eles não podem ser adicionados ao seu arquivo functions.php.

Widget SEO/Todas as avaliações

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

Widget de carrossel de avaliações em destaque

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

Resultado

Depois de concluir estas etapas, os widgets do Klaviyo Reviews vão aparecer na sua loja virtual.

Recursos adicionais