WooCommerce 제품 페이지 템플릿을 사용자 정의하는 방법

게시 됨: 2021-12-02

제품 페이지 템플릿을 편집할 방법을 찾고 계십니까? 우리는 당신을 덮었습니다. 이 가이드에서는 WooCommerce 제품 페이지 템플릿을 사용자 지정하는 다양한 방법을 배웁니다.

WooCommerce에는 많은 사용자 정의 옵션이 포함되어 있습니다. 가장 흥미로운 옵션 중 하나는 전자 상거래 상점 의 기본 템플릿을 편집할 수 있다는 것입니다. 그리고 하나 이상의 방법으로 사용자 정의할 수 있다는 사실이 훨씬 더 인상적입니다.

제품 페이지 템플릿을 사용자 정의하여 기대할 수 있는 몇 가지 이점을 살펴보겠습니다.

제품 페이지 템플릿 편집의 이점

제품 페이지 템플릿을 편집하면 웹사이트 소유자와 고객 모두의 경험이 향상됩니다. 기본 WooCommerce 제품 페이지 템플릿은 대부분의 사이트에 적합합니다. 쇼핑객이 필요로 하는 제품에 대한 모든 필요한 정보를 제공합니다. 그러나 고유한 제품 페이지가 있으면 경쟁업체와 차별화할 수 있는 귀중한 이점을 얻을 수 있습니다 .

기본 템플릿에 적절한 제품 정보가 있더라도 좋은 첫인상을 남기면 매출을 높이는 데 도움이 됩니다. 이를 위해 일부 세부 정보를 추가하거나 제거할 수 있습니다. 또한 판매하는 제품 또는 서비스의 유형, 고객의 요구 또는 지속적인 추세에 따라 제품 페이지의 일부 요소를 변경해야 할 수도 있습니다. 예를 들어 할인, 제안 및 연간 판매에 대한 정보를 표시하고 정기적으로 업데이트하여 더 많은 방문자를 유치할 수 있습니다.

또한 웹 사이트를 독특하게 만들고 쇼핑객에게 인상을 주기 위해 적용할 수 있는 색상, 레이아웃 및 서체 변경 사항이 있습니다.

다음은 제품 페이지 템플릿에 적용할 수 있는 가장 일반적인 변경 사항이지만 더 많은 작업을 수행할 수 있습니다. WooCommerce에서 제품 페이지 템플릿을 편집하는 다양한 방법을 살펴보겠습니다.

WooCommerce 제품 페이지 템플릿을 사용자 정의하는 방법

WooCommerce 제품 페이지 템플릿을 편집하는 방법에는 여러 가지 가 있습니다.

  1. 프로그래밍 방식으로
  2. 페이지 빌더와 함께
  3. 플러그인 사용

시작하기 전에 기억해 주셨으면 하는 몇 가지 사항이 있습니다.

  • WooCommerce를 올바르게 설정했는지 확인하고 문제를 피하기 위한 단계를 놓치지 마십시오.
  • 웹사이트에 대한 민감한 정보가 포함된 일부 테마 파일을 수정하므로 계속하기 전에 WordPress 웹사이트를 백업하고 하위 테마 또는 이러한 하위 테마 플러그인 중 하나를 생성하는 것이 좋습니다.
  • 이 데모에서는 Divi 테마를 사용합니다. 테마 파일은 테마에 따라 웹사이트에서 다를 수 있지만 문제 없이 모든 단계를 따를 수 있어야 합니다.
  • > 웹사이트에서 호환되는 WooCommerce 테마 중 하나를 사용하고 있는지 확인하십시오.

이제 더 이상 고민하지 않고 제품 페이지 템플릿을 편집하는 방법으로 넘어 갑시다.

1) 프로그래밍 방식으로 WooCommerce 제품 페이지 템플릿 사용자 지정

이 방법은 제품 페이지 템플릿을 간단하게 조정하려는 경우 적극 권장됩니다. 코드로 쉽게 편집할 수 있지만 이 접근 방식을 사용하는 경우 기본 프로그래밍 지식 이 있으면 더 좋습니다.

