표준화된 제품 페이지는 오류가 발생하지 않을 수 있지만, 치열한 시장 경쟁 속에서 당신의 상품을 돋보이게 하는 데는 한계가 있습니다. WooCommerce의 사용자 정의 제품 템플릿을 활용하면 페이지 레이아웃, 정보 표시 순서, 사용자 경험의 흐름을 완전히 제어할 수 있어 방문자가 구매를 완료하도록 유도하고 전환율을 크게 향상시킬 수 있습니다. 이 튜토리얼에서는 템플릿 구조를 이해하는 것부터 실제 개발, 그리고 고급 최적화 기술에 이르기까지, 안전하고 효율적으로 사용자 정의 템플릿을 만드는 방법을 단계별로 안내해 드립니다.
WooCommerce 템플릿 시스템의 파싱 과정
수정을 시작하기 전에 WooCommerce의 템플릿 계층 구조를 이해하는 것이 매우 중요합니다. 이를 통해 사용자 정의한 내용이 효과적이면서도 유지보수가 용이하도록 할 수 있습니다.
WooCommerce는 템플릿 계층 구조(Template Hierarchy)를 기반으로 하는 템플릿 시스템을 사용합니다. 상점 페이지를 렌더링할 때, WooCommerce는 특정 순서에 따라 템플릿 파일을 찾습니다. 핵심적인 검색 경로는 다음과 같습니다:你的主题目录 -> 插件的模板目录。
추천 읽기 WooCommerce 고객 메타데이터란 무엇이며, 왜 이를 관리해야 할까요?。
더 구체적으로 말하자면, WooCommerce는 먼저 현재 사용 중인 테마 폴더 내에 ‘woocommerce-config.php’라는 파일이 있는지를 검색합니다. woocommerce 해당 주제의 하위 디렉터리입니다. 해당 주제에 해당하는 템플릿 파일이 존재하지 않을 경우, 플러그인에 내장된 템플릿 파일로 자동으로 전환됩니다(플러그인의 템플릿 파일은 …에 위치해 있습니다). wp-content/plugins/woocommerce/templates/이 메커니즘을 통해 테마 내에 해당 파일을 생성함으로써 기본 템플릿을 안전하게 덮어쓸 수 있으며, 플러그인의 핵심 파일을 수정할 필요가 없습니다. 이로써 플러그인이 업데이트되더라도 사용자 정의한 콘텐츠가 손실되지 않도록 보장됩니다.
핵심 템플릿 파일의 위치 확인
제품 상세 페이지에 있어서 가장 핵심적인 템플릿 파일은… single-product.php이 파일은 전체 제품 페이지의 기본 구조를 제어합니다. 파일 내부에서는 일반적으로 다음과 같은 방식으로 구성이 이루어집니다: wc_get_template_part() 이 함수는 제품 이미지, 제목, 가격, 요약, 속성, 탭, 양식 등과 같은 더 세부적인 정보를 포함하는 템플릿 부분들을 로드합니다.
주로 주목해야 할 템플릿 파일들은 일반적으로 테마의 해당 위치에 있습니다. woocommerce 자식 디렉터리에서 복사하거나 플러그인 템플릿 디렉터리에서 직접 복사할 수 있습니다. 예를 들어, 제품 이미지 영역은… single-product/product-image.php 제어는… 그리고 쇼핑카트 양식에 추가하는 작업은… single-product/add-to-cart.php 관리. 이 구조를 이해하면, 페이지의 모든 부분을 정확히 찾아서 수정할 수 있습니다.
커스텀 제품 템플릿을 만드는 세 가지 방법
귀하의 기술적 능력과 맞춤화 요구에 따라, 다양한 수준의 복잡성을 가진 방법들을 선택하여 사용자 정의 템플릿을 구현할 수 있습니다.
서브테마를 사용하여 보안 기능을 확장/개선합니다.
이것이 가장 추천되고 안전한 방법입니다. 자식 테마(Child Theme)를 생성한 다음, 해당 자식 테마 폴더 내에 WooCommerce 템플릿의 계층 구조와 일치하는 디렉터리 구조를 설정하세요.
예를 들어, 제품의 메인 템플릿을 덮어쓰려면 하위 테마(sub-theme) 내에서 해당 경로(path)를 생성해야 합니다.your-child-theme/woocommerce/single-product.php그런 다음 플러그인 내의 원본 파일을… single-product.php 파일 내용을 복사한 다음, 그 기반 위에서 수정을 가하세요. 이렇게 하면 상위 테마가 업데이트되더라도 귀하가 직접 수정한 WooCommerce 설정 부분은 그대로 유지됩니다.
추천 읽기 처음부터 시작하기: 다목적 워드프레스 블로그 실습하기。
페이지 빌더 플러그인을 사용하여 구현합니다.
코드에 익숙하지 않다면 Elementor Pro, Divi Builder, WPBakery와 같은 고급 페이지 빌더를 사용할 수 있습니다. 이러한 도구들은 대부분 WooCommerce 제품 템플릿을 시각적으로 편집할 수 있는 기능을 제공합니다. 도구 내에서 제목, 갤러리, 가격, 양식과 같은 컴포넌트를 직접 드래그앤드드롭으로 배치하고 스타일을 설정한 후, 모든 제품이나 특정 제품 카테고리에 적용할 수 있습니다. 이 방법은 빠르고 직관적이지만, 특정 플러그인에 의존할 수 있으며 페이지 로딩 시간이 증가할 수도 있습니다.
커스텀 템플릿 파일을 작성하고 해당 파일을 적절한 위치에 배치하세요.
더 복잡하거나 독특한 레이아웃의 경우, 새로운, 독립적인 템플릿 파일을 만들 수 있습니다. 테마 폴더 내에 새로운 파일을 생성하세요. 예를 들어, `my_custom_layout_template.html`과 같은 이름으로 파일을 만들 수 있습니다. single-product-custom.php이 파일의 맨 위에는 파일의 이름을 명시하는 특정 템플릿 헤더 주석을 추가해야 합니다.
<?php
/**
* Template Name: 自定义产品布局
* Template Post Type: product
*/
get_header(); // 调用主题头部
?>
// ... 你的自定义HTML和PHP代码 ...
<?php get_footer(); // 调用主题底部 ?>제작이 완료되면, WordPress 관리자 페이지에서 개별 제품을 편집할 때 “페이지 속성” 또는 “템플릿” 드롭다운 메뉴에서 방금 생성한 “커스텀 제품 레이아웃”을 찾아서 선택할 수 있습니다.
실전: 사용자 정의 제품 페이지 레이아웃 예시
구체적인 사례를 통해 배워보겠습니다: 제품 페이지의 요소들을 어떻게 재배열할 수 있을지, 그리고 “장바구니에 추가” 버튼을 제품 이미지 옆으로 옮겨 구매를 유도하는 메시지를 더 강조할 수 있을지 살펴보겠습니다.
먼저, 당신의 서브테마에서… woocommerce 디렉터리 내에 파일을 생성하거나 복사합니다. single-product.php우리는 이 파일의 논리를 재구성해야 합니다.
원본 템플릿은 일반적으로 각 부분을 순서대로 로드합니다. 우리가 해야 할 일은 이러한 부분들의 호출 순서를 재조정하는 것입니다. 다음은 두 열 구조를 만드는 방법을 보여주는 간단한 예제 코드입니다:
// 文件路径：your-child-theme/woocommerce/single-product.php
while ( have_posts() ) : the_post(); ?>
<div id="product-<?php the_ID(); ?>" no numeric noise key 1007>
<div class="custom-product-container">
<!-- 左栏：主要放图片和摘要 -->
<div class="product-left-column">
<?php
// 输出产品图片
do_action( 'woocommerce_before_single_product_summary' );
?>
</div>
<!-- 右栏：主要放标题、价格、表单和元信息 -->
<div class="product-right-column">
<?php
// 输出产品摘要内容，但我们需要调整内部顺序
?>
<div class="summary entry-summary">
<?php
// 1. 先输出标题
woocommerce_template_single_title();
// 2. 立即输出价格
woocommerce_template_single_price();
// 3. 紧接着输出“添加到购物车”表单
woocommerce_template_single_add_to_cart();
// 4. 再输出摘要描述
woocommerce_template_single_excerpt();
// 5. 输出元信息（如SKU、分类）
woocommerce_template_single_meta();
?>
</div>
</div>
</div>
<div class="product-full-width">
<?php
// 产品详情选项卡（描述、额外信息、评论）仍放在底部全宽显示
do_action( 'woocommerce_after_single_product_summary' );
?>
</div>
</div>
<?php endwhile; // end of the loop. ?>다음으로, 두 개의 칼럼으로 구성된 레이아웃을 만들기 위해 적절한 CSS를 추가해야 합니다. 아래의 CSS를 하위 테마에 추가하세요. style.css 파일 내에:
.custom-product-container {
display: flex;
flex-wrap: wrap;
gap: 40px;
margin-bottom: 60px;
}
.product-left-column {
flex: 1;
min-width: 300px;
}
.product-right-column {
flex: 1;
min-width: 300px;
}
.product-full-width {
flex-basis: 100%;
}
.summary entry-summary .cart {
margin: 25px 0; /* 给购物车表单增加上下边距 */
}고급 최적화 기술 및 모범 사례
기본적인 레이아웃 조정은 단지 시작에 불과합니다. 다음과 같은 팁들을 활용하면 페이지의 전환율(즉, 사용자가 원하는 행동을 취하는 비율)을 더욱 향상시킬 수 있습니다.
액션 훅을 사용하여 콘텐츠를 추가하거나 삭제합니다.
WooCommerce 템플릿에는 많은 액션 후크(Action Hooks)가 포함되어 있어, 템플릿 파일을 직접 수정하지 않고도 특정 위치에 콘텐츠를 추가하거나 삭제할 수 있습니다. 예를 들어, 제품 가격 아래에 “재고 부족”이라는 표시를 추가하고 싶다면, 서브테마(subtheme)에서 이를 구현할 수 있습니다. functions.php 중에 다음을 추가하세요:
add_action( 'woocommerce_single_product_summary', 'custom_stock_notice', 15 );
function custom_stock_notice() {
global $product;
if ( $product->get_stock_quantity() \nget_stock_quantity() > 0 ) {
echo '<p class="low-stock" style="color:#d33;">🔥 库存紧张，仅剩 '. $product->get_stock_quantity() .' 件！</p>';
}
}여기,woocommerce_single_product_summary 그건 후크의 이름입니다.15 이는 우선순위를 나타내는 값입니다(숫자가 작을수록 더 빨리 실행됩니다). 출력 위치를 제어하는 데 사용됩니다.
서로 다른 제품 유형에 맞는 템플릿을 적용하세요.
WooCommerce의 조건부 논리를 활용하면 간단하거나 가변적이거나 그룹화된 외부/관련 제품과 같은 다양한 유형의 제품에 대해 차별화된 표시를 제공할 수 있습니다. 예를 들어, 사용자 정의된 설정을 통해… single-product.php 중에서는 이렇게 판단할 수 있습니다:
global $product;
if ( $product->is_type( 'variable' ) ) {
// 加载为可变产品优化的模板部分
wc_get_template_part( 'single-product/add-to-cart', 'variable' );
} else if ( $product->is_type( 'grouped' ) ) {
// 加载为分组产品优化的模板部分
wc_get_template_part( 'single-product/add-to-cart', 'grouped' );
} else {
// 加载简单产品的默认表单
wc_get_template_part( 'single-product/add-to-cart', 'simple' );
}모바일 기기에서도 반응형(responsive) 사용자 경험을 보장해야 합니다.
커스텀 레이아웃을 만들 때는 반드시 모바일 기기에서의 뷰를 테스트해야 합니다. 위 예제에서 사용된 Flexbox 레이아웃은 기본적으로 좋은 반응성을 가지고 있습니다. 화면의 너비가 좁아질 때(예: 모바일 기기에서) 두 개의 칼럼을 하나의 칼럼으로 스택하고 싶을 수 있습니다. 이를 위해 미디어 쿼리(media query)를 사용할 수 있습니다.
@media (max-width: 768px) {
.custom-product-container {
flex-direction: column;
gap: 20px;
}
}요약
WooCommerce 제품 페이지 템플릿을 사용자 정의하는 것은 표준화에서 개성화로, 단순한 정보 표시에서 구매 유도로 나아가는 데 있어 중요한 단계입니다. WooCommerce의 템플릿 구조를 이해하고 서브테마를 활용한 안전한 수정 전략을 적용함으로써 페이지 요소들을 자유롭게 재배열하여 중요한 정보와 구매 유도 메시지를 강조할 수 있습니다. 간단한 훅 함수를 사용해 팁을 추가하거나 템플릿 파일을 완전히 재작성하여 독특한 레이아웃을 만드는 것 모두, 사용자의 결정 과정을 줄이고 구매 프로세스를 원활하게 진행할 수 있도록 하는 것을 목표로 합니다. 모든 수정 사항을 적용한 후에는 반드시 다양한 기기와 브라우저에서 테스트를 수행하고, 데이터 분석 도구(예: 핫스팟 맵)를 활용하여 변경 사항의 실제 효과를 확인하며 제품 페이지를 지속적으로 최적화해야 합니다.
자주 묻는 질문
커스텀 템플릿을 설정한 후에 WooCommerce 플러그인을 업데이트하면 제가 한 수정 사항들이 모두 덮어쓰여질까요?
아니요, 그건 당신이 올바른 방법을 사용했다는 전제하에 가능합니다. 만약 당신이 (하위) 주제에서 해당 작업을 수행했다면… woocommerce 디렉터리 내에 복사본 파일을 생성하여 기본 템플릿을 덮어쓰면, WooCommerce 플러그인의 업데이트가 사용자 정의 파일에 전혀 영향을 미치지 않습니다. 이는 WooCommerce가 템플릿을 로드할 때 테마 내에 있는 버전을 우선적으로 사용하기 때문입니다. 이것이 가장 안전한 방법입니다.
어떻게 특정 제품 카테고리에만 사용자 정의 템플릿을 적용할 수 있을까요?
이를 위해서는 추가적인 코드 로직이 필요합니다. 한 가지 방법은 사용자 정의 템플릿 파일(예:…)에 해당 기능을 구현하는 것입니다. single-product.php조건 판단을 사용하여 처리합니다. 먼저, 현재 제품의 카테고리를 가져온 다음, 그 결과에 따라 다른 템플릿 부분을 포함시킵니다. 예를 들어:if ( has_term( 't-shirts', 'product_cat' ) ) { ... }또 다른 더 유연한 방법은 “커스텀 템플릿 할당” 기능을 사용하여 여러 템플릿 파일을 생성한 다음, 제3자 플러그인이나 커스텀 필드를 통해 다양한 카테고리의 제품에 맞는 템플릿을 선택하는 것입니다.
템플릿을 수정했지만 프론트엔드에 변화가 없습니다. 어떻게 문제를 조사해야 할까요?
다음 단계에 따라 확인해 주세요: 먼저, 수정하려는 파일이 올바른 파일인지 확인하고, 해당 파일이 활동(하위) 테마의 올바른 경로에 위치해 있는지 확인하십시오(예: your-theme/woocommerce/single-product.php둘째, WordPress와 브라우저의 캐시를 삭제하세요. 때때로 오래된 캐시 파일이 새로운 코드의 로딩에 영향을 미칠 수 있습니다. 그런 다음, 다른 플러그인(특히 캐싱이나 최적화 기능을 하는 플러그인)이나 테마 기능이 여러분이 변경한 내용을 덮어쓰지 않았는지 확인해 보세요. 마지막으로, 브라우저의 개발자 도구(F12)를 열어 콘솔에 JavaScript 오류가 있는지 확인하거나, 추가한 CSS 선언자가 올바르게 적용되었는지 검토해 보세요.
제품 페이지에 사용자 정의 필드를 사용하여 추가 정보 표시 영역을 추가할 수 있을까요?
물론 가능합니다. 이는 매우 흔한 요구사항입니다. 먼저, “Advanced Custom Fields’와 같은 플러그인을 사용하거나 코드를 통해 ”제품“ 문서 유형에 ”제품의 특장점’과 같은 사용자 정의 필드를 생성해야 합니다. 그런 다음, 사용자 정의된 제품 템플릿에서 해당 정보를 표시하고자 하는 위치(예: 제품 요약 뒤, 탭들 앞)에 해당 필드의 내용을 출력하도록 코드를 작성하면 됩니다. echo get_field('product_highlights'); 해당 필드의 값을 출력하기 위한 코드를 사용하면, 템플릿 내에서 백엔드에서 편집된 추가 정보를 동적으로 표시할 수 있습니다.
다음 단계는 무엇인가요?
확장된 독서 및 실무 지식
다음은 이 도움말의 주제와 관련이 있으며 더 깊이 있게 읽기에 적합합니다. 현재 문제와 가장 가까운 문서부터 시작하여 점차 주변 주제로 확장하는 것이 우선순위를 정하는 것이 좋습니다.
한국어