WooCommerce 제품 페이지를 편집하고 사용자 정의하는 방법

제품 페이지는 판매 프로세스에 매우 중요합니다. 여기서 구매자는 상품을 계속 구매하거나 반품을 보장하지 않고 떠나기로 결정합니다. 온라인 상점 소유자의 목표는 사이트 방문자를 제품 페이지로 유도한 다음 카트에 추가 및 체크아웃의 마지막 단계를 수행하도록 하는 것입니다.

이를 위해서는 제품 페이지가 판매 중인 항목을 홍보하는 데 최선을 다하는 것이 중요합니다. WooCommerce 기본 제품 템플릿은 깨끗하고 전문적이며 아래 방법을 사용하여 페이지를 구축할 수 있는 견고한 기반을 제공합니다.

WooCommerce 제품 페이지 템플릿을 최적화하는 방법

WooCommerce 제품 페이지 또는 템플릿을 사용자 지정할 수 있는 방법에는 여러 가지가 있습니다. 일부 방법은 WooCommerce에 포함되어 있습니다. 다른 사람들에게는 확장이 필요합니다. 사이트 편집기를 사용하거나 수동으로 사용자화할 수도 있습니다. 각 옵션을 자세히 살펴보겠습니다.

기본 제공 기능을 사용하여 WooCommerce 제품 페이지를 사용자 지정하는 방법

추가 기능이나 코딩 없이 많은 제품 페이지 최적화를 수행할 수 있습니다. 고품질 사진, 유익한 설명 및 주요 제품 정보를 통해 방문자가 제품을 보다 쉽게 ​​구매할 수 있습니다.

리뷰와 평가를 활성화하여 신뢰를 쌓으십시오. 관련 제품, 교차 판매 및 상향 판매를 설정하여 평균 주문 규모를 늘리고 고객이 새 항목을 더 쉽게 찾을 수 있도록 합니다. 사회적 증거를 위해 제품 설명이나 탭에 고객 평가를 포함하십시오.

페이지 콘텐츠를 최적화한 후에는 WooCommerce 확장 프로그램을 사용하고, 사이트 편집기로 제품 페이지 템플릿을 편집하고, 코드와 후크를 사용하여 수동으로 사용자 정의하여 제품 페이지를 더욱 향상시킬 수 있습니다.

WooCommerce 확장을 사용하여 제품 페이지를 사용자 지정하는 방법

확장 프로그램은 WooCommerce 스토어에 추가 기능을 제공하기 위해 특별히 제작된 WordPress 플러그인입니다. 다음은 추가 제품 정보를 제공하고, 쇼핑 경험을 업그레이드하고, 기본 기능 이상으로 페이지를 확장하는 데 사용할 수 있는 몇 가지 WooCommerce 확장입니다. 공식 WooCommerce 확장 라이브러리에서 추가 사용자 정의를 위한 더 많은 확장을 찾을 수 있습니다.

1. WooCommerce를 위한 고급 제품 변형

가변 제품은 크기 및 색상과 같은 옵션이 있는 항목으로, 쇼핑객이 체크아웃하기 전에 선택할 수 있습니다. 프런트 엔드에서 WooCommerce는 아래에 사용 가능한 변형 목록(예: 소형, 중형 또는 대형)과 함께 각 속성(예: 크기 또는 색상)에 대한 드롭다운을 표시합니다.

보다 시각적인 접근 방식을 위해 WooCommerce용 Advanced Product Variation을 사용하면 견본(색상, 이미지 및 텍스트), 갤러리 및 표를 사용하여 제품 변형을 선보일 수 있습니다. 견본에 비디오를 포함할 수도 있습니다.

변형 견본은 구성한 설정에 따라 제품 페이지 또는 기본 쇼핑 페이지에 표시됩니다. 기존 제품 이미지와 추천 이미지를 활용하여 견본을 만들 수 있습니다.

