Cómo instalar Klaviyo Reviews para WooCommerce

Objetivos de aprendizaje

Aprende a instalar Klaviyo Reviews en tu WooCommerce tienda, comercio y añade el widget de opiniones. Para conocer todos los pasos necesarios para empezar, dirígete a Primeros pasos con Klaviyo Reviews.

Antes de empezar

Hay 4 métodos para instalar Klaviyo Reviews para WooCommerce. El más adecuado para ti depende de tu nivel de conocimientos técnicos y de tu configuración de Wordpress. Utiliza el diagrama de flujo siguiente para seleccionar el mejor método de instalación para ti. 

Al seleccionar un método de instalación, ten en cuenta lo siguiente: 

• Añadir valoraciones con estrellas a las páginas de colecciones sólo es compatible con 2 métodos de instalación: complemento con editor visual y código corto. 
• Ten en cuenta tu nivel de acceso como editor en Wordpress. No todos los usuarios tienen la opción de editar directamente los archivos del tema del sitio web. Si no tienes acceso a tu archivo functions.php o similar, utiliza uno de los otros métodos. 
• Varios de estos métodos requieren añadir otro complemento a tu sitio Wordpress. Las instrucciones que aparecen a continuación hacen referencia al fragmento de código complemento, pero Klaviyo no respalda ningún complemento en particular y no puede ayudar con la resolución de problemas relacionados con el complemento. 

Cuando hayas seleccionado los pasos de instalación adecuados para ti, sigue las instrucciones correspondientes. 

Aprende a instalar Klaviyo Reviews en WooCommerce: 

• Instalar un complemento y utilizar el editor visual de temas 
• Instalar un complemento, sin utilizar el editor visual de temas
• Añadir código corto
• Modificar los archivos de tu tema

Widget de opiniones disponibles

Una vez que instales Klaviyo Reviews, tu tienda, comercio mostrará el widget de reseñas, con funciones/características de valoración y detalles de las reseñas. 

• Valoración por estrellas widget
  Muestra tu valoración actual por estrellas para un producto concreto, y se suele añadir debajo del nombre de tu producto, ya sea en la página del producto o en la página de una colección.
  
• Valoraciones del producto widget
  Muestra un gráfico en el que se desglosan todas las valoraciones que ha recibido un producto, las imágenes de usuario enviadas con las valoraciones y las opiniones más comunes que ha recibido el producto.
  
  Debajo hay una lista de todas las opiniones y preguntas de clientes publicadas, junto con una barra de búsqueda, filtros de opinión, un botón para escribir una opinión y un botón para hacer una pregunta.
  
  Este widget suele añadirse cerca de la parte inferior de la página de un producto.
• Carrusel de opiniones destacadas widget
  Muestra las opiniones destacadas de todos tus productos. Puedes funciones/características esto en tu página de inicio, en una página de reseñas independiente o en cualquier otro lugar de tu sitio. También puedes seleccionar las opiniones que aparecen en este widget. Si están disponibles, las imágenes enviadas por el cliente acompañan a cada opinión; si no se ha enviado ninguna imagen, se utilizan las imágenes de tu producto.
  
• SEO / Todas las opiniones widget
  Muestra todas tus opiniones de todos los productos en una sola página. Utiliza este widget para mejorar tu SEO y proporcionar un único lugar para que los clientes potenciales vean lo que les gusta a tus clientes actuales. Este widget se suele añadir a una página independiente de Opiniones de tu sitio web.
  

Instala un complemento y utiliza el editor visual de temas 

Para utilizar el editor visual de temas para añadir el widget Klaviyo Reviews a tu sitio, primero debes añadir un fragmento de código para cargar estos bloques de arrastrar y soltar en tu tema. Puedes utilizar una herramienta como fragmento de código para añadir el código fuente de estos bloques, y luego utilizar el editor visual de temas para arrastrar y soltar el widget Klaviyo Reviews en tu tema. 

Añadir código fuente del widget de reseñas

Estas instrucciones asumen que ya has instalado el fragmento de código complemento, pero puedes utilizar un complemento diferente en su lugar. 

1. Selecciona Fragmentos > Añadir nuevo en la barra lateral de Wordpress.
   
2. En el campo Introduce aquí el título, nombra el fragmento con algo claro, como "Klaviyo Reviews widget Code".
3. En la pestaña Funciones (PHP) de la sección Código, añade el fragmento de código que aparece a continuación.
4. Haz clic en Guardar cambios y Activar.

Revisa el código fuente del widget

