WooCommerce

WooCommerce 템플릿 및 제품 페이지 맞춤 설정

업데이트됨
2023년 6월 30일

[aioseo_eeat_author_tooltip]

[aioseo_eeat_reviewer_tooltip]

오늘날 WooCommerce는 혁신적인 유연성과 맞춤 설정 옵션으로 전자상거래 업계를 강타했습니다. 전자상거래 시장에서 높은 순위를 차지하고 있으며, 현재 27%의 시장 점유율을 .

하지만 미리 만들어진 템플릿과 제품 페이지가 모든 비즈니스의 요구를 충족하는 것은 아닙니다. WooCommerce에는 다양한 맞춤 설정 옵션이 있습니다.

쇼핑몰이 좋은 성과를 내려면 최적의 맞춤 설정 방식을 따라야 합니다. 맞춤 설정의 핵심 요소는 제품 페이지와 템플릿에 있습니다. 잘 구현된 맞춤 설정 전략은 장바구니 이탈률을 줄일 수 있습니다.

대부분의 고객이 온라인 스토어를 방문하므로, 성공을 위해서는 제품 및 템플릿을 더 쉽게 탐색하고 맞춤 설정할 수 있도록 해야 합니다.

이 글에서는 WooCommerce 템플릿을 사용자 정의하고, 제품 템플릿을 편집하고, 제품 페이지를 사용자 정의하는 방법을 설명합니다.

내용물

쇼핑몰 운영자가 WooCommerce 템플릿을 맞춤 설정하는 것이 중요한 이유는 무엇일까요?

WooCommerce는 수많은 사용자 지정 옵션을 제공합니다. 결제 페이지부터 상점 페이지, 카테고리 페이지, 감사 페이지 등 모든 것을 사용자 지정할 수 있습니다. 이를 통해 상점을 차별화할 수 있지만, 진정으로 독창적인 상점을 만들려면 WooCommerce 템플릿을 도움이 될 수 있습니다.

경쟁업체와 차별화된 디자인을 갖추려면 사이트의 기본 페이지를 수정하는 것이 필수적입니다. 기본 템플릿을 맞춤 설정하여 비즈니스 경쟁력을 강화할 수도 있습니다.

사용하는 템플릿은 온라인 스토어에 기능과 세부 사항을 추가하도록 맞춤 설정할 수 있습니다. 이러한 기능을 통해 쇼핑객에게 더 나은 고객 경험을 제공할 수 있습니다. 따라서 WooCommerce 템플릿 편집에 대한 심층적인 이해를 바탕으로 전자상거래 스토어를 최신 상태로 유지해야 합니다. WooCommerce 템플릿을 편집하는 방법을 알아보려면 계속 읽어보세요.

읽어보세요 : WooCommerce에서 직불 카드 정보를 업데이트하는 방법은 무엇인가요?

PHP를 사용하여 WooCommerce 템플릿 사용자 정의하기

플러그인과 코드 조각을 사용하면 웹사이트의 거의 모든 부분을 편집할 수 있습니다. WooCommerce를 사용하면 템플릿을 프로그래밍 방식으로 편집할 수 있습니다.

다음은 템플릿을 프로그래밍 방식으로 사용자 지정하는 두 가지 방법입니다

템플릿 덮어쓰기
갈고리로

두 방법 모두 효과가 있으니, 자신에게 더 쉬운 방법을 선택하세요. 각 방법을 언제 사용해야 할지 결정하려면 두 방법의 기본적인 차이점을 이해하는 것이 중요합니다.

훅 vs 템플릿 덮어쓰기

훅을 사용하면 액션과 필터를 통해 간단한 수정을 할 수 있습니다. 템플릿 파일을 덮어쓰면 더욱 복잡한 사용자 정의도 가능합니다.

또한, 특정 템플릿 파일에서 사용되는 후크를 템플릿 파일에 덮어쓰지 않도록 주의하십시오. 템플릿을 덮어쓰면 해당 파일에서 사용된 후크가 교체되어 더 이상 작동하지 않게 됩니다.

필요 사항을 파악한 후, 필요에 맞는 방법을 선택하세요.

살펴보기 : 최고의 WooCommerce 제품 테이블 플러그인

WooCommerce 템플릿을 덮어쓰기를 통해 수정하기

