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

귀하의 제품은 고유합니다. 이를 보여주는 제품 페이지도 고유해야 합니다. 기본 WooCommerce 제품 페이지 템플릿은 많은 온라인 상점에 적합하지만 제품의 개별 스타일과 이점을 반영하는 것을 원할 수도 있습니다.

WooCommerce의 몇 가지 확장 기능(및 핵심 WooCommerce 기능 하나) 덕분에 개발자가 될 필요가 없습니다.

제품 추가 기능

제품 추가 기능 확장 프로그램은 제품 페이지에 더 많은 필드를 추가하여 쇼핑객이 구매를 사용자 지정할 수 있도록 합니다. 텍스트 상자, 확인란 또는 드롭다운을 사용하여 옵션을 배치하고 샘플 이미지로 변형을 추가하십시오. 개별 제품 또는 전체 카탈로그에 포함하십시오.

적합 대상: 선물 포장 및 모노그램과 같은 추가 옵션을 제공하는 전자 상거래 매장.

• 자수를 제공하는 의류 매장의 경우 고객이 체크아웃하기 전에 자수하려는 텍스트를 입력할 수 있도록 하여 구매 후 연락할 필요가 없도록 하세요.
• 악센트 베개를 판매하는 경우 천, 크기 또는 스타일에 대한 옵션을 제공하십시오.
• 보석을 판매하는 경우 고객이 조각에 새기고 싶은 인용문을 선택하게 하십시오.
• 선물할 수 있는 제품을 제공하는 경우 선물 포장 또는 감사 메모 옵션을 포함하십시오.
• 전자 제품을 판매하는 경우 쇼핑객이 제품을 보호하는 보증을 구매할 수 있도록 합니다.
• 비영리 단체인 경우, 귀하를 지원하는 사람들이 상품 구매 시 기부금을 포함하도록 하십시오.

각 추가 기능에 대해 비용을 청구하거나 무료로 사용자 정의를 제공하도록 선택하십시오. 쇼핑객에게 필요한 옵션을 제공하는 유연한 방법입니다.

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

변형 견본 및 사진

제품에 색상이나 패턴 변형이 있는 경우 구매자는 실제 제품을 보고 싶어합니다. 변형 견본 및 사진 확장 프로그램은 스타일, 크기, 패턴, 색상 등의 변형을 이미지 또는 색상 견본과 함께 표시하여 고객에게 구매 대상에 대한 더 나은 아이디어를 제공하고 제품 페이지 디자인을 개선합니다.

적합 대상: 다양한 제품이 있는 전자 상거래 상점.

• 티셔츠를 판매하는 경우 색상 옵션을 표시하십시오.
• 안경을 판매하는 경우 모든 안경테 옵션을 표시하십시오.
• 보석을 판매하는 경우 고객이 선택할 수 있는 펜던트를 강조 표시합니다.
• 스케이트보드를 판매하는 경우 제공하는 패턴의 이미지를 포함하세요.

변형 견본 및 사진에 대해 자세히 알아보고 실제로 사용해보세요.

WooCommerce 360 ​​이미지

WooCommerce 360 ​​이미지를 사용하면 제품 페이지에 동적 사용자 지정 360도 이미지 회전을 추가하여 쇼핑객이 제품 세부 정보를 자세히 알아볼 수 있습니다. 제품 갤러리에 이미지 그룹을 추가하면 고객이 제품의 모든 측면을 보기 위해 회전할 수 있는 아름다운 360도 사진으로 해당 이미지가 교체됩니다. 또한 완벽하게 반응하므로 모바일 장치를 사용하는 쇼핑객도 동일한 훌륭한 경험을 할 수 있습니다.

적합 대상: 고객에게 제품을 실제로 들고 있는 것과 같은 경험을 제공하려는 전자 상거래 상점.

• 가구를 판매하면 고객은 모든 각도에서 가구의 스타일을 이해할 수 있습니다.
• 자동차 부품을 판매하는 경우 고객은 자신에게 중요한 세부 사항을 자세히 살펴볼 수 있습니다.
• 시계를 판매하는 경우 고객은 모든 뉘앙스, 조각 및 기능을 확대할 수 있습니다.

WooCommerce 360 ​​이미지에 대해 자세히 알아보세요.

WooCommerce 제품 비디오

동영상은 실제 제품을 선보일 수 있는 강력한 방법입니다. WooCommerce용 제품 비디오 확장 프로그램을 사용하여 제품 이미지 갤러리에 비디오를 추가하거나 추천 이미지를 비디오로 교체하십시오. 비디오를 WordPress 미디어 라이브러리에 업로드하거나 Vimeo 또는 YouTube와 같은 타사 서비스에서 포함하십시오.

적합 대상: 실제 제품을 가장 잘 보여주는 전자 상거래 매장