function registrar_klaviyo_revisiones_bloques() {
    // 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', 'registrar_klaviyo_revisiones_bloques' );
function enqueue_klaviyo_block_editor_assets() {
 // Registrar y enqueue la imagen del logotipo
 wp_register_script(
 'Klaviyo-bloque-editor-script',
 false,
 array( 'wp-bloque', 'wp-elemento', 'wp-editor' ),
 false,
 true
 );
   $logo_url = plugins_url( 'img/Klaviyo-logo.png', 'Klaviyo/Klaviyo.php' );
 wp_add_inline_script( 'Klaviyo-bloque-editor-script', '
 ( function( bloque, elemento ) {
 var el = elemento.createElement;
            // Añadir categoría personalizada
 bloque.updateCategory( "widget", {
 slug: "Klaviyo" ,
 title: "Klaviyo",
 icon: el("img", { src: "' . $logo_url . '", estilo: { width: "20px", height: "20px" } })
           } );
 bloque.registerBlockType( "Klaviyo/revisiones-de-productos", {
 title: "Klaviyo Reseñas de productos",
 icon: "admin-comments",
 category: "Klaviyo",
 edit: function() {
 return el(
 " div",
                        { className: "klaviyo-product-reviews" },
 "Klaviyo Las reseñas de productos se mostrarán aquí"
 );
 },
 save: function() {
                    return null;
                },
 });
 bloque.registerBlockType( "Klaviyo/calificaciones-estrella-producto", {
 title: "Klaviyo Clasificaciones por estrellas",
 icon: "star-filled",
 category: "Klaviyo",
 edit: function() {
 return el(
 " div",
                        { className: "klaviyo-product-star-ratings" },
 "Klaviyo Las valoraciones de estrellas de productos se mostrarán aquí"
 );
 },
 save: function() {
                    return null;
                },
 });
 bloque.registerBlockType( "Klaviyo/reseñas-destacadas", {
 title: "Klaviyo Reseñas Destacadas",
 icon: "admin-post",
 category: "Klaviyo",
 edit: function() {
 return el(
 " div",
                        { className: "klaviyo-featured-reviews" },
 "Klaviyo Las reseñas destacadas se mostrarán aquí"
 );
 },
 save: function() {
                    return null;
                },
 });
 bloque.registerBlockType( "Klaviyo/todas-las-opiniones", {
 title: "Klaviyo Todas las Reseñas",
 icon: "admin-page",
 category: "Klaviyo",
 edit: function() {
 return el(
 " div",
                        { className: "klaviyo-all-reviews" },
 "Klaviyo Todas las opiniones se mostrarán aquí"
 );
 },
 save: function() {
                    return null;
                },
 });
 } )(
 window.wp.bloque,
  window.wp.elemento
 );
 ' );
}
add_action( 'enqueue_block_editor_assets', 'enqueue_klaviyo_block_editor_assets' );
// Funciones callback para renderizar el bloque
function render_klaviyo_product_reviews( $attributes, $content ) {
 global $product;
 if ( is_producto() && isset($product) ) {
        return "<div id='klaviyo-reviews-all' data-id='" . esc_attr($product->get_id()) . "'></div>";
    }
}
function render_klaviyo_star_ratings( $atributos, $contenido ) {
 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( $atributos, $contenido ) {
    return "<div id='klaviyo-featured-reviews-carousel'></div>";
}
function render_klaviyo_all_reviews( $atributos, $contenido ) {
    return "<div id='fulfilled-reviews-all' data-id='all'></div>";
}

Añade Klaviyo Reviews complemento

1. Navega hasta Apariencia > Editor. 
2. Selecciona la plantilla. 
3. Elige tu plantilla de Producto único. Ten en cuenta que puede tener un nombre ligeramente distinto. 
4. Haz clic en + para abrir el menú del bloque.
    
5. Navega hasta la sección Klaviyo del menú bloque.
   
6. Arrastra y suelta el widget Klaviyo Reviews en tu tema.
7. Haz clic en Guardar.

Añade el widget de clasificación por estrellas de las colecciones

1. Navega hasta Apariencia > Editor. 
2. Selecciona la plantilla. 
3. Elige una página que contenga una colección de productos. 
4. Haz clic en + para abrir el menú del bloque.
    
5. Navega hasta la sección Klaviyo del menú bloque. 
6. Arrastra el widget de valoración por estrellas a cualquier producto de la colección.
7. Haz clic en Guardar.

.page-id-YOUR_PAGE_ID 

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

Instala un complemento y añade un widget con código

Este proceso requiere añadir una herramienta de fragmento de código de terceros, para que puedas añadir código a tu sitio sin editar directamente los archivos de tu tema. Puedes utilizar una herramienta como fragmento de código para añadir el código de estos widget. 

Añadir código fuente del widget de reseñas

Estas instrucciones asumen que ya has instalado el fragmento de código complemento, pero puedes utilizar un complemento diferente en su lugar. 

1. Selecciona Fragmentos > Añadir nuevo en la barra lateral de Wordpress.
   
2. En el campo Introduce aquí el título, nombra el fragmento con algo claro, como "Klaviyo Reviews widget Code".
3. En la pestaña Funciones (PHP) de la sección Código, añade el fragmento de código que aparece a continuación.
4. Haz clic en Guardar cambios y Activar.

Debes instalar un fragmento de código para cada widget que vayas a utilizar plan. Las secciones siguientes describen el código de cada widget. 

Opiniones sobre el producto widget fragmento de código

Para ajustar la ubicación del widget en tu sitio, edita la ubicación de ('woocommerce_after_single_product_summary') y la prioridad(15) en la función add_action.

function klaviyo_add_product_reviews_widget() {
 global $product;
 if (is_producto() && 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);

Clasificación por estrellas widget fragmento de código

Para ajustar la ubicación del widget en tu sitio, edita la ubicación de ('woocommerce_single_product_summary') y la prioridad(6) en la función add_action.

function klaviyo_add_product_star_ratings_widget() {
 global $product;
 if (is_producto() && 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);

Fragmento de código adicional opcional

Utiliza estos fragmentos de código para añadir widgets opcionales en cualquier lugar de tu sitio web. Ten en cuenta que debes añadirlas al HTML de una página concreta; no pueden añadirse a tu archivo functions.php.

SEO widget

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

Widget de carrusel de reseñas destacadas

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

Añadir código corto

Este proceso implica primero registrar el código corto en los archivos de tu tema y luego insertar el código corto en cualquier parte de tu sitio. 

Para ello, primero debes añadir una herramienta de fragmento de código de terceros para que puedas añadir código a tu sitio sin editar directamente los archivos de tu tema. Puedes utilizar una herramienta como fragmento de código para añadir el código de estos widget. 

Registra el código corto y añade el widget

Estas instrucciones asumen que ya has instalado el fragmento de código complemento, pero puedes utilizar un complemento diferente en su lugar. 

1. Selecciona Fragmentos > Añadir nuevo en la barra lateral de Wordpress.
   
2. En el campo Introduce aquí el título, nombra el fragmento con algo claro, como "Klaviyo Reviews widget Code".
3. En la pestaña Funciones (PHP) de la sección Código, añade el fragmento de código que aparece a continuación.
4. Haz clic en Guardar cambios y Activar.
5. Añade el código corto de cada widget a la página en la que quieras que aparezca el widget. 

fragmento de código y código corto

Widget de reseñas de productos

fragmento de código (añadir a la pestaña Funciones (PHP)):

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

código corto: [Klaviyo Reviews-all]

Widget de valoración por estrellas

fragmento de código (añadir a la pestaña Funciones (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 corto: [klaviyo_star_rating]

SEO / Todas las opiniones & Widget de carrusel destacado

fragmento de código (añadir a la pestaña Funciones (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 corto: [Klaviyo-featured-reviews-carousel]

código corto: [fulfilled-reviews-all]

Modifica directamente los archivos de tu tema

Si tienes acceso al archivo functions.php de tu instancia de Wordpress, utiliza el fragmento de código que aparece a continuación para añadir el widget de reseñas. 

Opiniones sobre el producto widget fragmento de código

// crea una función que muestre un div dinámico con el ID de producto correcto
function klaviyo_add_product_reviews_widget() {
 global $product;
 if (is_producto() && isset($product)) {
 $product_id = $product->get_id();
       echo "<div id='klaviyo-reviews-all' data-id='{$product_id}'></div>" ;
 }
}
// coloca el widget después del resumen de producto único
add_action('woocommerce_after_single_product_summary', 'klaviyo_add_product_reviews_widget', 15);

Clasificación por estrellas widget fragmento de código

// crea una función que muestre un div dinámico con el ID de producto correcto
function klaviyo_add_product_star_ratings_widget() {
 global $product;
 if (is_producto() && isset($product)) {
 $product_id = $product->get_id();
       echo "<div class='klaviyo-star-rating-widget' data-id='{$product_id}'></div>" ;
 }
}
// coloca el widget después del resumen de producto único
add_action('woocommerce_single_product_summary', 'klaviyo_add_product_star_ratings_widget', 6);

Fragmento de código adicional opcional

Añade estos fragmentos de código para añadir un widget opcional en cualquier lugar de tu sitio. Ten en cuenta que debes añadirlas al HTML de una página concreta; no pueden añadirse a tu archivo functions.php.

Widget de SEO/Todas las reseñas

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

Widget de carrusel de reseñas destacadas

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

Resultado

Tras completar estos pasos, el widget Klaviyo Reviews aparecerá en tu tienda en línea. 

Recursos adicionales

• Primeros pasos con Klaviyo Reviews
• Cómo solicitar reseñas a tus clientes con Klaviyo Reviews flujo