Cómo instalar Klaviyo Reviews para WooCommerce
Objetivos del artículo
Descubre cómo instalar Klaviyo Reviews en tu tienda de WooCommerce y añadir widgets de reseñas. Para conocer todos los pasos necesarios para empezar, ve a Primeros pasos con Klaviyo Reviews.
Antes de empezar
Hay 4 métodos para instalar Klaviyo Reviews para WooCommerce. La opción adecuada depende del nivel de conocimiento técnico y de la configuración de Wordpress. Usa el diagrama de flujo a continuación para seleccionar el mejor método de instalación para ti.
Al seleccionar un método de instalación, considera lo siguiente:
- Agregar calificaciones con estrellas a las páginas de colecciones solo es compatible con 2 métodos de instalación: complemento con editor visual y código corto.
- Considera el nivel de acceso de 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 al archivo functions.php o a uno similar, usa uno de los otros métodos.
- Varios de estos métodos requieren agregar otro complemento al sitio de Wordpress. Las instrucciones de abajo hacen referencia al complemento fragmento de código, pero Klaviyo no recomienda ningún complemento en particular y no puede ayudar con la resolución de problemas relacionados con complementos.
Una vez que hayas seleccionado los pasos de instalación adecuados para ti, continúa con las instrucciones pertinentes.
Descubre cómo instalar Klaviyo Reviews para WooCommerce:
- Instalación de un complemento y uso del editor visual de temas
- Instalar un complemento sin usar el editor visual de temas
- Agregar códigos cortos
- Modificar los archivos del tema
Widgets de reseñas disponibles
Una vez que instales Klaviyo Reviews, tu tienda mostrará widgets de reseñas, que incluyen detalles de la calificación y la reseña.
- Widget de calificación por estrellas
Muestra la calificación por estrellas actual de un producto en particular y, por lo general, se agrega debajo del nombre del producto, ya sea en la página del producto o en una página de colección.
- Widget de reseñas de producto
Muestra una gráfica que desglosa todas las calificaciones que recibió un producto, las imágenes de usuarios enviadas con reseñas y los comentarios más comunes que ha recibido el producto.
Debajo de eso hay una lista de todas las reseñas publicadas y las preguntas de los clientes, junto con una barra de búsqueda, filtros de reseñas, un botón Escribir una reseña y un botón Hacer una pregunta.
Este widget suele agregarse cerca de la parte inferior de una página de producto.
- Widget de carrusel de reseñas destacadas
Muestra reseñas destacadas de todos tus productos. Puedes mostrarlo en la página de inicio, en una página de reseñas independiente o en cualquier otro lugar del sitio. También puedes seleccionar las reseñas que se muestran en este widget. Si están disponibles, las imágenes enviadas por los clientes acompañan a cada reseña; si no se envió ninguna imagen, se usan las imágenes del producto.
- SEO/widget de todas las reseñas
Muestra todas tus reseñas de todos los productos en una sola página. Usa este widget para mejorar tu SEO y ofrecer un solo lugar para que los clientes potenciales vean lo que les encanta a tus clientes actuales. Este widget se agrega con mayor frecuencia a una página independiente de Reseñas en tu sitio.
Instala un complemento y usa el editor de temas visual
Para usar el editor visual de temas para agregar widgets de Klaviyo Reviews a tu sitio, primero debes agregar un fragmento de código para cargar estos bloques de arrastrar y soltar en tu tema. Puedes usar una herramienta como fragmento de código para agregar el código fuente de estos bloques y luego usar el editor visual de temas para arrastrar y soltar widgets de Klaviyo Reviews en tu tema.
Agregar código fuente del widget de reseñas
Estas instrucciones suponen que ya instalaste el complemento fragmento de código, pero puedes usar un complemento diferente en su lugar.
- Selecciona Snippets > Add new en la barra lateral de Wordpress.
- En el campo Escribe el título aquí, nombra el fragmento con algo claro, como “Código de widgets de Klaviyo Reviews”.
- En la pestaña Functions (PHP) de la sección Code, agrega el fragmento de código a continuación.
- Haz clic en Guardar cambios y activar.
Código fuente del widget de reseñas
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>";
}Añadir complementos de Klaviyo Reviews
- Ve a Apariencia > Editor.
- Select plantilla.
- Elige la plantilla de Producto único. Ten en cuenta que podría tener un nombre ligeramente diferente.
- Haz clic en + para abrir el menú de bloques.
- Ve a la sección Klaviyo del menú Bloques.
- Arrastra y suelta widgets de Klaviyo Reviews en tu tema.
- Haz clic en Guardar.
Añadir el widget de calificación con estrellas de las colecciones
- Ve a Apariencia > Editor.
- Select plantilla.
- Elige una página que contenga una colección de productos.
- Haz clic en + para abrir el menú de bloques.
- Ve a la sección Klaviyo del menú Bloques.
- Arrastra el widget de Calificación por estrellas a cualquier producto de la colección.
- Haz clic en Guardar.
Usa el fragmento de código a continuación para centrar el widget de calificación con estrellas, si lo deseas. Ten en cuenta que debes reemplazar el marcador de posición YOUR_PAGE_ID con el ID de página de la página de colección. Aprende a encontrar un ID de página.
.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 agrega widgets con código
Cuando uses este método, los widgets se agregan a tu sitio según la ubicación de los ganchos visuales de WooCommerce. Por lo tanto, si no tienes widgets de WooCommerce en tu página de producto, debes usar una opción de instalación alternativa.
Este proceso requiere agregar una herramienta de fragmentos de código de terceros, para que puedas agregar código a tu sitio sin editar directamente los archivos del tema. Puedes usar una herramienta como fragmento de código para agregar el código de estos widget.
Agregar código fuente del widget de reseñas
Estas instrucciones asumen que ya instalaste el complemento fragmento de código, pero puedes usar un complemento diferente.
- Selecciona Snippets > Add new en la barra lateral de Wordpress.
- En el campo Escribe el título aquí, nombra el fragmento con algo claro, como “Código de widgets de Klaviyo Reviews”.
- En la pestaña Funciones (PHP) de la sección Código, agrega los fragmentos de código que aparecen abajo.
- Haz clic en Guardar cambios y activar.
Debes instalar un fragmento de código para cada widget que planees usar. Las secciones siguientes describen el código de cada widget.
Fragmento de código del widget de reseñas de productos
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_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);Fragmento de código del widget de clasificación con estrellas
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_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);Fragmentos de código opcionales adicionales
Usa estos fragmentos de código para agregar widgets opcionales en cualquier parte de tu sitio. Ten en cuenta que debes agregarlos al HTML de una página específica; no se pueden agregar al archivo functions.php.
Widget de SEO
<div id='klaviyo-reviews-all' data-id='all'></div>
Widget de carrusel de reseñas destacadas
<div id='klaviyo-featured-reviews-carousel'></div>
Agregar código corto
Este proceso implica primero registrar los códigos cortos en los archivos de tema y luego insertar los códigos cortos en cualquier parte del sitio.
Para completar esto, primero debes agregar una herramienta de terceros para fragmentos de código, para que puedas agregar código a tu sitio sin editar directamente los archivos de tu tema. Puedes usar una herramienta como fragmento de código para agregar el código de estos widget.
Registra los códigos cortos y agrega widgets
Estas instrucciones suponen que ya instalaste el complemento Fragmento de código, pero puedes usar un complemento diferente.
- Selecciona Snippets > Add new en la barra lateral de Wordpress.
- En el campo Escribe el título aquí, nombra el fragmento con algo claro, como “Código de widgets de Klaviyo Reviews”.
- En la pestaña Funciones (PHP) de la sección Código, agrega los fragmentos de código que aparecen abajo.
- Haz clic en Guardar cambios y activar.
- Agrega el código corto de cada widget a la página en la que quieres que aparezca el widget.
Fragmentos de código y códigos cortos
Widget de reseñas de productos
Fragmento de código (agrega esto a la pestaña Functions (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 corto: [klaviyo-reviews-all]
Widget de calificación con estrellas
Fragmento de código (agrega esto a la pestaña Functions (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]
Agrega este código corto a la página de producto para mostrar la calificación de estrellas de un solo producto, o a cualquier página de colección para mostrar las calificaciones de estrellas de todos los artículos de la colección.
SEO/Todas las reseñas y widget de carrusel destacado
Fragmento de código (agrega esto a la pestaña Functions (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 los archivos del tema directamente
Si tienes acceso al archivo functions.php de tu instancia de Wordpress, usa los fragmentos de código que aparecen a continuación para agregar widget de reseñas.
Estas instrucciones son para desarrolladores con experiencia en Wordpress PHP. Si no estás familiarizado con PHP de WordPress, usa un método alternativo.
Fragmento de código del widget de reseñas de productos
// 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);Fragmento de código del widget de clasificación con estrellas
// 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);Fragmentos de código opcionales adicionales
Agrega estos fragmentos de código para agregar widgets opcionales en cualquier parte del sitio. Ten en cuenta que debes agregarlos al HTML de una página específica; no se pueden agregar al 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
Después de completar estos pasos, los widgets de Klaviyo Reviews aparecerán en tu tienda en línea.