WooCommerce 디자이너 가이드

Shopify와 같은 WooCommerce 스토어를 디자인하거나 기존 WooCommerce 테마를 개발하는 경우 이 기사 WooCommerce 디자이너 가이드가 적합합니다. 이 구성은 스타일링, 디자인 변경 및 관련 WooCommerce 페이지를 다루는 기타 정보에 대한 추가 정보를 제공합니다.

이 플러그인은 사용자 친화적인 도구이며 매우 유연합니다. 그러나 모든 웹사이트가 지원되는 것은 아닙니다. WooCommerce가 지원하는 기능과 접근 방식을 사용하면 디자인 및 개발 프로세스의 속도를 높일 수 있습니다.

사용자가 수정 사항을 사용자 정의할 수 있지만 추가 비용이 듭니다. 어떤 기능이 있는지 확인하는 가장 빠른 방법은 WooCommerce 내의 Storefront 데모를 방문하는 것입니다. 일반적으로 Woocommerce 사용 방법을 배우는 방법이 필요한 경우 시작하는 데 도움이 되는 돔 가이드를 확인하세요. WooCommerce는 다음과 같은 새 페이지를 만듭니다. 디자인해야 하는 페이지 유형이 있습니다.

첫 번째는 제품 페이지입니다. 이 페이지에는 제품 아카이브 페이지와 제품 단일 페이지의 두 가지 종류가 있습니다.

제품 아카이브 페이지 에는 사용 가능한 제품 범주에 대한 축소판이 표시됩니다. 카테고리 썸네일을 클릭하면 다른 제품 아카이브 페이지가 표시됩니다. 그런 다음 제품 썸네일을 클릭하면 단일 제품을 표시합니다.

다른 종류는 제품 단일 페이지입니다. 여기에서 이들은 단일 제품을 표시하고 제품 이미지, 제품 헤더 정보, 제품 상세 정보 및 관련 제품, 교차 판매 및 상향 판매를 결합합니다.

또한 쇼핑 카트 및 체크아웃 을 포함하는 특수 페이지 가 있습니다. 장바구니는 일반적으로 사이드바 위젯으로 압축된 형태로 표시되며 때로는 배달 정보와 함께 장바구니 페이지에 확장된 형태로 표시됩니다. 반면에 체크아웃은 고객이 체크아웃할 때이며 주소 정보가 필요합니다.

다양한 유형의 제품

이 도구에는 다양한 유형의 제품이 있습니다.

첫 번째는 다섯 부분으로 나누어진 제품 헤더입니다. 이것들은:

1. 제품 이름 – 요약/아카이브 페이지 및 단일 페이지에 표시됩니다.
2. 제품 기능 – 요약/보관 페이지 및 단일 페이지에서 볼 수 있습니다.
3. 이미지 – 추천 이미지는 단일 제품 페이지의 요약 및 추가 이미지에 표시됩니다.
4. 긴 설명 – 단일 제품 페이지 하단의 제품 설명 영역에 표시됩니다.
5. 간단한 설명 – 단일 제품 페이지 상단에 표시됩니다.

이 도구는 또한 사용자가 제품을 사용할 수 있도록 합니다.

모든 범주에는 제공된 범주 이미지와 설명이 필요하며 하위 범주도 있을 수 있습니다. 예를 들어 신발은 범주이고 신발 브랜드는 하위 범주입니다. 제품 카테고리 아카이브는 제목 또는 카테고리 이름, 카테고리 설명, 현재 카테고리의 각 하위 카테고리에 대한 하나의 카테고리 썸네일, 선택적 제품 썸네일이 포함된 각 제품의 제목, 가격 및 장바구니에 추가 섹션과 함께 자동으로 생성됩니다. 현재 카테고리. 카테고리를 클릭하면 새 카테고리가 열리고, 제품 썸네일을 클릭하면 제품이 열립니다.

또한 제품 페이지에서 다음과 같이 자동으로 생성됩니다.

상품 이미지 – 상품의 특장 이미지 및 부가 이미지입니다. 제품 제목, 제품 가격, 제품 간략한 설명, 장바구니에 추가할 수량(+ 및 컨트롤 포함), 장바구니에 추가 버튼, 제품 SKU(재고 관리 단위) 카테고리 및 태그.