여기서는 주로 WooCommerce 후크를 사용하므로 익숙하지 않은 경우 WooCommerce 후크 사용 방법에 대한 가이드를 참조하세요. 후크를 사용하면 모든 유형의 WooCommerce 템플릿을 사용자 지정할 수 있으므로 매우 유용합니다.

제품 페이지 템플릿을 편집하기 위해 수행할 수 있는 작업의 몇 가지 예를 살펴보겠습니다.

1.1) 제품 페이지에서 요소 제거

제품 페이지에서 요소를 제거 하려면 후크를 사용하는 아래 스니펫 중 하나를 사용하여 원하는 요소를 삭제하거나 숨길 수 있습니다. 올바른 것을 선택하고 웹사이트 테마 파일에 코드를 추가하기만 하면 됩니다.

WooCommerce 플러그인 템플릿 파일의 content-single-product.php 파일 주석에서 사용 가능한 모든 후크를 찾을 수 있습니다. 또는 이 페이지를 참조할 수 있습니다.

다음은 제품 페이지에서 요소를 제거하는 데 사용할 수 있는 스니펫의 몇 ​​가지 예입니다.

 // 제목 제거
remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_title', 5 );
// 평점 별 제거
remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_rating', 10 );
// 제품 메타 제거 
remove_action( 'woocommerce_single_product_summary','woocommerce_template_single_meta',40 );
// 설명 제거
remove_action( 'woocommerce_single_product_summary','woocommerce_template_single_excerpt',20 );
// 이미지 제거
remove_action( 'woocommerce_before_single_product_summary', 'woocommerce_show_product_images',20 );
// 관련 제품 제거
remove_action( 'woocommerce_after_single_product_summary','woocommerce_output_related_products',20);
// 추가 정보 탭 제거
remove_action('woocommerce_after_single_product_summary','woocommerce_output_product_data_tabs',10);

원하는 요소를 삭제할 수 있는 후크를 찾은 후 WordPress 대시보드에서 모양 > 테마 편집기 로 이동하여 functions.php 파일을 엽니다. 그런 다음 파일 하단에 remove_action 함수를 사용하여 원하는 코드 조각을 추가합니다.

예를 들어 제품 페이지 제목을 제거하려면 다음 스니펫을 붙여넣습니다. 

 그런 다음 파일 업데이트 를 누르고 프런트 엔드에서 사이트를 확인하십시오. 제품 페이지에서 제목이 제거된 것을 볼 수 있습니다.
 1.2) 새 요소 추가
 또한 후크를 사용하여 WooCommerce 페이지 템플릿을 사용자 지정하고 새 요소를 추가할 수 있습니다. 요소를 포함하려면 필요한 후크와 함께 add_action 함수를 사용해야 합니다.
 예를 들어, 제품 페이지에 일부 텍스트를 추가하려면 다음 스니펫을 하위 테마 파일의 functions.php 에 붙여넣을 수 있습니다.
		


 add_action('woocommerce_before_single_product_summary',function(){
  printf('<h4><a href="?added-content">축하합니다. 방금 링크를 추가했습니다!</a></h4>');
}
);
 그러면 제품 페이지에 새 콘텐츠가 추가됩니다. 위의 코드를 조정하기만 하면 텍스트와 크기를 변경하여 제품 페이지에 원하는 요소를 추가할 수 있습니다. 
요소 추가 woocommerce 제품 페이지 템플릿 사용자 정의
 1.3) 요소 재정렬
 또 다른 옵션은 일부 요소를 재정렬하여 WooCommerce 제품 페이지 템플릿을 사용자 정의하는 것입니다. 요소를 제거하고 추가하는 것과 유사하게 하위 테마의 function.php 파일에 코드 조각을 추가해야 합니다.
		


 요소를 재정렬하려면 먼저 제품 페이지 템플릿에서 후크를 제거한 다음 다른 위치에 다시 후크를 추가해야 합니다. 이전 단계에서 사용한 코드 조각의 조합입니다.
 아래 주어진 예에서 스크립트는 위치 순서를 변경하여 제목 바로 아래에 제품 설명을 이동합니다.
 // 설명 순서 변경
remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_excerpt', 20 );
add_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_excerpt', 6 );
 마찬가지로 필요한 후크를 사용하여 제품 페이지 템플릿의 요소를 재정렬할 수 있습니다. 올바른 위치 주문을 입력했는지 확인하십시오.
		


 이에 대한 더 많은 예를 보려면 프로그래밍 방식으로 WooCommerce 제품 페이지를 편집하는 방법에 대한 가이드를 살펴보세요.
 2) 페이지 빌더로 WooCommerce 제품 페이지 템플릿 편집
 페이지 빌더는 웹 사이트를 쉽게 만들고 사용자 지정하는 프로세스를 만드는 훌륭한 도구입니다. 제품 페이지 템플릿도 마찬가지입니다. 프로그래밍 기술이 없는 경우 몇 번의 클릭으로 페이지 빌더를 사용하여 WooCommerce 제품 페이지 템플릿을 사용자 정의할 수 있습니다.
 또한 페이지 빌더를 사용하면 변경 사항이 있는 제품 페이지의 템플릿을 저장할 수도 있습니다. 그리고 대부분의 페이지 빌더는 템플릿을 편집할 수 있는 끌어서 놓기 편집기 를 제공하므로 많은 시간을 절약할 수 있습니다.
		


 워드프레스에는 많은 페이지 빌더가 있습니다. 이 튜토리얼에서는 Divi Builder 가 최고의 페이지 빌더 중 하나이며 테마인 Divi와 잘 작동하기 때문에 사용합니다. 
 사용을 시작하려면 Divi를 다운로드한 다음 웹사이트에 Divi Builder를 설치해야 합니다. 그런 다음 템플릿 편집을 시작할 준비가 된 것입니다.
 2.1) 비주얼 편집기 열기
 제품 페이지 템플릿을 편집하는 첫 번째 단계는 제품 페이지 중 하나를 열고 관리 표시줄에서 " Visual Builder 사용 " 옵션을 클릭하는 것입니다. 제품 페이지 템플릿을 사용자 지정할 수 있는 Divi Visual Editor 로 리디렉션됩니다.
		


 이 옵션이 표시되지 않으면 동일한 브라우저 창에서 WordPress 대시보드에 로그인했는지 확인하십시오. 
 2.2) 비주얼 편집기로 템플릿 사용자 정의
 비주얼 편집기의 도움으로 제품 페이지의 거의 모든 요소를 ​​사용자 정의할 수 있습니다. 편집하려는 기존 요소를 클릭하기만 하면 됩니다.
 예를 들어 제품 설명 배경색을 사용자 지정하려고 한다고 가정해 보겠습니다. 제품 설명을 누르고 설정 아이콘을 클릭하여 설명 설정을 엽니다. 
모듈 설정 아이콘 우커머스 제품 페이지 템플릿 사용자 정의
 그런 다음 배경 으로 이동하여 제품 설명에 설정할 색상을 선택합니다. 라이브 미리보기에서 배경색이 즉시 변경되는 것을 볼 수 있습니다. 색상이 마음에 들면 변경 사항을 저장하는 것을 잊지 마십시오. 
 색상 변경 외에도 제품 페이지 템플릿에 더 많은 모듈을 추가하고 싶다고 가정해 보겠습니다. 모듈을 추가하려는 영역의 " + " 기호를 클릭하고 행 유형을 선택한 다음 원하는 모듈을 선택하기만 하면 됩니다.
 특정 항목을 추가하려면 검색 필드에 입력하여 특정 모듈을 검색할 수 있습니다. 그런 다음 모듈 설정에서 옵션을 구성하고 변경 사항을 저장하기만 하면 됩니다.
 예를 들어 크리스마스 세일을 시작하기 위해 카운트다운 타이머 모듈을 추가한다고 가정해 보겠습니다. + 기호를 누르고 카운트다운 타이머 키워드를 검색합니다. 카운트 다운 타이머 woocommerce 제품 페이지 템플릿 사용자 정의
 그런 다음 모듈 설정에서 텍스트, 시간, 날짜와 같은 필요한 정보를 카운트다운에 추가합니다. 
