Cómo instalar Klaviyo Reviews para WooCommerce
Qué aprenderás
Descubre cómo instalar Klaviyo Reviews en tu tienda 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 formas de instalar Klaviyo Reviews para WooCommerce. La más adecuada para ti dependerá del nivel de conocimientos técnicos que tengas y de cómo hayas configurado WordPress. Utiliza el siguiente diagrama de flujo para seleccionar el método de instalación que prefieras.
Al seleccionar un método de instalación, ten en cuenta lo siguiente:
- Solo se pueden añadir valoraciones por estrellas a las páginas de recopilación con 2 métodos de instalación: plugin con editor visual y códigos cortos.
- Ten en cuenta tu 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 a tu archivo functions.php o a uno similar, usa uno de los otros métodos.
- Varios de estos métodos requieren añadir otro plugin a tu sitio de Wordpress. Las instrucciones de abajo hacen referencia al plugin Fragmento de código, pero Klaviyo no respalda ningún plugin en particular y no puede ayudarte con la resolución de problemas relacionados con plugins.
Una vez que hayas seleccionado los pasos de instalación adecuados para ti, continúa con las instrucciones correspondientes.
Aprende a instalar Klaviyo Reviews para WooCommerce:
- Instalar un plugin y usar el editor visual de temas
- Instalar un plugin sin usar el editor visual de temas
- Añadir códigos cortos
- Modificar archivos de tema
Widgets de reseñas disponibles
Una vez que instales Klaviyo Reviews, tu tienda mostrará widgets de reseñas, que incluyen detalles de calificación y reseñas.
- Widget de valoración por estrellas
Muestra tu valoración por estrellas actual de un producto en concreto y, por lo general, se añade 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 productos
Muestra un gráfico que desglosa todas las valoraciones que ha recibido un producto, las imágenes de usuarios enviadas con las reseñas y los comentarios más frecuentes que ha recibido el producto.
Debajo 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 añadirse cerca de la parte inferior de la página de un producto.
- Widget de carrusel de reseñas destacadas
Muestra reseñas destacadas de todos tus productos. Puedes mostrarlo en tu página de inicio, en una página de reseñas independiente o en cualquier otra parte de tu sitio. También puedes seleccionar las reseñas que se destacan 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 de tus productos.
- 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 único lugar para que los clientes potenciales vean lo que les encanta a tus clientes actuales. Este widget se añade con mayor frecuencia a una página independiente de Reseñas en tu sitio.
Instala un plugin y utiliza el editor visual de temas
Para utilizar el editor visual de temas para añadir widgets de 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 usar una herramienta como fragmento de código para añadir el código fuente de estos bloques y, después, usar el editor visual de temas para arrastrar y soltar widgets de Klaviyo Reviews en tu tema.
Añadir el código fuente del widget de reseñas
Estas instrucciones suponen que ya has instalado el plugin fragmento de código, pero puedes usar un plugin diferente en su lugar.
- Selecciona Snippets > Add new en la barra lateral de Wordpress.
- En el campo Enter title here, ponle un nombre claro al fragmento, como «Código de widget de Klaviyo Reviews».
- En la pestaña Funciones (PHP) de la sección Código, añade el fragmento de código que aparece 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 plugins de Klaviyo Reviews
- Ve a Apariencia > Editor.
- Select plantilla.
- Elige tu 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 los widgets de Klaviyo Reviews en tu tema.
- Pulsa Guardar.
Añadir el widget de valoraciones por estrellas de 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 Valoración de estrellas a cualquier producto de la colección.
- Pulsa Guardar.
Usa el fragmento de código siguiente para centrar el widget de valoración con estrellas, si lo deseas. Ten en cuenta que debes sustituir el marcador de posición YOUR_PAGE_ID por el ID de página de tu página de colección. Descubre cómo 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;
}Instalar un plugin y añadir widgets con código
Cuando uses este método, se añadirán widgets a tu sitio en función de 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 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 usar una herramienta como fragmento de código para añadir el código de estos widgets.
Añadir el código fuente del widget de reseñas
Estas instrucciones asumen que ya has instalado el plugin fragmento de código, pero puedes usar un plugin diferente en su lugar.
- Selecciona Snippets > Add new en la barra lateral de Wordpress.
- En el campo Enter title here, ponle un nombre claro al fragmento, como «Código de widget de Klaviyo Reviews».
- En la pestaña Funciones (PHP) de la sección Código, añade los fragmentos de código que aparecen a continuación.
- Haz clic en Guardar cambios y activar.
Debes instalar un fragmento de código para cada widget que tengas previsto 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 valoración por 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 añadir widgets opcionales en cualquier parte de tu sitio. Ten en cuenta que debes añadirlos al HTML de una página específica; no se pueden añadir a tu archivo functions.php.
Widget SEO
<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 los códigos cortos en los archivos de tu tema y, después, insertar los códigos cortos en cualquier parte de tu sitio.
Para completar esto, primero debes añadir una herramienta de fragmento de código de terceros para poder añadir código a tu sitio sin editar directamente los archivos de tu tema. Puedes usar una herramienta como fragmento de código para añadir el código de estos widget.
Registra los códigos cortos y añade widgets
Estas instrucciones asumen que ya has instalado el plugin fragmento de código, pero puedes usar otro plugin en su lugar.
- Selecciona Snippets > Add new en la barra lateral de Wordpress.
- En el campo Enter title here, ponle un nombre claro al fragmento, como «Código de widget de Klaviyo Reviews».
- En la pestaña Funciones (PHP) de la sección Código, añade los fragmentos de código que aparecen a continuación.
- Haz clic en Guardar cambios y activar.
- Añade el código corto de cada widget a la página en la que quieras que aparezca el widget.
Fragmentos de código y códigos cortos
Widget de reseñas de productos
Fragmento de código (añádelo 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 valoraciones por estrellas
Fragmento de código (añádelo 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]
Añade este código corto a tu página de producto para mostrar la valoración de estrellas de un solo producto o a cualquier página de colección para mostrar las valoraciones 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 (añádelo 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 tus archivos de tema directamente
Si tienes acceso al archivo functions.php de tu instancia de Wordpress, utiliza los fragmentos de código que aparecen a continuación para añadir widget de reseñas.
Estas instrucciones son para desarrolladores con experiencia en PHP de Wordpress. Si no estás familiarizado con PHP de Wordpress, utiliza 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 valoración por 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
Añade estos fragmentos de código para añadir widgets opcionales en cualquier parte de tu sitio. Ten en cuenta que debes añadirlos al HTML de una página específica; no se pueden añadir a tu archivo functions.php.
Widget 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 widget de Klaviyo Reviews aparecerán en tu tienda online.