Qué aprenderás
Aprenda a instalar Reseñas de Klaviyo en su WooCommerce negocio y añadir el widget de reseñas. Para conocer todos los pasos necesarios para empezar, diríjase a Cómo empezar con Reseñas de Klaviyo.
Antes de empezarAntes de empezar
Hay 4 métodos para instalar Klaviyo Reviews para WooCommerce. El más adecuado para usted depende de su nivel de conocimientos técnicos y de su configuración de Wordpress. Utilice el siguiente diagrama de flujo para seleccionar el mejor método de instalación para usted.
Al seleccionar un método de instalación, tenga en cuenta lo siguiente:
- La adición de valoraciones con estrellas a las páginas de colección sólo es compatible con 2 métodos de instalación: plugin con editor visual y códigos cortos.
- Tenga en cuenta su nivel de acceso como editor en Wordpress. No todos los usuarios tienen la opción de editar directamente los archivos de los temas del sitio web. Si no tiene acceso a su archivo functions.php o similar, utilice uno de los otros métodos.
- Varios de estos métodos requieren añadir otro plugin a su sitio Wordpress. Las instrucciones a continuación hacen referencia al plugin Code Snippets, pero Klaviyo no respalda ningún plugin en particular y no puede ayudar con la solución de problemas relacionados con plugins.
Una vez que haya seleccionado los pasos de instalación adecuados para usted, continúe con las instrucciones correspondientes.
Aprenda a instalar Klaviyo Reviews para WooCommerce por:
- Instalación de un plugin y uso del editor visual de temas
- Instalación de un plugin, sin utilizar el editor visual de temas
- Añadir códigos cortos
- Modificación de los archivos de su tema
Widgets de reseñas disponibles
Una vez que instale Klaviyo Reviews, su tienda mostrará widgets de reseñas, que incluyen la valoración y los detalles de la reseña.
-
Widget de valoración por estrellas
Muestra su valoración actual con estrellas para un producto concreto, y se suele añadir debajo del nombre de su producto, ya sea en la página del producto o en la de una colección. -
Widget de valoraciones de productos
Muestra un gráfico en el que se desglosan todas las valoraciones que ha recibido un producto, las imágenes de los usuarios enviadas con las valoraciones y los comentarios más comunes que ha recibido el producto.
Debajo encontrará 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 para escribir una reseña y otro para 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 las reseñas destacadas de todos sus productos. Puede incluirlo en su página de inicio, en una página de reseñas independiente o en cualquier otro lugar de su sitio web. También puede seleccionar las reseñas que aparecen en este widget. Si están disponibles, las imágenes enviadas por el cliente acompañan a cada reseña; las imágenes de su producto se utilizan si no se ha enviado ninguna imagen. -
SEO / Todas las opiniones widget
Muestra todas sus reseñas de todos los productos en una sola página. Utilice este widget para mejorar su SEO y proporcionar un lugar único para que sus clientes potenciales vean lo que les gusta a sus clientes actuales. Este widget se suele añadir a una página de reseñas independiente de su sitio web.
Instale un plugin y utilice el editor visual de temas
Con el fin de utilizar el editor visual de temas para añadir widgets Klaviyo Reviews a su sitio, primero debe añadir un fragmento de código para cargar estos bloques de arrastrar y soltar en su tema. Puede utilizar una herramienta como Code Snippets para añadir el código fuente de estos bloques y, a continuación, utilizar el editor visual de temas para arrastrar y soltar los widgets de Klaviyo Reviews en su tema.
Añadir código fuente del widget de reseñasAñadir código fuente del widget de reseñas
Estas instrucciones asumen que usted ya ha instalado el plugin Code Snippets, pero puede utilizar un plugin diferente en su lugar.
- Seleccione Snippets > Añadir nuevo en la barra lateral de Wordpress.
- En el campo Escriba el título aquí, nombre el fragmento con algo claro, como "Código de los widgets de reseñas de Klaviyo".
- En la pestaña Funciones (PHP) de la sección Código, añada el fragmento de código siguiente.
- Pulse Guardar cambios y Activar.
Revisa el código fuente del widget
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() {
// Registrar y enqueue la imagen del logo
wp_register_script(
'klaviyo-bloque-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-bloque-editor-script', '
( function( bloques, elemento ) {
var el = element.createElement;
// Añadir categoría personalizada
blocks.updateCategory( "widgets", {
slug: "klaviyo",
título: "Klaviyo",
icon: el("img", { src: "' . $logo_url . '", estilo: { width: "20px", height: "20px" } })
} );
blocks.registerBlockType( "klaviyo/producto-revisiones", {
título: "Klaviyo Product Reviews",
icono: "admin-comentarios",
category: "klaviyo",
editar: function() {
return el(
"div",
{ className: "klaviyo-product-reviews" },
"Aquí se mostrarán las reseñas de los productos Klaviyo"
);
},
save: function() {
return null;
},
});
blocks.registerBlockType( "klaviyo/product-star-ratings", {
título: "Clasificaciones por estrellas de Klaviyo",
icono: "lleno de estrellas",
categoría: "klaviyo",
editar: function() {
return el(
"div",
{ className: "klaviyo-product-star-ratings" },
"Aquí se mostrarán las valoraciones por estrellas de los productos Klaviyo"
);
},
save: function() {
return null;
},
});
blocks.registerBlockType( "klaviyo/featured-reviews", {
título: "Klaviyo Featured Reviews",
icono: "admin-post",
category: "klaviyo",
editar: function() {
return el(
"div",
{ className: "klaviyo-featured-reviews" },
"Las reseñas destacadas de Klaviyo se mostrarán aquí"
);
},
save: function() {
return null;
},
});
blocks.registerBlockType( "klaviyo/all-reviews", {
título: "Klaviyo All Reviews",
icono: "admin-page",
categoría: "klaviyo",
editar: function() {
return el(
"div",
{ className: "klaviyo-all-reviews" },
"Klaviyo Todos los comentarios se mostrarán aquí"
);
},
save: function() {
return null;
},
});
} )(
window.wp.blocks,
window.wp.element
);
' );
}
add_action( 'enqueue_block_editor_assets', 'enqueue_klaviyo_block_editor_assets' );
// Funciones callback para renderizar los bloques
function render_klaviyo_product_reviews( $attributes, $content ) {
global $producto;
if ( is_product() && isset($producto) ) {
return "<div id='klaviyo-reviews-all' data-id='" . esc_attr($product->get_id()) . "'></div>";
}
}
función render_klaviyo_star_ratings( $attributes, $content ) {
global $producto;
if (isset($producto)) {
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ñadir plugins Klaviyo Reviews
- Navegue hasta Apariencia > Editor.
- Seleccione Plantillas.
- Elija su plantilla de producto único. Tenga en cuenta que puede tener un nombre ligeramente diferente.
- Haga clic en + para abrir el menú de bloques.
- Navegue hasta la sección Klaviyo del menú Bloques.
- Arrastre y suelte los widgets de Klaviyo Reviews en su tema.
- Pulse Guardar.
Añadir el widget de clasificación por estrellas de las colecciones
- Navegue hasta Apariencia > Editor.
- Seleccione Plantillas.
- Elija una página que contenga una colección de productos.
- Haga clic en + para abrir el menú de bloques.
- Navegue hasta la sección Klaviyo del menú Bloques.
- Arrastre el widget de valoración por estrellas a cualquier producto de la colección.
- Pulse Guardar.
Utilice el fragmento de código siguiente para alinear al centro el widget de valoración por estrellas, si lo desea. Tenga en cuenta que debe sustituir el marcador de posición YOUR_PAGE_ID por el ID de la página de su colección. Aprenda a encontrar el ID de una página.
.page-id-TU_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
Al utilizar este método, los widgets se añaden a su sitio basándose en la colocación de los ganchos visuales de WooCommerce. Por lo tanto, si no tiene widgets de WooCommerce en su página de producto, debe utilizar una opción de instalación alternativa.
Este proceso requiere añadir una herramienta de fragmentos de código de terceros, para que pueda añadir código a su sitio sin editar directamente los archivos de su tema. Puede utilizar una herramienta como Code Snippets para añadir el código de estos widgets.
Añadir código fuente del widget de reseñasAñadir código fuente del widget de reseñas
Estas instrucciones asumen que usted ya ha instalado el plugin Code Snippets, pero puede utilizar un plugin diferente en su lugar.
- Seleccione Snippets > Añadir nuevo en la barra lateral de Wordpress.
- En el campo Escriba el título aquí, nombre el fragmento con algo claro, como "Código de los widgets de reseñas de Klaviyo".
- En la pestaña Funciones (PHP) de la sección Código, añada los siguientes fragmentos de código.
- Pulse Guardar cambios y Activar.
Debe instalar un fragmento de código para cada widget que piense utilizar. Las secciones siguientes describen el código de cada widget.
Fragmento de código del widget de reseñas de productosFragmento de código del widget de reseñas de productos
Para ajustar la ubicación del widget en su sitio, edite la ubicación ('woocommerce_after_single_product_summary') y la prioridad(15) en la función add_action.
function klaviyo_add_product_reviews_widget() {
global $producto;
if (is_product() && isset($producto)) {
$producto_id = $producto->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 su sitio, edite la ubicación ('woocommerce_single_product_summary') y la prioridad(6) en la función add_action.
function klaviyo_add_product_star_ratings_widget() {
global $producto;
if (is_product() && isset($producto)) {
$producto_id = $producto->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
Utilice estos fragmentos de código para añadir widgets opcionales en cualquier lugar de su sitio. Tenga en cuenta que debe añadirlas al HTML de una página específica; no pueden añadirse a su 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ódigos cortos
Este proceso implica primero registrar los códigos cortos en los archivos de su tema y luego insertar los códigos cortos en cualquier parte de su sitio.
Para ello, primero debe añadir una herramienta de fragmentos de código de terceros para poder añadir código a su sitio sin editar directamente los archivos de su tema. Puede utilizar una herramienta como Code Snippets para añadir el código de estos widgets.
Registre los códigos cortos y añada widgetsRegistre los códigos cortos y añada widgets
Estas instrucciones asumen que usted ya ha instalado el plugin Code Snippets, pero puede utilizar un plugin diferente en su lugar.
- Seleccione Snippets > Añadir nuevo en la barra lateral de Wordpress.
- En el campo Escriba el título aquí, nombre el fragmento con algo claro, como "Código de los widgets de reseñas de Klaviyo".
- En la pestaña Funciones (PHP) de la sección Código, añada los siguientes fragmentos de código.
- Pulse Guardar cambios y Activar.
- Añada el código corto de cada widget a la página en la que desea que aparezca el widget.
Fragmentos de código y códigos cortos
Widget de reseñas de productosWidget de reseñas de productos
Fragmento de código (añadir a la pestaña Funciones (PHP)):
function klaviyo_add_product_reviews_widget() {
global $producto;
if (isset($producto)) {
$producto_id = $producto->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-revisiones-todas]
Widget de valoración por estrellasWidget 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 $producto;
if (isset($producto)) {
$producto_id = $producto->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ñada este breve código a su página de producto para mostrar la valoración por estrellas de un solo producto, o a cualquier página de colección para mostrar las valoraciones por estrellas de todos los artículos de la colección.
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: [revisiones-cumplidas-todas]
Modifique directamente los archivos de su temaModifique directamente los archivos de su tema
Si tiene acceso al archivo functions.php de su instancia de Wordpress, utilice los fragmentos de código siguientes para añadir widgets de reseñas.
Estas instrucciones son para desarrolladores con experiencia en Wordpress PHP. Si no está familiarizado con el PHP de Wordpress, utilice un método alternativo.
Fragmento de código del widget de reseñas de productos
// crear una función que renderice un div dinámico con el ID de producto correcto
function klaviyo_add_product_reviews_widget() {
global $producto;
if (is_product() && isset($producto)) {
$producto_id = $producto->get_id();
echo "<div id='klaviyo-reviews-all' data-id='{$product_id}'></div>" ;
}
}
// coloque el widget después del resumen del producto único
add_action('woocommerce_after_single_product_summary', 'klaviyo_add_product_reviews_widget', 15);
Fragmento de código del widget de valoración por estrellas
// crear una función que renderice un div dinámico con el ID de producto correcto
function klaviyo_add_product_star_ratings_widget() {
global $producto;
if (is_product() && isset($producto)) {
$producto_id = $producto->get_id();
echo "<div class='klaviyo-star-rating-widget' data-id='{$product_id}'></div>" ;
}
}
// coloque el widget después del resumen de producto único
add_action('woocommerce_single_product_summary', 'klaviyo_add_product_star_ratings_widget', 6);
Fragmentos de código opcionales adicionales
Añada estos fragmentos de código para añadir widgets opcionales en cualquier lugar de su sitio. Tenga en cuenta que debe añadirlas al HTML de una página específica; no pueden añadirse a su archivo functions.php.
SEO / Todos los comentarios widget
<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 Reseñas Klaviyo aparecerán en su tienda online.
Recursos adicionales