WooCommerce용 Klaviyo 리뷰 설치 방법
학습 내용
WooCommerce 스토어에 Klaviyo 리뷰를 설치하고 리뷰 위젯을 추가하는 방법을 알아보세요. 시작에 필요한 모든 단계를 알아보려면 Klaviyo 리뷰 시작하기로 이동하세요.
시작하기 전에 알아야 할 것
위젯을 설치하기 전에 WooCommerce 스토어를 Klaviyo에 연결 하세요. 스토어에서 위젯을 로드하려면 Klaviyo의 온사이트 JavaScript도 필요해요. 아직 Klaviyo 리뷰 설정을 시작하지 않았다면 Klaviyo에서 리뷰로 이동한 다음 리뷰 추가를 클릭하세요.
WooCommerce용 Klaviyo 리뷰를 설치하는 방법은 4가지가 있어요. 적합한 방법은 보유한 기술 지식 수준과 WordPress 설정에 따라 달라져요. 아래 순서도를 사용해 가장 적합한 설치 방법을 선택해 주세요.
설치 방법을 선택할 때 다음 사항을 고려하세요.
- 컬렉션 페이지에 별점 평점을 추가하는 기능은 2가지 설치 방법에서만 지원돼요. 시각적 편집기가 있는 플러그인과 단축코드예요.
- WordPress에서 편집자 접근 권한 수준을 확인해 보세요. 모든 사용자가 웹사이트 테마 파일을 직접 편집할 수 있는 옵션을 갖고 있는 것은 아니에요. functions.php 파일 또는 이와 유사한 파일에 접근할 수 없다면, 다른 방법 중 하나를 사용해 주세요.
- 이러한 방법 중 일부는 WordPress 사이트에 다른 플러그인을 추가해야 해요. 아래 안내에서는 코드 조각 플러그인을 참고하지만, Klaviyo는 특정 플러그인을 보증하지 않으며 플러그인 관련 문제 해결은 지원할 수 없어요.
본인에게 맞는 설치 단계를 선택했으면, 관련 안내로 진행하세요.
다음과 같이 WooCommerce용 Klaviyo 리뷰를 설치하는 방법을 알아보세요:
사용 가능한 후기 위젯
Klaviyo 리뷰를 설치하면 스토어에 리뷰 위젯이 표시되며, 평점과 리뷰 세부 정보를 기능으로 제공합니다.
- 별점 위젯
특정 제품의 현재 별점을 표시하며, 대부분 제품 페이지 또는 컬렉션 페이지에서 제품명 아래에 추가돼요.
- 제품 리뷰 위젯
제품이 받은 모든 평점을 분석한 차트, 리뷰와 함께 제출된 사용자 이미지, 제품에 대해 가장 많이 받은 피드백을 보여줘요.
그 아래에는 검색창, 리뷰 필터, 리뷰 작성 버튼, 질문하기 버튼과 함께 게시된 모든 리뷰 및 고객 질문 목록이 표시돼요.
이 위젯은 일반적으로 제품 페이지 하단 근처에 추가돼요.
- 추천 리뷰 캐러셀 위젯
모든 제품의 하이라이트된 리뷰를 표시해요. 홈페이지, 독립형 리뷰 페이지 또는 사이트의 다른 어느 곳에나 이 기능을 표시할 수 있어요. 또한 이 위젯에 추천할 리뷰를 선택할 수도 있어요. 가능한 경우 고객이 제출한 이미지가 각 리뷰와 함께 표시되며, 이미지가 제출되지 않은 경우 제품 이미지가 사용돼요.
- SEO / 전체 리뷰 위젯
모든 제품의 모든 리뷰를 단일 페이지에 표시해요. 이 위젯을 사용하면 SEO를 개선하고, 잠재 고객이 현재 고객이 무엇을 좋아하는지 한곳에서 확인할 수 있어요. 이 위젯은 사이트의 독립형 리뷰 페이지에 가장 자주 추가돼요.
플러그인을 설치하고 시각적 테마 편집기를 사용하세요.
이 방법을 사용하려면 사이트 편집기에 액세스할 수 있는 WordPress 블록 테마가 필요해요. 시각적 테마 편집기를 사용해 사이트에 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 섹션으로 이동하세요.
- 컬렉션의 모든 제품에 Klaviyo Star Ratings 위젯을 드래그해 놓아 주세요.
- 저장을 클릭합니다.
원하는 경우 아래 코드 조각을 사용해 별점 위젯을 가운데 정렬해 주세요. 컬렉션 페이지의 페이지 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 시각적 후크를 사용해 위젯을 배치해요. 위젯이 표시되려면 제품 템플릿에서 이러한 후크를 실행해야 해요. 그렇지 않다면 다른 설치 방법을 선택해 주세요.
이 프로세스에서는 타사 코드 조각 도구를 추가해야 하며, 테마 파일을 직접 편집하지 않고도 사이트에 코드를 추가할 수 있어요. 코드 조각 같은 도구를 사용해 이러한 위젯의 코드를 추가할 수 있어요.
후기 위젯 소스 코드 추가
이 지침은 코드 조각 플러그인을 이미 설치했다고 가정하지만, 대신 다른 플러그인을 사용할 수도 있어요.
- 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>
단축 코드 추가
이 과정은 코드 조각 플러그인에 쇼트코드를 등록한 다음, 위젯을 표시할 위치에 삽입하는 방식으로 진행돼요. 제품 리뷰와 별점 평점에는 현재 WooCommerce 제품이 필요하므로, 전체 리뷰 및 추천 리뷰 위젯과 배치 방식이 달라요.
이를 완료하려면 먼저 타사 코드 조각 도구를 추가해, 테마 파일을 직접 편집하지 않고도 사이트에 코드를 추가할 수 있어야 해요. 코드 조각 같은 도구를 사용해 이러한 위젯의 코드를 추가할 수 있어요.
쇼트코드를 등록하고 위젯을 추가하세요
이 안내는 이미 코드 조각 플러그인을 설치했다고 가정하지만, 대신 다른 플러그인을 사용할 수도 있어요.
- WordPress 사이드바에서 코드 조각 > 새로 추가를 선택해 주세요.
- 여기에 제목 입력 필드에서 “Klaviyo 리뷰 위젯 코드”처럼 스니펫 이름을 명확하게 지정해 주세요.
- Code 섹션의 Functions (PHP) 탭에서 아래 코드 조각을 추가하세요.
- 변경 사항 저장 및 활성화를 클릭하세요.
- 각 위젯의 쇼트코드를 표시하려는 위치에 추가해 주세요. WordPress 블록 편집기에서 쇼트코드 블록을 사용해 주세요.
- 단축 코드를 추가한 후 페이지 또는 템플릿을 저장하거나 게시해 주세요.
코드 조각 및 단축 코드
제품 리뷰 위젯
코드 조각(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]
이 쇼트코드를 제품 페이지에 추가하면 해당 제품의 별점 평가를 표시할 수 있어요. 컬렉션 페이지에서는 각 제품의 반복 콘텐츠 안에 배치해 각 쇼트코드에 현재 WooCommerce 제품이 있도록 해 주세요. 페이지의 다른 위치에 쇼트코드를 한 번 추가하는 것만으로는 컬렉션의 모든 항목에 대한 평가가 생성되지 않아요.
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>";
}
add_shortcode('klaviyo-featured-reviews-carousel', 'klaviyo_add_featured_reviews_widget');
add_shortcode('fulfilled-reviews-all', 'klaviyo_add_all_reviews_widget');단축코드: [klaviyo-featured-reviews-carousel]
단축코드: [fulfilled-reviews-all]
테마 파일을 직접 수정하기
WordPress 인스턴스의 functions.php 파일에 접근할 수 있다면, 아래의 제품 리뷰 및 별점 스니펫을 해당 파일에 추가한 다음 저장해 주세요. 제품 템플릿은 이러한 스니펫에서 사용하는 WooCommerce 훅을 지원해야 해요. 선택 사항인 HTML 스니펫을 해당 위젯이 표시되길 원하는 페이지에 추가해 주세요.
이 안내는 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 Reviews 시작하기
고객 피드백을 수집하고 잠재 고객과 긍정적인 리뷰를 공유할 수 있도록 리뷰를 설정하는 방법을 알아보세요.
- Klaviyo 리뷰 플로우로 고객에게 리뷰를 요청하는 방법
Klaviyo에서 주요 플로우를 구성해 고객 리뷰 수집을 시작하는 방법을 알아보세요.