• 전동 공구를 판매하는 경우 공구의 크기와 작동 방식을 시연하십시오.
• 옷을 판매하는 경우 아이템이 다양한 신체 유형에 어떻게 어울리고 다른 조각과 짝을 이루는지 보여주세요.
• 장난감을 판매하는 경우 제품을 가지고 노는 아이들의 클립과 행복한 부모의 후기를 포함하십시오.

WooCommerce용 제품 비디오에 대해 자세히 알아보십시오.

WooCommerce용 사이즈 차트

다양한 크기의 제품을 판매하는 경우 차트를 통해 고객이 구매할 제품을 이해하고 반품 횟수를 줄일 수 있습니다. WooCommerce 확장 프로그램용 사이즈 차트는 제품 페이지에 사이즈 차트를 추가합니다. 직접 업로드하거나 대시보드에서 생성하세요. 제품 세부 정보 또는 팝업으로 차트를 표시하도록 선택할 수 있습니다.

적합 대상: 다양한 크기의 제품을 판매하는 전자 상거래 매장

예:

• 티셔츠를 판매하는 경우 어깨, 가슴, 신장 측정이 포함된 사이즈 차트를 추가하세요.
• 가구를 판매하는 경우 길이, 높이 및 깊이 측정이 포함된 사이즈 차트를 추가하십시오.
• 스티커를 판매하는 경우 높이 및 너비 측정이 포함된 사이즈 차트를 추가하세요.

WooCommerce용 사이즈 차트에 대해 자세히 알아보세요.

제품 추천

상향 판매 및 교차 판매는 고객의 장바구니 크기와 전체 판매를 늘리는 효과적인 방법입니다. 제품 추천을 사용하여 고객에게 관심 있는 제품을 더 많이 보여주세요. 인기 제품, 새로운 제품, 세일 중인 제품, 룩을 완성하는 제품 등을 기반으로 추천 제품을 추가하세요. 또는 고객의 장바구니에 이미 있는 것을 기반으로 표시합니다.

적합 대상: 하나 이상의 제품이 있는 전자 상거래 상점

• 신발을 판매하는 경우 양말이나 끈을 권장합니다.
• 귀걸이를 판매한다면 같은 컬렉션의 팔찌와 목걸이를 추천합니다.
• 장난감을 판매하는 경우 고객이 장바구니에 가지고 있는 것과 유사한 퍼즐을 추천하십시오.
• 식물을 판매하는 경우 다른 인기 있는 품종이나 토양 추가 기능을 권장합니다.

제품 권장 사항에 대해 자세히 알아보십시오.

간단한 CSS 변경, 확장 필요 없음

CSS는 글꼴 및 색상에서 버튼 크기 및 배경에 이르기까지 웹사이트 디자인을 제어하는 ​​코딩 언어입니다. 기본적인 CSS 지식이 있는 경우 대시보드에서 모양 → 사용자 정의 → 추가 CSS 로 이동하여 다음과 같이 변경합니다.

제품 제목의 글꼴 크기 변경

아래 코드를 사용하여 제품 제목의 크기를 36px로 변경하십시오. "36"을 원하는 숫자로 바꾸십시오.

 .woocommerce div.product .product_title { font-size: 36px; }

제품 제목의 색상 변경

16진수 코드는 온라인에서 특정 색상을 나타내는 6자리 코드입니다. 아래 코드를 사용하여 제품 제목 색상을 16진수 코드 #FF5733으로 변경하십시오. 16진수 코드를 원하는 것으로 바꾸십시오. HTML 색상 선택기를 사용하여 원하는 색상에 대한 코드를 얻을 수 있습니다.

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

유사 라벨을 굵게 표시

아래 코드를 사용하여 변형 제목을 굵은 텍스트로 표시하십시오.

 .woocommerce div.product form.cart .variations label { font-weight: bold; }

변형 레이블을 기울임꼴로 표시

아래 코드를 사용하여 변형 레이블을 기울임꼴로 표시합니다.

 .woocommerce div.product form.cart .variations label { font-style: italic; }

지금 구매 버튼 색상 변경:

이 코드를 사용하여 지금 구매 버튼의 배경색을 변경하십시오. 다시 HTML 색상 선택기를 사용하여 사용하려는 색상의 16진수 코드를 가져옵니다.

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

제품 페이지 사용자 정의 시작

WooCommerce는 유연성과 사용자 정의 가능성에 관한 것이므로 제품 페이지의 디자인과 기능을 편집하는 데 필요한 모든 도구를 제공합니다. 필드, 비디오, 크기 차트 등을 추가하여 페이지에서 제공하는 제품만큼 고유한 페이지를 만들 수 있습니다.

더 많은 옵션은 전체 확장 라이브러리를 참조하십시오.