우커머스 상품 페이지에 블록 에디터 사용하기

워드프레스 우커머스 쇼핑몰에서 상품 페이지는 기본적으로 클래식 편집기가 사용됩니다. 엘리멘터를 사용하는 경우 엘리멘터로 상품 페이지를 편집하도록 설정할 수 있습니다.

네이버 카페에 클래식 편집기(고전 편집기) 대신 블록 에디터로 상품 페이지를 편집할 수 있는 방법이 없는지에 대한 질문이 올라와서 여기에 대하여 정리해 보았습니다.

우커머스 상품 페이지를 엘리멘터로 편집하도록 활성화하기

엘리멘터를 사용하고 있다면 Elementor로 상품 페이지를 꾸밀 수 있습니다. 기본적으로 엘리멘터는 글, 페이지에 대하여 활성화되어 있습니다. 워드프레스 알림판 » Elementor » 설정 » 일반 탭으로 이동하여 게시물 유형에서 상품을 체크하면 상품 페이지를 엘리멘터로 작성할 수 있습니다.

참고로 페이지는 보통 엘리멘터와 같은 페이지 빌더를 사용해도 되지만, 글(포스트)은 가급적 기본 편집기인 블록 에디터를 사용하시기 바랍니다. 이와 관련하여 "워드프레스 글을 페이지 빌더로 작성해서는 안 되는 EU"를 참고해 보세요.

상품 페이지 편집에 엘리멘터를 사용하도록 활성화하면 이제 상품 페이지 편집 화면에 "엘리멘터로 편집" 버튼이 표시됩니다.

상품 페이지를 엘리멘터로 작성하는 경우, 추후 엘리멘터를 비활성화할 경우 문제가 되므로 Elementor 사용 여부를 신중히 결정하시기 바랍니다.

엘리멘터 프로를 사용하는 경우 상품 페이지 레이아웃을 테마 빌더에서 템플릿으로 만들 수 있습니다. 이 방법을 이용하면 상품 페이지의 전반적인 레이아웃을 템플릿으로 만들고 고전 편집기나 블록 에디터(아래의 "상품 페이지에서 블록 에디터를 사용하도록 설정하기" 부분 참조) 등을 사용하여 개별 상품 페이지를 작성할 수 있습니다. 그러면 템플릿으로 구성한 레이아웃으로 상품 페이지가 표시됩니다. 상품 페이지 레이아웃 구성을 정교하게 커스텀하고 싶은 경우 유용합니다.

새 상품 편집기 활성화하기

우커머스(WooCommerce)에서는 베타 기능으로 새 상품 편집기를 활성화할 수 있는 옵션을 제공합니다.

새 상품 편집기를 활성화하려면 워드프레스 대시보드 » 우커머스 » 설정 » 고급 탭 » 기능으로 이동하여 실험적 기능 섹션의 새 상품 편집기 옵션을 체크하여 활성화하면 됩니다.

새 상품 편집기를 활성화하면 상품 편집 화면은 아래와 같이 모든 상품 정보를 한 페이지에서 입력하는 것이 아니라 일반, 옵션, 조직, 재고, 배송, 연결된 상품 등의 탭으로 분리하여 입력할 수 있습니다.

이런 방식으로 상품 정보를 입력하는 것을 선호하는 경우 새 상품 편집기 사용을 고려할 수 있을 것 같습니다.

상품 페이지에 블록 에디터를 사용하도록 설정하기

상품 페이지에 블록 에디터를 사용하도록 하는 기능은 워드프레스에 탑재되어 있지 않지만, 간단한 코드를 추가하여 블록 에디터를 사용하도록 활성화할 수 있습니다.

차일드 테마(자식 테마)가 설치되어 있지 않다면 차일드 테마를 만든 후에 차일드 테마의 함수 파일에 다음 코드를 추가하도록 합니다.

// 우커머스 상품 편집 페이지에서 블록 에디터 활성화
// Enable WordPress Block Editor on WooCommerce product edit pages
function activate_gutenberg_product( $can_edit, $post_type ) {

    // 상품(post_type: 'product')에 대해서만 블록 에디터 활성화
    // Enable block editor only for 'product' post type
    if ( $post_type === 'product' ) {
        $can_edit = true;
    }

    return $can_edit;
}
add_filter( 'use_block_editor_for_post_type', 'activate_gutenberg_product', 10, 2 );

// 우커머스 상품 카테고리 및 태그에 대해 REST API 지원 활성화
// Enable REST API support for WooCommerce product categories and tags
function enable_taxonomy_rest( $args ) {

    // show_in_rest 설정을 true로 변경
    // Set show_in_rest to true
    $args['show_in_rest'] = true;

    return $args;
}
add_filter( 'woocommerce_taxonomy_args_product_cat', 'enable_taxonomy_rest' ); // 상품 카테고리
add_filter( 'woocommerce_taxonomy_args_product_tag', 'enable_taxonomy_rest' ); // 상품 태그

차일드 테마는 플러그인을 사용하여 만들거나 테마 설치 파일에 포함되어 있을 수 있습니다. 예를 들어, 아바다 테마를 사용하는 경우 아바다 테마 설치 파일에 포함된 차일드 테마 파일을 이용하여 차일드 테마를 설치하고 활성화할 수 있습니다.

차일드 테마의 함수 파일 경로는 /wp-content/themes/child-theme-folder/functions.php입니다. 테마 파일을 수정하려면 FTP에 접속하도록 합니다.

위의 코드를 추가하고 저장하면 상품 페이지를 블록 에디터로 편집할 수 있도록 블록 에디터가 활성화됩니다.

GeneratePress 테마에서 테스트하여 잘 작동하는 것을 확인했습니다. 다른 테마에서도 잘 작동할 것이라 생각됩니다. 우커머스나 워드프레스가 업데이트되면서 상기 코드가 작동하지 않게 되는 경우 아래 댓글을 통해 알려주시면 코드를 최신 버전에 맞게 수정하겠습니다.

마치며

이상으로 우커머스 상품 페이지에서 블록 편집기를 사용할 수 있도록 활성화하는 방법에 대하여 살펴보았습니다. 엘리멘터 등 페이지 빌더를 사용할 경우 사이트 속도에 영향을 미칠 수 있습니다.

사이트 속도가 느려서 고민인 경우 GeneratePress 테마와 같이 가볍고 빠른 테마를 사용하고 엘리멘터와 같은 페이지 빌더 대신 블록 에디터를 사용하면 속도가 확실히 개선될 것입니다.

참고

• 우커머스 간편 주문 페이지 - YITH Easy Order Page for WooCommerce
• 워드프레스로 쉽게 랜딩 페이지 만들기 (feat. 엘리멘터, GeneratePress, Divi)
• ChemiCloud 워드프레스 호스팅 서울 서버 리전 추가 (+ 가입 방법)
• 시간과 능률을 향상시키는 워드프레스 블록 편집기 키보드 단축키