추천 이미지 아래의 기본 위치에서 왼쪽으로 이동하여 제품 갤러리 레이아웃을 사용자 지정할 수도 있습니다.

WooCommerce용 고급 제품 변형에 대해 자세히 알아보십시오.

2. WooCommerce 탭 관리자

WooCommerce 제품 페이지 탭은 장바구니에 추가 버튼 아래에 표시되며 제목 및 가격과 같은 주요 요소를 접은 부분 위에 유지하면서 추가 정보를 표시할 수 있습니다.

이 추가 정보에는 제품 재료 및 성분, 중량 및 치수, 사이즈 차트, 가격표, 배송 시간, 배송비, 사용 방법 비디오 등 모든 것이 포함될 수 있습니다. 고객이 구매에 자신감을 갖도록 도와줄 것입니다.

WooCommerce 탭 관리자를 사용하면 기본 탭(자세한 설명, 추가 정보 및 리뷰)의 이름을 바꾸고 순서를 변경하고 제거할 수 있으며 자신만의 글로벌, 범주 전체 및 제품별 탭을 만들어 이 섹션을 사용자 지정할 수 있습니다.

플러그인을 사용하여 제품 수준에서 재정의할 수 있는 기본 탭 순서를 설정합니다. 끌어서 놓기 인터페이스를 사용하면 테마 파일을 수정하거나 코드에 들어갈 필요가 없습니다.

다른 플러그인을 통해 이미 사용자 지정 탭이 있는 경우 WooCommerce 탭 관리자가 이를 감지하여 표시하거나 숨길 수 있는 옵션을 제공합니다. 이 플러그인의 주요 이점은 탭의 콘텐츠가 사이트 검색 결과에 포함된다는 것입니다.

WooCommerce 탭 관리자에 대해 자세히 알아보세요.

3. 제품 FAQ

자주 묻는 질문 또는 FAQ는 방문자에게 제품 정보를 구성하고 제공하는 사용자 친화적인 방법입니다. 제품 FAQ 확장을 사용하면 무제한 질문과 답변이 있는 각 제품에 대한 전용 FAQ 탭을 추가할 수 있습니다.

플러그인은 모든 제품 유형에서 작동하며 제품 페이지를 생성하거나 편집할 때 FAQ 섹션을 추가합니다.

프런트 엔드에서 FAQ는 애니메이션과 함께 아코디언 스타일로 표시됩니다.

제품 FAQ에 대해 자세히 알아보세요.

4. 복합 제품

복합 제품을 사용하면 고객이 키트 또는 구성 가능한 제품을 구축할 수 있습니다.

각 복합 제품에 대해 고객이 기존 인벤토리에서 미리 결정된 선택 항목 중에서 선택할 수 있습니다. 특정 선택 항목에 추가 요금을 할당하고 특정 범주를 선택 사항으로 허용할 수 있습니다.

예를 들어, 목걸이에는 체인(은, 금), 스톤(루비, 가넷, 에메랄드) 및 선택적 참(여러 모양 선택)에 대한 옵션이 포함될 수 있습니다.

키트의 각 빌딩 블록(체인, 스톤, 참)에 대해 고객이 선택할 수 있는 SKU를 선택하거나 전체 제품 범주에서 옵션을 선택하도록 할 수 있습니다.

조건부 논리를 사용하면 이전 선택을 기반으로 옵션을 표시하거나 숨길 수 있으며(예: 빨간색 셔츠는 특정 크기로 제공되지 않음) 구성 요소 수준 추적은 고급 재고 관리를 지원합니다. 방대한 수의 옵션이 있는 경우 정렬, 필터링 및 페이지 매김으로 보기를 생성하여 더 쉽게 쇼핑할 수 있습니다.

복합 제품에 대해 자세히 알아보십시오.

5. 제품 애드온

