WooCommerce용 Klaviyo 리뷰 설치 방법
학습 내용
WooCommerce 스토어에 Klaviyo 리뷰를 설치하고 리뷰 위젯을 추가하는 방법을 알아보세요. 시작에 필요한 모든 단계를 알아보려면 Klaviyo 리뷰 시작하기로 이동하세요.
시작하기 전에 알아야 할 것
WooCommerce용 Klaviyo 리뷰를 설치하는 방법은 4가지가 있어요. 가장 적합한 방법은 기술 지식 수준과 Wordpress 설정에 따라 달라요. 아래 플로우차트를 사용해 가장 적합한 설치 방법을 선택해 주세요.
설치 방법을 선택할 때 다음 사항을 고려하세요.
- 컬렉션 페이지에 별점 평가를 추가하는 기능은 2가지 설치 방법에서만 지원돼요: 비주얼 에디터가 있는 플러그인과 단축 번호.
- Wordpress에서 편집자 액세스 수준을 고려해 보세요. 모든 사용자가 웹사이트 테마 파일을 직접 편집할 수 있는 옵션을 사용할 수 있는 것은 아니에요. functions.php file 또는 유사한 파일에 액세스할 수 없다면, 다른 방법 중 하나를 사용하세요.
- 이러한 방법 중 일부는 Wordpress 사이트에 다른 플러그인을 추가해야 해요. 아래 안내는 코드 조각 플러그인을 참조하지만, Klaviyo는 특정 플러그인을 지지하지 않으며 플러그인 관련 문제 해결을 지원할 수 없어요.
본인에게 맞는 설치 단계를 선택했으면, 관련 안내로 진행하세요.
다음과 같이 WooCommerce용 Klaviyo 리뷰를 설치하는 방법을 알아보세요:
사용 가능한 후기 위젯
Klaviyo 리뷰를 설치하면 스토어에 리뷰 위젯이 표시되며, 평점과 리뷰 세부 정보를 기능으로 제공합니다.
- 별점 위젯
특정 제품의 현재 별점을 표시하며, 대부분 제품 페이지 또는 컬렉션 페이지에서 제품명 아래에 추가돼요.
- 제품 리뷰 위젯
제품이 받은 모든 평점을 분석한 차트, 리뷰와 함께 제출된 사용자 이미지, 제품에 대해 가장 많이 받은 피드백을 보여줘요.
그 아래에는 검색창, 리뷰 필터, 리뷰 작성 버튼, 질문하기 버튼과 함께 게시된 모든 리뷰 및 고객 질문 목록이 표시돼요.
이 위젯은 일반적으로 제품 페이지 하단 근처에 추가돼요.
- 추천 리뷰 캐러셀 위젯
모든 제품의 하이라이트된 리뷰를 표시해요. 홈페이지, 독립형 리뷰 페이지 또는 사이트의 다른 어느 곳에나 이 기능을 표시할 수 있어요. 또한 이 위젯에 추천할 리뷰를 선택할 수도 있어요. 가능한 경우 고객이 제출한 이미지가 각 리뷰와 함께 표시되며, 이미지가 제출되지 않은 경우 제품 이미지가 사용돼요.
- SEO / 전체 리뷰 위젯
모든 제품의 모든 리뷰를 단일 페이지에 표시해요. 이 위젯을 사용하면 SEO를 개선하고, 잠재 고객이 현재 고객이 무엇을 좋아하는지 한곳에서 확인할 수 있어요. 이 위젯은 사이트의 독립형 리뷰 페이지에 가장 자주 추가돼요.
플러그인을 설치하고 시각적 테마 편집기를 사용하세요.
비주얼 테마 편집기를 사용해 사이트에 Klaviyo 리뷰 위젯을 추가하려면 먼저 테마에서 이러한 드래그 앤 드롭 블록을 로드할 수 있도록 코드 조각을 추가해야 해요. 코드 조각과 같은 도구를 사용해 이러한 블록의 소스 코드를 추가한 다음, 비주얼 테마 편집기에서 Klaviyo 리뷰 위젯을 테마로 드래그 앤 드롭할 수 있어요.
후기 위젯 소스 코드 추가
이 안내는 이미 코드 조각 플러그인을 설치했다고 가정하지만, 대신 다른 플러그인을 사용해도 돼요.
- Wordpress 사이드바에서 스니펫 > 새로 추가를 선택하세요.
- 여기에 제목 입력 필드에서 “Klaviyo 리뷰 위젯 코드”처럼 스니펫 이름을 명확하게 지정해 주세요.
- Code 섹션의 Functions (PHP) 탭에서 아래 코드 조각을 추가하세요.
- 변경 사항 저장 및 활성화를 클릭하세요.
리뷰 위젯 소스 코드
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>";
}Klaviyo 리뷰 플러그인 추가
- 모양 > 편집기로 이동하세요.
- Select 템플릿.
- 단일 제품 템플릿을 선택하세요. 이름이 약간 다를 수도 있다는 점에 유의하세요.
- +를 클릭하여 블록 메뉴를 여세요.
- Blocks 메뉴의 Klaviyo 섹션으로 이동하세요.
- 테마에 Klaviyo 리뷰 위젯을 드래그 앤 드롭으로 추가하세요.
- 저장을 클릭합니다.
컬렉션 별점 위젯 추가
- 모양 > 편집기로 이동하세요.
- Select 템플릿.
- 제품 컬렉션이 포함된 페이지를 선택하세요.
- +를 클릭하여 블록 메뉴를 여세요.
- Blocks 메뉴의 Klaviyo 섹션으로 이동하세요.
- 컬렉션의 어떤 제품에든 별점 위젯을 드래그해 놓으세요.
- 저장을 클릭합니다.
원하는 경우 아래 코드 조각을 사용해 별점 위젯을 가운데 정렬해 주세요. 컬렉션 페이지의 페이지 ID로 YOUR_PAGE_ID 자리표시자를 반드시 바꿔야 한다는 점에 유의해 주세요. 페이지 ID를 찾는 방법을 알아보세요.
.page-id-YOUR_PAGE_ID
.klaviyo-star-rating-widget {
display: flex;
justify-content: center;
align-items: center;
text-align: center;
margin: 0 auto;
}플러그인을 설치하고 코드를 사용해 위젯을 추가하세요
이 방법을 사용하면 WooCommerce 비주얼 훅의 배치에 따라 사이트에 위젯이 추가돼요. 따라서 제품 페이지에 WooCommerce 위젯이 없다면 다른 설치 옵션을 사용해야 해요.
이 프로세스에서는 타사 코드 조각 도구를 추가해야 하며, 테마 파일을 직접 편집하지 않고도 사이트에 코드를 추가할 수 있어요. 코드 조각 같은 도구를 사용해 이러한 위젯의 코드를 추가할 수 있어요.
후기 위젯 소스 코드 추가
이 지침은 코드 조각 플러그인을 이미 설치했다고 가정하지만, 대신 다른 플러그인을 사용할 수도 있어요.
- Wordpress 사이드바에서 스니펫 > 새로 추가를 선택하세요.
- 여기에 제목 입력 필드에서 “Klaviyo 리뷰 위젯 코드”처럼 스니펫 이름을 명확하게 지정해 주세요.
- Code 섹션의 Functions (PHP) 탭에서 아래 코드 조각을 추가하세요.
- 변경 사항 저장 및 활성화를 클릭하세요.
사용하려는 각 위젯마다 코드 조각을 설치해야 해요. 아래 섹션에서는 각 위젯의 코드를 안내해요.
제품 리뷰 위젯 코드 조각
사이트에서 위젯의 위치를 조정하려면 add_action 함수에서 위치('woocommerce_after_single_product_summary')와 우선순위(15)를 편집하세요.
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);별점 위젯 코드 조각
사이트에서 위젯의 위치를 조정하려면 add_action 함수에서 위치('woocommerce_single_product_summary')와 우선순위(6)를 편집하세요.
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);추가 선택 사항 코드 조각
이 코드 조각을 사용해 사이트 어디에나 선택적 위젯을 추가하세요. 참고로, 이는 특정 페이지의 HTML에 추가해야 하며 functions.php 파일에는 추가할 수 없어요.
SEO 위젯
<div id='klaviyo-reviews-all' data-id='all'></div>
추천 리뷰 캐러셀 위젯
<div id='klaviyo-featured-reviews-carousel'></div>
단축 번호 추가
이 프로세스는 먼저 테마 파일에 단축 번호를 등록한 다음, 사이트 어디에든 단축 번호를 삽입하는 방식으로 진행됩니다.
이를 완료하려면 먼저 타사 코드 조각 도구를 추가해, 테마 파일을 직접 편집하지 않고도 사이트에 코드를 추가할 수 있어야 해요. 코드 조각 같은 도구를 사용해 이러한 위젯의 코드를 추가할 수 있어요.
단축 번호를 등록하고 위젯을 추가합니다.
이 안내는 이미 코드 조각 플러그인을 설치했다고 가정하지만, 대신 다른 플러그인을 사용할 수도 있어요.
- Wordpress 사이드바에서 스니펫 > 새로 추가를 선택하세요.
- 여기에 제목 입력 필드에서 “Klaviyo 리뷰 위젯 코드”처럼 스니펫 이름을 명확하게 지정해 주세요.
- Code 섹션의 Functions (PHP) 탭에서 아래 코드 조각을 추가하세요.
- 변경 사항 저장 및 활성화를 클릭하세요.
- 각 위젯의 단축 번호를 위젯을 표시하려는 페이지에 추가해 주세요.
코드 조각 및 단축 번호
제품 리뷰 위젯
코드 조각(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');단축 번호: [klaviyo-reviews-all]
별점 위젯
코드 조각(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');단축 번호: [klaviyo_star_rating]
이 단축 번호를 상품 페이지에 추가하면 단일 상품의 별점 평가를 표시할 수 있고, 컬렉션 페이지에 추가하면 컬렉션의 모든 항목에 대한 별점 평가를 표시할 수 있습니다.
SEO / 모든 리뷰 & 추천 캐러셀 위젯
코드 조각(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>";
}단축 번호: [klaviyo-featured-reviews-carousel]
단축 번호: [fulfilled-reviews-all]
테마 파일을 직접 수정하기
Wordpress 인스턴스의 functions.php 파일에 액세스할 수 있다면, 아래 코드 조각을 사용해 리뷰 위젯을 추가하세요.
이 안내는 Wordpress PHP 경험이 있는 개발자를 위한 내용이에요. Wordpress PHP에 익숙하지 않다면 다른 방법을 사용해 주세요.
제품 리뷰 위젯 코드 조각
// 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);별점 위젯 코드 조각
// 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);추가 선택 사항 코드 조각
사이트 어디에서나 선택적 위젯을 추가할 수 있도록 다음 코드 조각을 추가해 주세요. 참고로, 이는 특정 페이지의 HTML에 추가해야 하며 functions.php 파일에는 추가할 수 없어요.
SEO/모든 후기 위젯
<div id='klaviyo-reviews-all' data-id='all'></div>
추천 리뷰 캐러셀 위젯
<div id='klaviyo-featured-reviews-carousel'></div>
결과
이 단계를 완료하면 Klaviyo 리뷰 위젯이 온라인 스토어에 표시돼요.