복잡한 사용자 정의를 할 때는 훅을 사용하는 것보다 템플릿을 덮어쓰는 것이 더 좋습니다.

마찬가지로 functions.php 파일을 편집하는 방법도 매우 유사합니다. 테마 파일이 아닌 WooCommerce 템플릿의 주요 파일을 편집해야 합니다.

플러그인 > 플러그인 편집기를 클릭하고 드롭다운 메뉴에서 WooCommerce를 선택한 다음 템플릿을 선택하여 템플릿 파일을 확인하세요.

이 섹션에는 archive-product.php, content-product-cat.php, content-product.php 등 편집해야 할 주요 파일이 모두 포함되어 있습니다. 장바구니, 결제, 이메일 등 여러 위치에 있는 템플릿 파일도 편집할 수 있습니다.

WooCommerce 템플릿 파일에는 변경할 수 있는 요소가 많습니다. 이를 통해 하위 디렉터리와 폴더 모두를 사용자 지정할 수 있습니다.

다음 단계는 맞춤형 WooCommerce 템플릿을 살펴보는 것입니다.

WooCommerce 템플릿에 쇼트코드를 추가하세요.

숏코드는 WooCommerce 코드를 사용자 지정하는 일반적인 방법입니다. WordPress와 WooCommerce는 템플릿 편집을 위해 다양한 숏코드를 제공합니다.

아래 스크립트는 모든 상품 페이지에 WooCommerce 내 계정 대시보드를 표시합니다. single-product.php 파일에 추가하고 업데이트하세요.

만약 ABSPATH가 정의되어 있지 않다면
종료합니다. // 직접 접근 시 종료
}
get_header( 'shop' );
while ( have_posts() ) :
the_post();
wc_get_template_part( 'content,' 'single-product' );
endwhile; // 루프 종료.
do_action( 'woocommerce_sidebar' );
$t= '

내 계정

$t.= do_shortcode(“[woocommerce_my_account]”); $t.=” ”; echo $t; get_footer( 'shop' );

제품 페이지 미리보기를 마치면 대시보드가 나타납니다.

고객이 이전에 이 상품을 구매했다는 사실을 알고 있는지 확인하십시오

WooCommerce 템플릿을 수정하여 단골 고객에게 할인을 제공할 수도 있습니다. 마찬가지로, 코드를 single-product.php 페이지에 복사하여 붙여넣으세요.

get_header( 'shop' );
while ( have_posts() ) :
the_post();
wc_get_template_part( 'content', 'single-product' );
endwhile; // 루프 끝.
$current_user = wp_get_current_user();
if ( wc_customer_bought_product( $current_user->user_email, $current_user->ID, $product->get_id() ) ):
echo '

♥ 안녕하세요 ' . $current_user->first_name . '님, 이전에 구매하신 적이 있습니다. 쿠폰 코드 PURCHASE_AGAIN_21 을 사용하여 다시 구매하세요.

';
endif;
get_footer( 'shop' );

고객은 이미 구매한 상품을 확인한 후에 결제 메시지를 보게 됩니다.

자세히 알아보기 : Magento vs. WooCommerce: 2023년 더 나은 선택은 무엇일까요?

훅을 사용하여 WooCommerce 템플릿 편집하기

WooCommerce 템플릿 파일을 덮어쓰는 것이 꺼려지는 경우, 훅을 사용하면 템플릿을 사용자 정의하는 데 도움이 됩니다. 훅을 액션이나 필터로 웹사이트에 추가하여 기능을 빠르게 확장하고 간단하게 변경할 수 있습니다.

또한 WooCommerce 훅을 통해 스토어 템플릿을 편집할 수 있습니다. 하지만 이 방법은 간단한 사용자 정의에만 권장됩니다. 복잡한 수정의 경우에는 템플릿을 덮어쓰는 것이 더 좋습니다.

외관 > 테마 편집기에서 functions.php 파일을 열고 액션 또는 필터 후크가 포함된 코드 조각을 복사하여 붙여넣으세요.

다음은 WooCommerce 템플릿 편집에 사용할 수 있는 후크의 몇 가지 예입니다.

단일 제품 이미지에 정보 추가하기

이미지 위에 제품에 대한 추가 정보를 표시하려면 functions.php 파일에 다음 코드를 삽입하십시오.

