Jak zainstalować Klaviyo Reviews dla WooCommerce
Czego się dowiesz?
Dowiedz się, jak zainstalować Klaviyo Reviews w sklepie WooCommerce i dodać widżety recenzji. Aby dowiedzieć się więcej o wszystkich krokach wymaganych do rozpoczęcia, przejdź do artykułu Pierwsze kroki z Klaviyo Reviews.
Kilka słów na początek
Istnieją 4 metody instalacji Klaviyo Reviews dla WooCommerce. Właściwa metoda zależy od poziomu wiedzy technicznej i konfiguracji Wordpress. Skorzystaj z poniższego schematu blokowego, aby wybrać najlepszą metodę instalacji.
Wybierając metodę instalacji, weź pod uwagę następujące kwestie:
- Dodawanie ocen gwiazdkowych do stron kolekcji jest obsługiwane tylko dla 2 metod instalacji: wtyczki z edytorem wizualnym i skróconego numeru do wysyłki SMS.
- Sprawdź poziom uprawnień edytora w WordPressie. Nie wszyscy użytkownicy mają możliwość bezpośredniej edycji plików motywu witryny. Jeśli nie masz dostępu do pliku functions.php lub podobnego, skorzystaj z jednej z pozostałych metod.
- Kilka z tych metod wymaga dodania kolejnej wtyczki do witryny Wordpress. Poniższe instrukcje odnoszą się do wtyczki Code Snippets, ale Klaviyo nie rekomenduje żadnej konkretnej wtyczki i nie może pomóc w rozwiązywaniu problemów związanych z wtyczkami.
Po wybraniu odpowiednich kroków instalacji przejdź do właściwych instrukcji.
Dowiedz się, jak zainstalować Klaviyo Reviews dla WooCommerce:
- Instalowanie wtyczki i korzystanie z wizualnego edytora motywu
- Instalowanie wtyczki bez używania wizualnego edytora motywu
- Dodawanie skróconych numerów do wysyłki SMS
- Modyfikowanie plików motywu
Dostępne widżety recenzji
Po zainstalowaniu Klaviyo Reviews w sklepie będą wyświetlane widżety z recenzjami, które zawierają ocenę i szczegóły recenzji.
- Widżet oceny w gwiazdkach
Wyświetla aktualną ocenę w gwiazdkach dla konkretnego produktu i najczęściej jest dodawany pod nazwą produktu — na stronie produktu lub na stronie kolekcji.
- Widżet recenzji produktu
Pokazuje wykres z podziałem wszystkich ocen, jakie otrzymał produkt, zdjęcia przesłane przez użytkowników wraz z recenzjami oraz najczęstsze opinie o produkcie.
Poniżej znajduje się lista wszystkich opublikowanych recenzji i pytań klientów wraz z paskiem wyszukiwania, filtrami recenzji, przyciskiem Napisz recenzję oraz przyciskiem Zadaj pytanie.
Ten widżet jest zwykle dodawany w pobliżu dolnej części strony produktu.
- Widżet karuzeli wyróżnionych opinii
Wyświetla wyróżnione opinie ze wszystkich produktów. Możesz wyróżnić to na swojej stronie głównej, na osobnej stronie z opiniami lub w dowolnym innym miejscu w witrynie. Możesz też wybrać opinie, które będą wyróżniane w tym widżecie. Jeśli są dostępne, obrazy przesłane przez klientów towarzyszą każdej opinii; jeśli nie przesłano obrazu, używane są obrazy produktu.
- SEO / Widżet wszystkich opinii
Wyświetla wszystkie opinie o wszystkich produktach na jednej stronie. Użyj tego widżetu, aby poprawić SEO i zapewnić jedno miejsce, w którym potencjalni klienci zobaczą, co podoba się Twoim obecnym klientom. Ten widżet jest najczęściej dodawany do osobnej strony Opinie w witrynie.
Zainstaluj wtyczkę i użyj wizualnego edytora motywu
Aby użyć wizualnego edytora motywów do dodawania widżetów Klaviyo Reviews w witrynie, najpierw trzeba dodać fragment kodu, aby załadować te bloki typu „przeciągnij i upuść” w motywie. Można użyć narzędzia takiego jak wycinek kodu źródłowego, aby dodać kod źródłowy tych bloków, a następnie użyć wizualnego edytora motywów, aby przeciągać i upuszczać widżety Klaviyo Reviews do motywu.
Dodaj kod źródłowy widżetu recenzji
W tych instrukcjach założono, że wtyczka wycinek kodu źródłowego jest już zainstalowana, ale zamiast niej można użyć innej wtyczki.
- W pasku bocznym WordPress wybierz Wycinki > Dodaj nowy.
- W polu Tutaj wprowadź tytuł nadaj wycinkowi zrozumiałą nazwę, na przykład „Kod widżetów Klaviyo Reviews”.
- Na karcie Functions (PHP) w sekcji Code dodaj poniższy wycinek kodu źródłowego.
- Kliknij Zapisz zmiany i aktywuj.
Kod źródłowy widżetu opinii
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>";
}Dodaj wtyczki Klaviyo Reviews
- Przejdź do Wygląd > Edytor.
- Select szablon.
- Wybierz szablon Single Product. Pamiętaj, że może mieć nieco inną nazwę.
- Kliknij +, aby otworzyć menu bloków.
- Przejdź do sekcji Klaviyo w menu Bloki.
- Przeciągnij i upuść widżety Klaviyo Reviews do swojego motywu.
- Kliknij Zapisz.
Dodaj widżet oceny gwiazdkowej kolekcji
- Przejdź do Wygląd > Edytor.
- Select szablon.
- Wybierz stronę zawierającą kolekcję produktów.
- Kliknij +, aby otworzyć menu bloków.
- Przejdź do sekcji Klaviyo w menu Blocks.
- Przeciągnij widżet Ocena w gwiazdkach na dowolny produkt w kolekcji.
- Kliknij Zapisz.
Jeśli chcesz, użyj poniższego wycinka kodu źródłowego, aby wyśrodkować widżet oceny gwiazdkowej. Pamiętaj, że musisz zastąpić symbol zastępczy YOUR_PAGE_ID identyfikatorem strony swojej strony kolekcji. Dowiedz się, jak znaleźć identyfikator strony.
.page-id-YOUR_PAGE_ID
.klaviyo-star-rating-widget {
display: flex;
justify-content: center;
align-items: center;
text-align: center;
margin: 0 auto;
}Zainstaluj wtyczkę i dodaj widżety za pomocą kodu
Korzystając z tej metody, widżety są dodawane do witryny na podstawie umiejscowienia wizualnych haków WooCommerce. Dlatego jeśli na stronie produktu nie masz widżetów WooCommerce, musisz użyć alternatywnej opcji instalacji.
Ten proces wymaga dodania narzędzia innej firmy do wycinka kodu źródłowego, aby można było dodać kod do witryny bez bezpośredniej edycji plików motywu. Do dodania kodu dla tych widżetów można użyć narzędzia takiego jak wycinek kodu źródłowego.
Dodaj kod źródłowy widżetu recenzji
W tych instrukcjach zakłada się, że wtyczka wycinek kodu źródłowego jest już zainstalowana, ale możesz użyć zamiast niej innej wtyczki.
- W pasku bocznym WordPress wybierz Wycinki > Dodaj nowy.
- W polu Tutaj wprowadź tytuł nadaj wycinkowi zrozumiałą nazwę, na przykład „Kod widżetów Klaviyo Reviews”.
- Na karcie Funkcje (PHP) w sekcji Kod dodaj poniższe wycinki kodu źródłowego.
- Kliknij Zapisz zmiany i aktywuj.
Musisz zainstalować wycinek kodu źródłowego dla każdego widżetu, którego planujesz używać. Poniższe sekcje przedstawiają kod dla każdego widżetu.
Wycinek kodu źródłowego widżetu recenzji produktów
Aby dostosować położenie widżetu w witrynie, edytuj położenie ('woocommerce_after_single_product_summary') i priorytet (15) w funkcji 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);Wycinek kodu źródłowego widżetu oceny gwiazdkowej
Aby dostosować położenie widżetu w witrynie, edytuj położenie ('woocommerce_single_product_summary') i priorytet (6) w funkcji 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);Dodatkowe opcjonalne wycinki kodu źródłowego
Użyj tych wycinków kodu źródłowego, aby dodać opcjonalne widżety w dowolnym miejscu w witrynie. Pamiętaj, że musisz dodać je do kodu HTML konkretnej strony; nie można dodać ich do pliku functions.php.
Widżet SEO
<div id='klaviyo-reviews-all' data-id='all'></div>
Widżet karuzeli wyróżnionych recenzji
<div id='klaviyo-featured-reviews-carousel'></div>
Dodaj skrócone numery do wysyłki SMS
Ten proces obejmuje najpierw zarejestrowanie skróconych numerów do wysyłki SMS w plikach motywu, a następnie wstawienie skróconych numerów do wysyłki SMS w dowolnym miejscu w witrynie.
Aby to ukończyć, musisz najpierw dodać narzędzie zewnętrzne do wycinków kodu źródłowego, aby móc dodać kod do swojej witryny bez bezpośredniej edycji plików motywu. Możesz użyć narzędzia takiego jak wycinek kodu źródłowego, aby dodać kod dla tych widżetów.
Zarejestruj skrócony numer do wysyłki SMS i dodaj widżety
Te instrukcje zakładają, że masz już zainstalowaną wtyczkę Wycinki kodu źródłowego, ale zamiast tego możesz użyć innej wtyczki.
- W pasku bocznym WordPress wybierz Wycinki > Dodaj nowy.
- W polu Tutaj wprowadź tytuł nadaj wycinkowi zrozumiałą nazwę, na przykład „Kod widżetów Klaviyo Reviews”.
- Na karcie Funkcje (PHP) w sekcji Kod dodaj poniższe wycinki kodu źródłowego.
- Kliknij Zapisz zmiany i aktywuj.
- Dodaj skrócony numer do wysyłki SMS każdego widżetu do strony, na której ma się pojawić widżet.
Wycinek kodu źródłowego i skrócony numer do wysyłki SMS
Widżet recenzji produktów
Wycinek kodu źródłowego (dodaj na karcie 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');Skrócony numer do wysyłki SMS: [klaviyo-reviews-all]
Widżet ocen gwiazdkowych
Wycinek kodu źródłowego (dodaj na karcie 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');skrócony numer do wysyłki SMS: [klaviyo_star_rating]
Dodaj ten skrócony numer do wysyłki SMS do strony produktu, aby wyświetlić ocenę w gwiazdkach dla pojedynczego produktu, lub do dowolnej strony kolekcji, aby wyświetlić oceny w gwiazdkach dla wszystkich produktów w kolekcji.
SEO / Wszystkie recenzje i widżet karuzeli wyróżnionych
Wycinek kodu źródłowego (dodaj na karcie 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>";
}Skrócony numer do wysyłki SMS: [klaviyo-featured-reviews-carousel]
Skrócony numer do wysyłki SMS: [fulfilled-reviews-all]
Modyfikuj pliki motywu bezpośrednio
Jeśli masz dostęp do pliku functions.php w swojej instancji WordPressa, użyj poniższych wycinków kodu źródłowego, aby dodać widżety recenzji.
Te instrukcje są przeznaczone dla deweloperów z doświadczeniem w Wordpress PHP. Jeśli nie znasz Wordpress PHP, skorzystaj z alternatywnej metody.
Wycinek kodu źródłowego widżetu recenzji produktów
// 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);Wycinek kodu źródłowego widżetu oceny gwiazdkowej
// 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);Dodatkowe opcjonalne wycinki kodu źródłowego
Dodaj te wycinki kodu źródłowego, aby dodać opcjonalne widżety w dowolnym miejscu w witrynie. Pamiętaj, że musisz dodać je do kodu HTML konkretnej strony; nie można dodać ich do pliku functions.php.
Widżet SEO / Wszystkie recenzje
<div id='klaviyo-reviews-all' data-id='all'></div>
Widżet karuzeli wyróżnionych recenzji
<div id='klaviyo-featured-reviews-carousel'></div>
Rezultat
Po wykonaniu tych kroków widżety Klaviyo Reviews pojawią się w sklepie online.