카운트 다운 타이머 데모 woocommerce 제품 페이지 템플릿 사용자 정의
 변경 사항을 만들 때 미리 보기에서 실시간으로 변경 사항을 볼 수 있습니다. 만족스러우면 화면 하단에 있는 3개의 가로 점을 확장하여 제품 페이지 템플릿을 저장 합니다.
 Divi Builder로 제품 페이지 템플릿을 사용자 정의하는 빠른 팁
 온라인 상점에서 판매하는 제품 유형에 따라 다른 제품 페이지 템플릿을 가질 수도 있습니다. WordPress 대시보드에서 Divi > Divi Builder 로 이동하여 새 템플릿 추가 를 클릭하기만 하면 됩니다. 
 제품 섹션까지 아래로 스크롤하면 특정 제품 페이지 에 대한 템플릿을 만들 수 있음을 알 수 있습니다. 카테고리, 태그 또는 특정 제품에 따라 다를 수 있습니다. 원하는 옵션을 선택하고 템플릿 만들기를 누르기만 하면 됩니다. 
 그런 다음 방금 만든 제품 페이지 템플릿 에 Custom Body를 추가 해야 합니다. 처음부터 새로 만들거나 라이브러리의 템플릿 중 하나를 사용할 수 있습니다. 무엇을 선택하든 Visual Editor를 다시 한 번 사용하여 WooCommerce 제품 페이지 템플릿을 사용자 지정해야 합니다.
 Divi Builder를 사용하는 방법에 대해 더 알고 싶다면 Divi에서 WooCommerce 제품 페이지를 사용자 정의하는 방법에 대한 자세한 가이드를 확인하십시오.
 또는 다른 페이지 빌더를 사용하여 제품 페이지 템플릿을 편집할 수 있습니다. Elementor를 사용하는 경우 자습서를 확인하여 Elementor의 WooCommerce 제품 페이지를 사용자 지정하여 자세한 내용을 확인할 수 있습니다.
 3) 플러그인을 사용하여 WooCommerce 제품 페이지 템플릿 사용자 정의
 WooCommerce 제품 페이지 템플릿을 매우 구체적으로 변경 하려면 플러그인을 사용할 수 있습니다. Elementor와 같은 일부 페이지 빌더는 플러그인으로도 사용할 수 있지만 매우 구체적인 기능에 사용할 수 있는 다른 전용 도구가 있습니다.
 이러한 플러그인 중 하나는 WooCommerce용 Direct Checkout입니다 . 이 도구는 WooCommerce에서 결제 프로세스를 단순화하도록 설계되었습니다. 이 플러그인을 사용하면 장바구니에 제품을 추가한 후 제품 페이지에서 고객을 직접 결제 페이지로 리디렉션할 수 있습니다. 이렇게 하면 구매 프로세스를 단축하고 전환율을 높일 수 있습니다.
 대체로 이것은 상점에서 제품 페이지 템플릿의 버튼을 편집하는 훌륭한 도구입니다.
 Direct Checkout을 사용하여 제품 페이지 템플릿을 편집하는 단계를 살펴보겠습니다.
 3.1) 플러그인 설치 및 활성화
 먼저 플러그인을 설치하고 활성화해야 합니다. 여기에서 무료 버전을 다운로드하거나 더 많은 기능을 포함하고 미화 19달러(일회성 결제)부터 시작하는 프리미엄 플랜 중 하나를 다운로드할 수 있습니다.
 또는 WordPress 대시보드에서 플러그인 > 새로 추가 로 이동하여 플러그인을 검색하여 설치할 수 있습니다. 
 플러그인을 설치하고 활성화한 후 설정해야 합니다.
 3.2) 직접 결제 옵션 구성
 WooCommerce > Direct Checkout 으로 이동하여 일반 탭을 엽니다. 
 그런 다음 다음 옵션을 설정합니다.
  •  장바구니 리디렉션에 추가됨: 예
  •  장바구니에 추가됨: 체크아웃
 마지막으로 변경 사항을 저장하고 온라인 상점에서 제품 페이지를 미리 봅니다. 이제 제품에서 구매 버튼을 클릭하면 바로 결제 페이지로 리디렉션됩니다.
 원 클릭 구매 버튼을 추가하는 방법에 대한 자세한 내용은 WooCommerce에서 빠른 구매 버튼을 추가하는 방법에 대한 가이드를 확인하세요.
 요약하면 제품 페이지 템플릿을 사용자 지정하는 것은 제품 페이지를 편집하는 것과 유사합니다. 제품 페이지 템플릿을 최대한 활용하기 위한 자세한 정보와 아이디어는 WooCommerce 제품 페이지를 사용자 지정하는 자습서를 참조하세요.
 보너스: CSS로 WooCommerce 제품 페이지 템플릿 편집
 지금까지 페이지 빌더와 전용 플러그인을 사용하여 프로그래밍 방식으로 WooCommerce 제품 페이지를 사용자 정의하는 방법을 살펴보았습니다. 하지만 당신이 할 수 있는 또 다른 일이 있습니다. 약간의 CSS로 템플릿을 편집할 수도 있습니다. 이것은 제품 페이지에서 작은 디자인을 변경하는 가장 빠른 방법입니다.
 CSS 스크립트는 표시 및 디자인 옵션을 변경하는 데 매우 유용하므로 모양 > 사용자 정의 > 추가 CSS 로 이동하여 사이트에 쉽게 추가할 수 있습니다. 여기에서 CSS 스크립트를 추가하여 제품 페이지 템플릿을 사용자 정의할 수 있습니다.
 다음은 CSS를 사용하여 제품 페이지를 개선할 수 있는 몇 가지 예입니다.
 제목 글꼴 크기 변경
 다음 CSS 코드는 제품 페이지의 제목 글꼴 크기를 16으로 변경합니다.
 .woocommerce div.product .product_title { 
        글꼴 크기: 16px; 
}
 스니펫에서 글꼴 크기 라인을 조정하여 다른 글꼴 크기를 선택할 수 있습니다.
 제목 색상 변경
 CSS로 제목의 색상을 변경하여 제품 페이지 템플릿을 사용자 정의할 수도 있습니다. CSS를 사용하여 웹사이트에 추가하려는 색상의 16진수 코드를 찾고 아래 코드를 사용하기만 하면 됩니다.
 예를 들어, 이 스니펫에서는 제목 색상을 적갈색으로 변경하는 색상 코드 #800000을 사용했습니다.
 .woocommerce div.product .product_title { 
            색상: #800000; 
}