// 사용자 정의 함수 추가
function quadlayers_before_single_product() {
echo '

이번 주 모든 상품 25% 할인!

';
}
// 액션 추가
add_action( 'woocommerce_before_single_product', 'quadlayers_before_single_product', 11 );

개별 제품 페이지에서는 이 메시지가 표시됩니다.

플러그인을 사용하여 WooCommerce 템플릿 사용자 정의하기

코딩이 어려우신가요? 걱정하지 마세요. 플러그인을 사용하면 WooCommerce 템플릿을 얼마든지 맞춤 설정할 수 있습니다. 업계가 성장함에 따라 템플릿을 맞춤 설정할 수 있는 플러그인도 무궁무진하게 출시되고 있습니다.

가장 효율적인 플러그인을 소개합니다: Edit WooCommerce Templates . 이 플러그인은 사용하기 쉬운 무료 플러그인으로, 테마의 템플릿을 맞춤 설정할 수 있게 해줍니다. 몇 번의 클릭만으로 템플릿을 교체하거나 언제든지 기본 설정으로 복원할 수 있습니다.

다음은 템플릿을 사용자 지정하고 스토어 성능을 향상시킬 수 있는 몇 가지 추가 WooCommerce 플러그인입니다.

WooCommerce 사용자 정의 필드 : 이 플러그인을 사용하면 WooCommerce 제품 페이지, 결제 페이지 등에 고유한 필드를 생성할 수 있습니다.
WooCommerce Customizer : WooCommerce 템플릿 전용 플러그인으로, 스토어에 다양한 추가 맞춤 설정 옵션을 제공합니다.
WooCommerce 단일 상품 페이지 사용자 정의 도구 : 이 플러그인을 사용하면 WooCommerce 내 단일 상품 페이지의 모양을 수정할 수 있습니다.

WooCommerce 예약 설정 방법은 무엇 인가요 ?

WooCommerce 상품 페이지 맞춤 설정: 왜 필수적일까요?

WooCommerce 상품 페이지 맞춤 설정은 매우 중요하므로 절대 간과해서는 안 됩니다. WooCommerce 상품 페이지 맞춤 설정을 통해 얻을 수 있는 이점은 무궁무진합니다. 이를 통해 고객의 궁금증을 해소하고, 차별화된 디자인을 구축하며, 고객 만족도를 높일 수 있습니다.

제품 페이지에 맞춤 설정 기능을 활용하면 다음과 같은 중요한 이점을 얻을 수 있습니다

전환율 최적화 페이지

맞춤형 제품 페이지는 전환율을 높일 수 있습니다. 검색 및 필터링 옵션을 포함한 다양한 기능을 구현할 수 있으므로 고객은 더욱 쉽고 간편하게 제품을 찾고 구매할 수 있습니다.

더 매력적으로 만들어 보세요

맞춤 설정의 목표는 대개 고객의 관심을 끌고 매력적으로 보이도록 제품 페이지를 디자인하고 레이아웃하는 것입니다. 매력적인 이미지, 흥미로운 제품 설명, 그리고 미적으로 보기 좋은 요소들을 통해 고객의 관심을 유도할 수 있습니다.

사용자 경험(UX)을 개선할 수 있습니다

디자인 선택이 명확하고 직관적인지, 로딩 속도가 빠른지, 탐색이 쉬운지, 그리고 고객에게 훌륭한 경험을 제공하는지 확인하세요. 이렇게 하면 전환율이 높아지고 재구매 고객을 확보할 수 있습니다.

알아두세요 : 최고의 WooCommerce 제품 추가 기능

제품 페이지를 맞춤 설정하는 방법

스토어의 시각적 매력을 최신 트렌드에 맞추려면 제품 페이지를 맞춤 설정해야 합니다. 제품 페이지를 성공적으로 맞춤 설정하는 세 가지 핵심 방법을 소개합니다

플러그인을 사용하여 WooCommerce 제품 페이지를 향상시키세요

WooCommerce를 사용하면 온라인 상점을 쉽게 만들 수 있습니다. 다양한 플러그인을 활용하여 상품 페이지를 맞춤 설정하는 것을 포함하여 상점을 더욱 향상시킬 수 있습니다.

WooCommerce 플러그인을 사용하여 제품 페이지를 맞춤 설정하는 것은 쉽습니다

플러그인

