WooCommerce용 클라비요 리뷰 설치 방법

예상 8 읽은 시간(분)

업데이트 2024년 11월 1일 오후 7:00 EST

스토어에 리뷰를 설치하고 리뷰 위젯을 추가하는 방법을 알아보세요.Klaviyo WooCommerce 시작하는 데 필요한 모든 단계에 대해 알아보려면 시작하기 Klaviyo 리뷰로 이동하세요.

WooCommerce용 클라비요 리뷰를 설치하는 방법에는 4가지가 있습니다. 회원님의 기술 지식 수준과 워드프레스 설정에 따라 적합한 솔루션이 달라집니다. 아래 순서도를 참고하여 자신에게 가장 적합한 설치 방법을 선택하세요.

코드 사용이 불편한 사용자는 플러그인을 추가하고 시각적 테마 편집기를 사용해야 하며, 테마 파일에 액세스할 수 없는 사용자는 플러그인과 코드 조각을 사용하고, 타사 또는 사용자 정의 테마를 사용하는 사용자는 짧은 코드를 사용하고, 사이트의 functions.php 파일에 액세스할 수 있는 사용자는 테마 파일을 직접 수정해야 한다는 흐름도를 표시합니다. 이 옵션은 기술적으로 가장 난이도가 낮은 것부터 시작하여 가장 난이도가 높은 것으로 끝납니다.

설치 방법을 선택할 때는 다음 사항을 고려하세요:

컬렉션 페이지에 별점 추가는 시각적 편집기가 있는 플러그인과 짧은 코드의 두 가지 설치 방법에서만 지원됩니다.
워드프레스의 편집기 액세스 수준을 고려하세요. 모든 사용자에게 웹사이트 테마 파일을 직접 편집할 수 있는 옵션이 있는 것은 아닙니다. functions.php 파일 등에 액세스할 수 없는 경우 다른 방법 중 하나를 사용하세요.
이러한 방법 중 몇 가지는 워드프레스 사이트에 다른 플러그인을 추가해야 합니다. 아래 지침은 코드 스니펫 플러그인을 참조하지만 클라비요는 특정 플러그인을 보증하지 않으며 플러그인 관련 문제 해결을 지원할 수 없습니다.

적합한 설치 단계를 선택했으면 관련 지침을 따라 진행하세요.

WooCommerce용 클라비요 리뷰를 설치하는 방법은 다음과 같습니다:

플러그인 설치 및 시각적 테마 편집기 사용
시각적 테마 편집기를 사용하지 않고 플러그인 설치하기
단축 코드 추가하기
테마 파일 수정하기

사용 가능한 리뷰 위젯

클라비요 리뷰를 설치하면 스토어에 평점 및 리뷰 세부 정보가 포함된 리뷰 위젯이 표시됩니다.

별점 위젯
특정 제품에 대한 현재 별점을 표시하며, 제품 페이지나 컬렉션 페이지의 제품 이름 아래에 추가되는 경우가 가장 많습니다.
제품 리뷰 위젯
제품이 받은 모든 평점, 리뷰와 함께 제출된 사용자 이미지, 제품이 받은 가장 일반적인 피드백을 분석한 차트를 표시합니다.

그 아래에는 게시된 모든 리뷰 및 고객 질문 목록과 함께 검색창, 리뷰 필터, 리뷰 작성 버튼, 질문하기 버튼이 있습니다.

이 위젯은 일반적으로 제품 페이지 하단 근처에 추가됩니다.
추천 리뷰 캐러셀 위젯
모든 제품의 하이라이트 리뷰를 표시합니다. 홈페이지, 독립형 리뷰 페이지 또는 사이트의 다른 모든 곳에서 이 기능을 사용할 수 있습니다. 이 위젯에 표시되는 리뷰를 선택할 수도 있습니다. 가능한 경우 고객이 제출한 이미지가 각 리뷰에 첨부되며, 제출된 이미지가 없는 경우 회원님의 제품 이미지가 사용됩니다.
SEO / 모든 리뷰 위젯
모든 제품에 대한 모든 리뷰를 한 페이지에 표시합니다. 이 위젯을 사용하여 SEO를 개선하고 잠재 고객사가 현재 고객사가 좋아하는 제품을 한 곳에서 확인할 수 있도록 하세요. 이 위젯은 사이트의 독립형 리뷰 페이지에 추가되는 경우가 가장 많습니다.