제품 추가 기능 확장을 통해 쇼핑객은 무료 및 유료 추가 기능을 통해 구매를 맞춤화하고 업그레이드할 수 있습니다.

추가 기능에는 보증, 고품질 재료, 우선 배송 옵션 또는 맞춤형 모노그램 및 각인과 같은 개인화가 포함될 수 있습니다. 사람들이 선물용으로 제품을 자주 구매하는 경우 포장 옵션 또는 선물 메시지 필드를 추가할 수 있습니다.

비영리 단체는 쇼핑객이 구매 시 기부금을 포함하고 이름과 메시지를 추가하여 누군가를 기리기 위해 기부할 수 있도록 허용할 수 있습니다.

WooCommerce Bookings가 있는 경우 제품 추가 기능을 사용하면 추가 서비스(이발 후 머리 헹굼) 또는 특별 좌석 및 액세스를 위한 VIP 업그레이드 옵션을 생성할 수 있습니다. 또한 WooCommerce 구독과도 연동되어 구독 제품에 애드온을 제공할 수 있습니다.

추가 기능에는 텍스트 상자, 드롭다운, 확인란, 이미지 기반 선택 항목 및 팁 및 기부금과 같은 항목에 대한 사용자 지정 가격 입력으로 표시되는 사용자 지정 필드가 포함될 수 있습니다. 이러한 필드는 전체 카탈로그에 적용하거나 특정 제품에 할당할 수 있습니다.

추가 기능을 설정하면 장바구니에 추가 버튼 위의 제품 페이지에 선택한 순서대로 표시됩니다.

제품 추가 기능에 대해 자세히 알아보십시오.

사이트 편집기를 사용하여 제품 페이지를 사용자 정의하십시오.

블록 테마를 사용하면 사이트 편집기에서 단일 제품 페이지 템플릿을 편집하여 제품 페이지의 모양을 사용자 지정할 수 있습니다. WordPress 관리자에서 Appearance → Editor 로 이동합니다.  

페이지 상단 중앙의 드롭다운 메뉴에서 "모든 템플릿 찾아보기"를 선택합니다. 표시되는 목록에서 단일 제품 템플릿을 선택합니다.

기본 페이지 레이아웃에는 제품 정보, 가격 및 이미지 요소를 표시하는 머리글, 바닥글 및 WooCommerce 단일 제품 블록이 포함됩니다.

제품 페이지 템플릿을 수정하기 전에 사이트를 백업해야 합니다. 예를 들어 실수로 단일 제품 블록을 삭제하고 저장하는 것과 같은 특정 변경 사항은 방문자가 쇼핑하거나 구매하는 것을 불가능하게 만듭니다.

단일 제품 페이지 머리글 및 바닥글 템플릿을 편집하는 방법

설정 아래의 템플릿 탭(오른쪽 상단의 톱니바퀴 아이콘)에는 머리글 및 바닥글을 관리할 수 있는 링크가 포함되어 있습니다. 페이지 템플릿의 해당 부분을 관리하려면 두 옵션 중 하나를 클릭합니다. 템플릿 영역을 직접 클릭하여 편집을 시작할 수도 있습니다. 여기서 변경한 내용은 템플릿을 사용하는 모든 제품에 적용됩니다.

머리글에서 사이트 제목과 기본 탐색 메뉴의 링크를 편집할 수 있으며 새 블록을 추가하여 제품 페이지를 구체적으로 사용자 정의할 수도 있습니다. 이 공간을 사용하여 이미지, 텍스트 등을 추가하여 제품 페이지의 판매력을 향상시키십시오. 프로모션 또는 정책 메모 또는 배너를 추가하여 쇼핑객에게 현재 판매에 대해 알리거나 특정 금액 이상 주문 시 무료 배송을 받는 방법을 알릴 수 있습니다.

제품 페이지 바닥글과 비슷한 작업을 수행할 수 있습니다. 예를 들어 고객 평가 또는 만족 보장 정책에 대한 정보를 추가합니다.