WooCommerce 제품 추가 기능 : 이 플러그인을 사용하면 제품 페이지에 체크박스, 드롭다운 메뉴, 텍스트 상자를 추가할 수 있습니다.
WooCommerce 360º Image : 이 플러그인을 사용하면 이미지를 원하는 대로 회전할 수 있습니다.
WooCommerce용 제품 비디오 플러그인 : 이 플러그인을 사용하면 제품 비디오를 추가할 수 있습니다.
WooCommerce용 사이즈 차트 : 이 플러그인을 사용하면 제품에 사이즈 차트를 쉽게 추가할 수 있습니다.
제품 추천 : 이 플러그인을 사용하면 제품 페이지에 추천 섹션을 추가할 수 있습니다.

CSS를 사용하여 WooCommerce 제품 페이지 사용자 정의하기

CSS를 사용하여 WooCommerce 제품을 맞춤 설정하면 온라인 스토어를 돋보이게 하고 고객에게 특별한 경험을 제공할 수 있습니다. 제품 페이지를 변경하려면 CSS 코드를 작성하세요.

로그인 후, 외형 → 사용자 정의로 이동하세요.

검정색 CTA를 위한 CSS 코드

추가 CSS에 이 코드를 추가하면 기본 CTA 색상이 검정색으로 변경됩니다.

button.alt, input[type=”button”].alt, input[type=”reset”].alt, input[type=”submit”].alt, .button.alt, .widget-area .widget a.button.alt {
background-color: #1d1a1a;
border-color: #333333;
color: #ffffff;
}

파란색 CTA를 위한 CSS 코드

또한, 검은색을 파란색으로 바꾸려면 다음 CSS 코드를 사용하십시오.

button.alt, input[type=”button”].alt, input[type=”reset”].alt, input[type=”submit”].alt, .button.alt, .widget-area .widget a.button.alt {
background-color: #4f5dd5;
border-color: #333333;
color: #ffffff;
}

WooCommerce 제품 페이지에 사용자 지정 코드를 추가합니다

기술적인 이해도가 높다면 사용자 지정 코드를 통해 제품 페이지 맞춤 설정을 손쉽게 구현할 수 있습니다.

자세히 알아보기 : WooCommerce 쇼핑몰에 FAQ가 필수적인 이유는 무엇일까요?

1단계: 글로벌 템플릿 설정

우선 모든 제품 페이지에 사용할 글로벌 템플릿을 구축해야 합니다.

PHP 주석을 맨 위에 추가하여 템플릿 이름을 명시하세요.

template-custom-product.php 파일을 생성하고 활성화된 테마 폴더에 넣으세요.

<?php /*Template Name: Customize Product*/ ?>

이 템플릿은 WooCommerce의 기본 상품 페이지를 사용합니다. 코드는 다음과 같습니다.

$params = array('posts_per_page' => 5, 'post_type' => 'product');
$wc_query = new WP_Query($params);
?>
have_posts()) : ?>
have_posts()) :
$wc_query->the_post(); ?>

기본적인 템플릿입니다. 기능은 제대로 작동하지만, WooCommerce를 사용하면 더 많은 기능을 활용할 수 있습니다.

WooCommerce는 다양한 정보를 포함하는 제품 표시 페이지를 사용자 지정할 수 있는 여러 기능을 제공합니다

the_permalink() – 제품 URL을 표시합니다.
the_content() – 제품의 전체 설명을 표시합니다.
the_excerpt() – 제품에 대한 간략한 설명을 표시합니다.
the_ID() – 제품 ID를 표시합니다.
the_title() – 제품 이름을 표시합니다.
the_post_thumbnail() – 제품 이미지를 표시합니다.

2단계: 활성화된 테마의 functions.php 파일에 기능을 추가합니다

WooCommerce 제품의 카테고리를 표시합니다

카테고리는 제품을 분류하는 곳입니다. 테마를 활성화하고 functions.php 파일에 다음 코드 조각을 추가하여 제품의 카테고리를 지정하세요.

만약 'ABSPATH'가 정의되어 있지 않다면
종료합니다.
}
전역 변수 $product를 선언합니다.
?>

get_sku() || $product->is_type( 'variable' ) ) ) : ?>
get_sku() ) ? $sku : esc_html__( 'N/A', 'woocommerce' ); ?>