플러그인 설치 및 시각적 테마 편집기 사용

시각적 테마 편집기를 사용하여 사이트에 클라비요 리뷰 위젯을 추가하려면 먼저 테마에 이러한 드래그 앤 드롭 블록을 로드하는 코드를 추가해야 합니다. 코드 조각과 같은 도구를 사용하여 이러한 블록의 소스 코드를 추가한 다음 시각적 테마 편집기를 사용하여 클라비요 리뷰 위젯을 테마에 끌어다 놓을 수 있습니다.

리뷰 위젯 소스 코드 추가

이 지침은 코드 스니펫 플러그인을 이미 설치했다고 가정하지만 다른 플러그인을 대신 사용할 수도 있습니다.

워드프레스 사이드바에서 코드조각 > 새로 추가를 선택합니다.
여기에 제목 입력 필드에 "클라비요 리뷰 위젯 코드"와 같이 스니펫의 이름을 명확하게 지정합니다.
코드 섹션의 함수(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() {
    // 로고 이미지 등록 및 대기열에 추가
    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', '
        ( 함수( 블록, 엘리먼트 ) {
            var el = element.createElement;
            // 사용자 정의 카테고리 추가
            blocks.updateCategory( "위젯", {
                슬러그: "클라비요",
                title: "클라비요",
                icon: el("img", { src: "' . 로고 URL . '", 스타일: { width: "20px", height: "20px" } })
            } );
            blocks.registerBlockType( "klaviyo/product-reviews", {
                title: "클라비요 제품 리뷰",
                icon: "admin-comments",
                카테고리: "클라비요",
                편집: 함수() {
                    return el(
                       "div",
                        { className: "klaviyo-product-reviews" },
                       "클라비요 제품 리뷰가 여기에 표시됩니다."
                    );
                },
                save: function() {
                    return null;
                },
            });
            blocks.registerBlockType( "klaviyo/product-star-ratings", {
                title: "클라비요 별점",
                아이콘: "별 가득한",
                카테고리: "클라비요",
                편집: 함수() {
                    return el(
                       "div",
                        { className: "klaviyo-product-star-ratings" },
                       "클라비요 제품 별점이 여기에 표시됩니다."
                    );
                },
                저장: 함수() {
                    return null;
                },
            });
            blocks.registerBlockType( "klaviyo/featured-reviews", {
                title: "클라비요 추천 리뷰",
                icon: "admin-post",
                카테고리: "클라비요",
                편집: 함수() {
                    return el(
                       "div",
                        { className: "klaviyo-featured-reviews" },
                       "클라비요 추천 리뷰가 여기에 표시됩니다."
                    );
                },
                저장: 함수() {
                    return null;
                },
            });
            blocks.registerBlockType( "klaviyo/all-reviews", {
                title: "클라비요 모든 리뷰",
                아이콘: "관리자 페이지",
                카테고리: "클라비요",
                편집: 함수() {
                    return el(
                       "div",
                        { className: "klaviyo-all-reviews" },
                       "클라비요 모든 리뷰가 여기에 표시됩니다."
                    );
                },
                저장: 함수() {
                    return null;
                },
            });
        } )(
            window.wp.blocks,
            window.wp.element
        );
    ' );
}
add_action( 'enqueue_block_editor_assets', 'enqueue_klaviyo_block_editor_assets' );
// 블록을 렌더링하는 콜백 함수
함수 render_klaviyo_product_reviews( $attributes, $content ) {
    글로벌 $product;
    if ( is_product() && isset($product) ) {
        return "<div id='klaviyo-reviews-all' data-id='" . esc_attr($product->get_id()) . "'></div>";
    }
}
함수  렌더_클라비요_스타_등급( $속성, $콘텐츠 ) {
    글로벌 $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>";
}

클라비요 리뷰 플러그인 추가

모양 > 편집기로 이동합니다.
템플릿을 선택합니다.
단일 제품 템플릿을 선택합니다. 이름이 약간 다를 수 있다는 점에 유의하세요.
를 클릭하여 차단 메뉴를 엽니다.
블록 메뉴의 클라비요 섹션으로 이동합니다.
클라비요 리뷰 위젯을 테마로 끌어다 놓습니다.
저장을 클릭합니다.

컬렉션 별점 평가 위젯 추가

모양 > 편집기로 이동합니다.
템플릿을 선택합니다.
제품 컬렉션이 포함된 페이지를 선택합니다.
를 클릭하여 차단 메뉴를 엽니다.
블록 메뉴의 클라비요 섹션으로 이동합니다.
별점 위젯을 컬렉션의 모든 제품으로 드래그합니다.
저장을 클릭합니다.

원하는 경우 아래 코드 스니펫을 사용하여 별점 위젯을 가운데에 정렬합니다. YOUR_PAGE_ID 자리 표시자를 컬렉션 페이지의 페이지 ID로 바꿔야 합니다. 페이지 ID를 찾는 방법을 알아보세요.

.page-id-YOUR_PAGE_ID 

.klaviyo 별점 평가 위젯 { 
    display: flex; 
    justify-content: center; 
    align-items: center; 
    text-align: center; 
    margin: 0 auto; 
}

플러그인 설치 및 코드로 위젯 추가하기

이 방법을 사용할 때 위젯은 WooCommerce 비주얼 후크의 배치에 따라 사이트에 추가됩니다. 따라서 제품 페이지에 WooCommerce 위젯이 없는 경우 대체 설치 옵션을 사용해야 합니다.

이 프로세스에서는 타사 코드 스니펫 도구를 추가해야 하므로 테마 파일을 직접 편집하지 않고도 사이트에 코드를 추가할 수 있습니다. 코드 스니펫과 같은 도구를 사용하여 이러한 위젯의 코드를 추가할 수 있습니다.

리뷰 위젯 소스 코드 추가

이 지침은 코드 스니펫 플러그인을 이미 설치했다고 가정하지만 다른 플러그인을 대신 사용할 수도 있습니다.

워드프레스 사이드바에서 코드조각 > 새로 추가를 선택합니다.
여기에 제목 입력 필드에 "클라비요 리뷰 위젯 코드"와 같이 스니펫의 이름을 명확하게 지정합니다.
코드 섹션의 함수(PHP) 탭에서 아래 코드 스니펫을 추가합니다.
변경 사항 저장 및 활성화를 클릭합니다.

사용하려는 각 위젯에 대한 코드 스니펫을 설치해야 합니다. 아래 섹션에서는 각 위젯의 코드에 대해 간략하게 설명합니다.

제품 리뷰 위젯 코드 스니펫

사이트에서 위젯의 위치를 조정하려면 add_action 함수에서 위치('woocommerce_after_single_product_summary')와 우선순위 (15) 를 편집합니다.

함수 klaviyo_add_product_reviews_widget() {
    글로벌 $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)를 편집합니다.

함수 klaviyo_add_product_star_ratings_widget() {
    글로벌 $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>

짧은 코드 추가

이 과정에는 먼저 테마 파일에 단축 코드를 등록한 다음 사이트의 아무 곳에나 단축 코드를 삽입하는 것이 포함됩니다.

이를 완료하려면 먼저 타사 코드 스니펫 도구를 추가하여 테마 파일을 직접 편집하지 않고도 사이트에 코드를 추가할 수 있어야 합니다. 코드 스니펫과 같은 도구를 사용하여 이러한 위젯의 코드를 추가할 수 있습니다.

단축 코드 등록 및 위젯 추가

이 지침은 코드 스니펫 플러그인을 이미 설치했다고 가정하지만 다른 플러그인을 대신 사용할 수도 있습니다.

워드프레스 사이드바에서 코드조각 > 새로 추가를 선택합니다.
여기에 제목 입력 필드에 "클라비요 리뷰 위젯 코드"와 같이 스니펫의 이름을 명확하게 지정합니다.
코드 섹션의 함수(PHP) 탭에서 아래 코드 스니펫을 추가합니다.
변경 사항 저장 및 활성화를 클릭합니다.
위젯을 표시할 페이지에 각 위젯의 짧은 코드를 추가합니다.

코드 스니펫 및 짧은 코드

제품 리뷰 위젯

코드 스니펫(함수(PHP) 탭에 추가):

함수 klaviyo_add_product_reviews_widget() {
    글로벌 $product;
	if (isset($product)) {
        product_id = $product->get_id();
        tag = "<div id='klaviyo-reviews-all' data-id='{$product_id}'></div>" ;
		return $tag;
    }
}
추가_쇼트코드('클라비요-리뷰-모두', '클라비요_애드_제품_리뷰_위젯');

단축 코드: [클라비요-리뷰-올]

별점 위젯

코드 스니펫(함수(PHP) 탭에 추가):

함수 klaviyo_add_product_star_ratings_widget() {
    글로벌 $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');

짧은 코드: [클라비요_스타_등급]

이 짧은 코드를 제품 페이지에 추가하여 단일 제품의 별점을 표시하거나 컬렉션 페이지에 추가하여 컬렉션의 모든 항목에 대한 별점을 표시할 수 있습니다.

SEO / 모든 리뷰 & 추천 캐러셀 위젯

코드 스니펫(함수(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>";
}

단축 코드: [클라비요-기능-리뷰-캐러셀]

짧은 코드: [fulfilled-reviews-all]

테마 파일을 직접 수정

워드프레스 인스턴스의 functions.php 파일에 액세스할 수 있는 경우 아래 코드 스니펫을 사용하여 리뷰 위젯을 추가하세요.

이 지침은 워드프레스 PHP 경험이 있는 개발자를 위한 것입니다. 워드프레스 PHP에 익숙하지 않은 경우 다른 방법을 사용하세요.

제품 리뷰 위젯 코드 스니펫

// 올바른 제품 ID로 동적 div를 렌더링하는 함수를 만듭니다.
함수 klaviyo_add_product_reviews_widget() {
    글로벌 $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);

별점 위젯 코드 스니펫

// 올바른 제품 ID를 가진 동적 div를 렌더링하는 함수를 만듭니다.
함수 klaviyo_add_product_star_ratings_widget() {
    글로벌 $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>

Klaviyo에서 자세히 살펴보기

커뮤니티

동료, 파트너, Klaviyo 전문가와 연결되어 영감을 받고 인사이트를 공유하며, 모든 궁금한 사항에 대해 답을 얻으세요.

커뮤니티 방문

라이브 교육

Klaviyo 전문가와 함께하는 라이브 세션에 참여하여 모범 사례, 주요 기능 설정 방법 등에 대해 알아보세요.

지금 등록하기

지원

계정을 통해 지원에 액세스하세요.

이메일 지원 (무료 체험 및 유료 계정) 연중무휴 24시간 사용 가능

채팅/가상 비서
사용 가능 여부는 위치 및 요금제 유형에 따라 다름

로그인

WooCommerce용 클라비요 리뷰 설치 방법

학습 내용

시작하기 전 안내 사항

사용 가능한 리뷰 위젯

플러그인 설치 및 시각적 테마 편집기 사용

리뷰 위젯 소스 코드 추가

리뷰 위젯 소스 코드

클라비요 리뷰 플러그인 추가

컬렉션 별점 평가 위젯 추가

플러그인 설치 및 코드로 위젯 추가하기

리뷰 위젯 소스 코드 추가

제품 리뷰 위젯 코드 스니펫

별점 위젯 코드 스니펫

추가 옵션 코드 스니펫

SEO 위젯

추천 리뷰 캐러셀 위젯

짧은 코드 추가

단축 코드 등록 및 위젯 추가

코드 스니펫 및 짧은 코드

제품 리뷰 위젯

별점 위젯

SEO / 모든 리뷰 & 추천 캐러셀 위젯

테마 파일을 직접 수정

제품 리뷰 위젯 코드 스니펫

별점 위젯 코드 스니펫

추가 옵션 코드 스니펫

SEO / 모든 리뷰 위젯

추천 리뷰 캐러셀 위젯

결과

추가 리소스

Klaviyo에서 자세히 살펴보기