단일 제품 본체를 사용자 정의하는 방법

단일 제품 블록 상단에 "이 블록을 제거하지 마십시오! 이 차단을 제거하면 상점에 의도하지 않은 영향을 미칩니다.” 이 메시지를 진지하게 받아들이십시오!

그러나 단일 제품 블록 주위에 새 블록을 추가하여 제품 페이지 디자인을 완전히 사용자 지정할 수 있습니다.

+ 아이콘을 사용하여 단일 제품 블록 위 또는 아래에 요소를 추가한 다음 페이지를 사용자 지정하려는 블록을 포함합니다.

단락 블록을 사용하여 현재 제안("$100 이상 구매 시 무료 배송"), 만족 보장 또는 방문자가 구매 결정을 내리는 데 도움이 되는 모든 것을 포함하십시오. 프로세스에 대한 비하인드 스토리를 제공하는 비디오 블록을 추가하십시오. 또는 홍보하려는 특정 추천 제품을 포함하세요. 하늘이 여기 한계입니다!

그리고 각 블록에 대해 배경색, 타이포그래피, 간격과 같은 설정을 편집하여 진정으로 나만의 블록으로 만들 수 있습니다.

제품 페이지를 수동으로 사용자 지정(코드 및 후크 사용)

고급 옵션의 경우 플러그인 비용이나 유지 관리 없이 코드와 후크를 사용하여 수동으로 제품 페이지를 편집하고 사용자 지정할 수 있습니다.

파일을 변경하기 전에 시간을 내어 WooCommerce를 백업하는 것이 중요합니다. Jetpack VaultPress 백업을 사용하는 경우 실시간으로 자동으로 수행됩니다. 따라서 변경 사항으로 인해 사이트가 다운되는 경우 WordPress 대시보드에 액세스할 수 없는 경우에도 몇 번의 클릭만으로 백업을 복원할 수 있습니다.

또한 자식 테마를 사용하여 이러한 변경을 수행할 수도 있습니다. 그렇지 않으면 나중에 테마나 WooCommerce를 업데이트할 때 모든 사용자 지정 내용이 손실될 수 있습니다. 또 다른 옵션은 Code Snippets와 같은 플러그인을 사용하는 것입니다. 이 플러그인을 사용하면 필요에 따라 켜고 끌 수 있는 스니펫으로 사이트에 사용자 지정 코드를 추가할 수 있습니다.

후크를 사용하여 WooCommerce 제품 페이지 사용자 지정

후크를 사용하면 사이트 소유자가 코어 파일 편집과 관련된 위험 없이 코드를 추가하고 페이지를 사용자 지정할 수 있습니다. 후크에는 액션과 필터의 두 가지 유형이 있습니다. 액션을 사용하면 특정 지점에 코드를 삽입할 수 있고 필터를 사용하면 변수를 조작하고 반환할 수 있습니다.

예를 들어 작업을 사용하여 새 체크아웃 필드를 추가한 다음 필터를 사용하여 기존 체크아웃 필드의 레이블 또는 자리 표시자를 변경할 수 있습니다. 여기에서 사용 가능한 WooCommerce 후크 목록을 찾을 수 있습니다.

다음은 후크를 사용하여 제품 페이지를 변경할 수 있는 몇 가지 추가 예입니다.

• 장바구니에 추가 버튼 텍스트를 변경합니다. 예를 들어 "지금 기부하세요"라고 말할 수 있습니다.
• WooCommerce 이동 경로를 사용자 정의하십시오. 이동 경로 구분 기호를 변경하고 이동 경로를 모두 제거하는 등의 작업을 수행합니다.
• 제품 탭을 제거하고 이름을 바꾸고 재정렬합니다. 예를 들어 재료 탭을 추가하거나 탭 중 하나에 비디오를 포함합니다.

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