get_id(), ', ', ' ' . _n( '카테고리:', '카테고리들:', count( $product->get_category_ids() ), 'woocommerce' ) . ' ', ' ' ); ?>
get_id(), ', ', ' ' . _n( '태그:', '태그 수:', count( $product->get_tag_ids() ), 'woocommerce' ) . ' ', ' ' ); ?>

제품 카테고리의 미리보기 이미지를 표시합니다

모든 제품 카테고리에 썸네일 이미지가 제공됩니다. 사용자 지정 제품 표시를 설정할 준비가 되면 테마의 template.php 또는 functions.php 파일에 다음 코드를 추가하세요.

function cwresponse_get_thumbnail(){
if(is_page(205)){
$args = array(
'tax_query' => array(
array(
'taxonomy' => 'product_cat',
'field' => 'slug'
)
) )
;
$random_products = get_posts( $args );
foreach ( $random_products as $post ) : setup_postdata( $post );
?>

”>

endforeach;
wp_reset_postdata();
}
}
add_action('wp_footer', 'cwresponse_get_thumbnail');

설명 제목을 삭제하세요.

WooCommerce를 사용하는 경우, 각 제품 탭의 설명 필드 체크를 해제하고 functions.php 파일을 수정하여 다음 코드를 추가하면 됩니다.

add_filter( 'woocommerce_product_description_heading', '__return_null' );

제품 제목을 삭제하세요

WooCommerce 단일 상품 탭에서 제목을 제거하는 방법은 다음과 같습니다. functions.php 파일에 다음 코드를 추가하세요.

remove_action( 'woocommerce_single_product_summary',
'woocommerce_template_single_title' );

3단계: WooCommerce 템플릿 변경

아래 코드를 content-single-product.php 파일이나 woocommerce/templates 아래의 single product 디렉토리에 넣으세요. functions.php 파일을 사용하는 것이 더 좋습니다.

<div class="images"><?php if ( has_post_thumbnail() ) { $image_caption = get_post( get_post_thumbnail_id() )-> post_excerpt; $image_link = wp_get_attachment_url( get_post_thumbnail_id() ); $image = get_the_post_thumbnail( $post->ID, apply_filters( 'single_product_large_thumbnail_size', 'shop_single' ), array( 'title' => get_the_title( get_post_thumbnail_id() ) ) ); $attachment_count = count( $product->get_gallery_attachment_ids() ); if ( $attachment_count > 0 ) { $gallery = '[product-gallery]'; } else { $gallery = ''; } echo apply_filters( 'woocommerce_single_product_image_html', sprintf( ' <a href="%s" itemprop="image" class="woocommerce-main-image zoom" title="%에스" data-rel="prettyPhoto' . $gallery . '">%s</a> ', $image_link, $image_caption, $image ), $post->ID ); } else { echo apply_filters( 'woocommerce_single_product_image_html', sprintf( '<img src="%s" alt="%에스" /> ', wc_placeholder_img_src(), __( '플레이스홀더', 'woocommerce' ) ), $post->ID ); } ?><?php do_action( 'woocommerce_product_thumbnails' ); ?></div>

또는 CSS 코드를 직접 작성할 수도 있습니다.

.images { float: right! important; }

드디어! 끝났습니다.

더 알아보기: WooCommerce에 배송 기능을 추가하는 방법은 무엇인가요?

결론

독창적이고 시각적으로 매력적인 WooCommerce 제품 페이지 및 템플릿을 제작하면 고객의 쇼핑 경험이 향상됩니다.

오버라이드, 훅, 필터 및 CSS 사용자 정의를 활용하면 고객의 기대에 부응하고 브랜드 정체성에 부합하도록 제품 페이지를 맞춤 설정할 수 있습니다.

WooCommerce 기반 온라인 스토어의 모바일 반응성을 최적화하고 맞춤 설정하여 전반적인 사용자 경험을 향상시키세요. 지금 바로 맞춤 설정 기능을 구현하여 스토어의 가치를 극대화하십시오.

WooCommerce 맞춤 설정에 대한 전문가의 도움이 필요하신가요? 문의하세요 !

Seahawk로 시작하세요

저희 앱에 가입하시면 가격 정보를 확인하고 할인 혜택을 받으실 수 있습니다.

WooCommerce 템플릿 및 제품 페이지 맞춤 설정

쇼핑몰 운영자가 WooCommerce 템플릿을 맞춤 설정하는 것이 중요한 이유는 무엇일까요?