제품 탭에는 선택적 이미지 갤러리를 포함한 제품에 대한 자세한 설명, 제품 페이지에 표시할 제품 속성 티켓과 같은 추가 정보, 선택적 제품 리뷰가 포함됩니다. 카테고리를 클릭하면 새 카테고리가 열리고, 제품 썸네일을 클릭하면 제품이 열립니다.

상향 판매 – 상향 판매에 대한 엄지손가락/제목 다음에 "좋아할 수도 있는" 항목입니다.

교차 판매 – 관련 제품과 축소판입니다.

제품 프리젠테이션 옵션은 Standard 및 Optional 프리젠테이션입니다. 표준은 제품 페이지 상단에 추천 이미지를 표시하고 그 아래 3열의 썸네일에 보조 이미지 썸네일을 표시합니다. 대조적으로, 선택적 프리젠테이션은 아래에 썸네일이 없는 추천 이미지를 표시하고 설명 탭에 모든 이미지를 표시합니다.

도구의 또 다른 부분은 사이드바 위젯이나 바닥글 위젯에 배치할 수 있는 제품 검색 위젯입니다. 웹 사이트를 검색하려면 사이트 전체 검색 옵션이 있습니다. 그 아래에는 제품 이름, 짧은 설명 및 긴 설명을 검색할 수 있는 제품 검색 상자가 있습니다. 광역 검색 옵션의 다른 부분을 범주 드릴다운이라고 합니다. 카테고리 또는 하위 카테고리를 선택할 수 있는 드롭다운 필드입니다. Proud 태그 클라우드 키트에는 가격 태그를 선택할 수 있는 드롭다운이 있습니다.

제품 카테고리 검색 옵션 검색 위젯은 자동으로 생성된 제품 카테고리 아카이브가 표시될 때만 나타납니다. 첫 번째는 계층화된 탐색입니다. 이를 통해 사용자는 속성을 기반으로 제품을 개선하고 사용자가 원하는 것을 효과적으로 찾을 수 있습니다. 제품 가격 필터 - 제품을 가격 범위로 필터링할 수 있는 슬라이딩 스케일을 표시합니다. 베스트 셀러 - 자동으로 선택된 베스트 셀러 제품 목록의 제목/썸네일/가격을 표시합니다. 추천 제품은 추천 제품으로 체크된 제품의 제목/썸네일/가격을 표시합니다. 할인 중: 가격 외에 할인가가 입력된 제품을 표시합니다.

사용자가 WooCommerce 스타일을 지정하려는 경우 Product thumb과 같은 옵션이 있습니다. 제품이 제품 썸네일로 나타나면 썸네일, 제목, 가격, 장바구니 담기 등 4가지 요소가 표시됩니다. 제품 배경, 제품 테두리, 패딩 및 여백에 사용할 수 있는 CSS 스타일입니다. 다음은 썸네일입니다. 여기에는 테두리, 패딩 및 여백이 포함됩니다. 제목에는 가격과 동일한 글꼴, 두께, 색상, 크기가 포함됩니다. 장바구니에 추가에는 버튼 색상, 라벨 색상, 테두리 및 반경이 포함됩니다.

도구에는 판매 스티커가 있습니다. 판매 중인 제품 엄지손가락 위에 'sale'이라는 단어가 표시됩니다. CSS 스타일은 배경색, 글꼴 색상, 테두리 색상을 사용할 수 있습니다. 테두리 너비, 실선/파선 테두리, 테두리 반경.

제품 변형을 통해 클라이언트는 다양한 색상이나 디자인으로 제공되는 의류 제품을 설정할 수 있습니다. 제품 변형이 사용되면 제품 아카이브 페이지에 장바구니에 추가 버튼 대신 "옵션 선택" 버튼이 표시됩니다.

요약하면 WooCommerce 스토어를 디자인할 때 고려해야 할 주요 요소를 설정했습니다. 다양한 유형의 페이지, 제품 정보, 검색 및 스타일 옵션에 대해 설명했습니다. WooCommerce 스토어를 즐겁게 구축하세요.

여기에서 Woocommerce WordPress 테마에 대해 자세히 알아보세요.