CSS는 디자인 요소를 제어하는 ​​데 사용되는 코딩 언어입니다(액션을 제어하는 ​​JavaScript와 반대). 이를 사용하여 제품 페이지의 디자인을 수정할 수 있습니다. CSS의 기본 사항을 배운 후에는 색상 및 글꼴에서 개별 요소의 크기에 이르기까지 모든 것을 사용자 지정할 수 있습니다.

WordPress 대시보드에서 모양 → 사용자 정의 → 추가 CSS로 이동하여 CSS 코드를 쉽게 추가할 수 있습니다. 예를 들어 제품 제목의 글꼴 색상을 변경하려면 다음 코드를 사용하여 색상의 16진수 코드를 자신의 것으로 바꿉니다.

 .woocommerce div.product .product_title { color: #222222; }

지금 구매 버튼의 색상을 변경하려면 이 코드를 사용하고 다시 16진수 코드를 선택한 색상으로 바꿉니다.

 .woocommerce div.product .button {   background: #000000; }

WooCommerce의 이 기사에서 더 많은 예를 볼 수 있습니다.

제품 페이지 로딩 속도를 높이는 방법

빠른 로딩 사이트는 방문자와 검색 엔진 모두에게 중요합니다. 사람들은 기다리기를 원하지 않으며 검색 엔진은 사람들을 실적이 저조한 사이트로 보내는 것을 원하지 않습니다.

문자 그대로 1초가 중요합니다. 로드 시간이 1초 지연되면 전환율이 20% 감소할 수 있습니다!

Jetpack Boost는 WordPress를 위한 최고의 웹 사이트 속도 및 성능 최적화 솔루션입니다. 개발자가 필요 없는 빠르고 쉬운 설정 프로세스가 있으며 일대일 테스트에서 상위 5개 성능 플러그인을 능가하는 결과를 자랑합니다.

무료 플러그인을 설치한 후 감사를 실행하고 현재 사이트 성능 점수에 대한 보고서를 받을 수 있습니다. 이는 Google이 사이트의 사용자 경험과 기술 성능을 측정하는 데 사용하는 지표인 Core Web Vitals의 개선 사항을 측정하는 데 사용할 수 있는 벤치마크 역할을 합니다.

간단한 대시보드를 사용하면 원클릭 활성화를 통해 최적화 옵션을 간단하게 구성할 수 있습니다. 이를 통해 성능 모듈을 개별적으로 테스트하고 모든 시나리오에 완벽하게 맞도록 Jetpack Boost를 구성할 수 있는 유연성을 제공합니다.

제품 페이지 속도를 높이는 더 많은 방법은 WooCommerce 스토어 속도를 높이는 9가지 방법을 확인하십시오.

제품 페이지 사용자 지정에 대해 자주 묻는 질문

아직도 질문이 있으신가요? 아래에서 몇 가지 일반적인 질문에 대한 답변을 살펴보세요.

WooCommerce 제품 페이지를 사용자 정의하는 가장 좋은 방법은 무엇입니까?

단 하나의 최선의 방법은 없습니다. 가장 좋은 방법은 다양한 접근 방식을 사용하는 편안함 수준에 따라 다릅니다 .

사이트 편집기는 코드를 전혀 편집하지 않고도 요소를 드래그 앤 드롭하여 자신만의 개인화된 제품 페이지를 만들 수 있도록 모든 기능을 제공합니다. 이것은 초보자와 고급 사용자 모두에게 훌륭한 솔루션입니다!

특정 추가 기능을 찾고 있다면 WooCommerce 확장이 훌륭한 옵션입니다. WooCommerce에서 심사 및 승인했으며 판매자에게 사용자 지정 코드 없이 고급 사용자 지정 옵션을 제공합니다.

수동 사용자 정의 및 코딩은 가장 큰 유연성을 제공하지만 가장 많은 기술 지식이 필요합니다. 이 방법은 블록이나 확장을 사용하는 것과 비교할 때 문제를 일으키거나 심지어 사이트를 중단시킬 가능성이 가장 큽니다.

제품 페이지 템플릿을 편집하기 전에 내 사이트를 백업해야 합니까?

예. 페이지 및 게시물과 달리 사이트 템플릿에는 업데이트 기록이 없습니다. 제품 페이지 템플릿을 업데이트하기 전에 사이트를 백업하여 문제가 있는 경우 빠르게 복원할 수 있습니다.

Jetpack VaultPress Backup은 실시간 WordPress 백업 플러그인으로, 사이트가 매일 일정에 따라 또는 수동으로 복사할 때 백업되는 것이 아님을 의미합니다. 대신 사이트를 변경하거나 고객이 주문하거나 방문자가 댓글을 남길 때마다 자동으로 저장됩니다. 중요한 일이 생길 때마다? 저장되었습니다!

전자 상거래 상점은 특히 해당 데이터가 실제 고객 주문을 나타내는 경우 데이터 손실을 감당할 수 없습니다. 가끔 사이트를 저장하거나 문제가 있을 때 복원하기 위해 긴 고객 서비스 상호 작용이 필요한 솔루션에 만족하지 마십시오.

Jetpack VaultPress 백업을 사용하면 클릭 한 번으로 사이트를 복원하고 신속하게 온라인 상태로 돌아갈 수 있습니다. Jetpack 모바일 앱을 사용하면 사이트가 완전히 다운된 경우에도 언제 어디서나 복원할 수 있습니다.

점주에게 가장 좋은 점은? 모든 고객 데이터와 주문은 보호되며 최신 상태를 유지합니다.

WooCommerce 제품 페이지를 사용자 지정하기 위한 모범 사례는 무엇입니까?

WooCommerce 제품 페이지를 편집하고 사용자 지정하는 데 사용하는 방법에 관계없이 다음 모범 사례를 따라 자신, 사이트 및 고객을 보호하십시오.

항상 사이트를 먼저 백업하십시오 . 사이트 코드를 추가하거나 업데이트할 때 단일 오류로 인해 문제가 발생할 수 있습니다. 단일 주문 손실 없이 최대한 빨리 사이트를 복원할 준비가 되어 있어야 합니다. Jetpack VaultPress Backup은 WordPress를 위한 최고의 실시간 자동 백업 솔루션입니다.

그것은 당신을 위해 완료되었으므로 변경 사항을 실험하기 전에 사이트 저장에 대해 걱정할 필요조차 없습니다.

상위 테마 파일 외부에서 코드를 변경하십시오 . 테마 또는 플러그인 파일을 편집하면 해당 변경 사항이 덮어쓰여지고 다음에 테마 또는 플러그인이 업데이트될 때 취소됩니다.

테마 또는 플러그인 파일을 직접 편집하지 않고 사이트에 코드를 추가하는 방법에는 여러 가지가 있습니다. Code Snippets 플러그인을 사용하여 페이지의 요소를 추가, 편집 또는 제거하고 Theme Customizer의 추가 CSS 필드를 통해 사이트 스타일을 지정할 수 있습니다. 자식 테마를 만들 수도 있습니다. 중요한 것은 테마나 플러그인 업데이트의 영향을 받지 않는 곳에서 변경하는 것입니다.

속도를 주시하십시오. 제품 페이지를 사용자 지정하는 방법에 관계없이 사이트 속도가 저하되지 않도록 해야 합니다. Jetpack Boost를 사용하면 사용자 경험과 사이트 품질에 대한 Google의 인식을 모두 개선하는 핵심 영역을 즉시 개선할 수 있습니다. 더 빠른 사이트는 고객이 머무를 가능성이 더 높고 Google이 검색 결과에서 귀하를 추천할 가능성이 더 높다는 것을 의미합니다. 빠른 향상은 먼 길을 갈 수 있습니다.