모든 변경 사항을 적용했으면 게시 합니다.
 CSS 스니펫의 더 많은 예를 보려면 이 게시물을 살펴보세요. 쇼핑 페이지를 사용자 정의하는 방법을 보여주지만 동일한 스니펫을 적용하여 제품 페이지 템플릿을 편집할 수 있습니다.
 Divi에 적용할 보다 구체적인 예는 이 다른 기사를 확인하세요.
 결론
 대체로 제품 페이지의 템플릿을 편집하면 고유한 제품 페이지를 구축하고 경쟁업체와 차별화할 수 있습니다. 판매하는 제품의 유형과 고객의 피드백에 따라 요소를 추가, 제거 또는 재구성하고 제품 페이지를 최대한 활용할 수 있습니다.
 이 가이드에서는 웹사이트에서 WooCommerce 제품 페이지 템플릿을 사용자 정의하는 다양한 방법을 보았습니다.
  •  프로그래밍 방식으로
  •  페이지 빌더와 함께
  •  플러그인 사용
 이 모든 방법은 각자의 방식으로 효과적이므로 필요에 가장 적합한 방법을 선택하십시오. 코딩 기술이 있는 경우 프로그래밍 방식은 매우 효과적이며 변경할 수 있는 항목에 대해 많은 유연성을 제공합니다. 그렇지 않으면 페이지 빌더를 사용하여 템플릿의 다른 섹션을 쉽게 사용자 지정할 수 있습니다. 마지막으로 제품 페이지에 특정 변경 사항을 적용할 수 있는 Direct Checkout과 같은 플러그인을 사용할 수 있습니다.
 템플릿을 수정했습니까? 어떤 방법을 사용하셨나요? 아래 의견에 알려주십시오.
 이 튜토리얼이 흥미롭다면 다음과 같은 기사를 더 좋아할 수 있습니다.
  •  WooCommerce 관련 제품을 사용자 정의하는 방법
  •  WooCommerce 제품 페이지를 사용자 정의하는 최고의 플러그인
  •  WooCommerce에서 제품에 이미지를 추가하는 방법