우커머스 – 커스터마이저

우커머스 – 커스터마이저

우커머스 커스터마이저(WooCommerce Customizer)는 워드프레스 커스터마이저의 일부이며 코드를 건드리지 않고도 매장 공지, 상품 카탈로그, 상품 이미지에 대해 사이트 전체에 적용되는 옵션을 선택할 수 있습니다.

WordPress 대시 보드에서 외모 -> 사용자 정의하기로 이동합니다.

커스터마이저

커스터마이저 메뉴에서 우커머스를 선택합니다.

우커머스 선택

4가지 옵션이 있습니다.

  • 스토어 알림
  • 제품 카탈로그
  • 제품 이미지
  • 결제
우커머스 사용자 정의

스토어 알림

스토어 알림을 사용하면 상점을 방문하는 모든 사람에게 표시되는 사이트 전체 메시지를 입력할 수 있습니다. 메시지는 다음과 같을 수 있습니다.

  • 정보용 – 기상 조건으로 인한 배송 지연을 고객에게 알리는 메모입니다. 휴가중인 경우 ‘자리 비움’ 알림.
  • 프로모션 – 이벤트, 홀리데이 스페셜, 번들, 전체 / 일부 품목 판매 또는 무료 배송을 광고하는 메모입니다.
상점 공지 표시

고객에게 사이트 전체 스토어 알림을 표시하려면 :

  1. 텍스트 영역에 메시지를 입력합니다.
  2. 스토어 알림 사용 설정 선택합니다.
스토어 알림 설정

3. 스토어 알림이 어떻게 보이는지 미리 봅니다.

스토어 알림 미리보기

4. 공개할 준비가 되면 공개합니다.

방문자가 보이는 화면

사용자 화면에 표시되는 방식입니다. 사용자는 알림을 한 번 본 후 무시하도록 선택할 수 있습니다.

스토어 알림 예시

스토어 알림의 위치와 모양은 사용중인 테마에 따라 다릅니다. 위의 스크린 샷은 무료 Storefront 테마입니다.

스토어 알림 편집 또는 제거

사이트 전체 스토어 알림 표시를 변경하거나 중지하려면:

  • 텍스트 영역에서 메시지를 편집하여 변경하십시오.
  • 방문자에게 표시를 중지하려면 상점 알림 사용 상자를 선택 취소하십시오.

상점 예약 공지(현재 작동 안하는걸로 보임)

일정 옵션을 상점 공지에 사용하면 제한된 시간 동안 프로모션을 진행하거나 특정 날짜의 자정에 할인을 종료할 때 도움이 될 수 있습니다.

이 예에서는 2월 28일에 만료되는 무료 배송 공지를 중단하려고 합니다.

스토어 알림 무료배송중

스토어 알림 사용 상자를 선택 취소하십시오.

스토어 알림 취소

오른쪽 위에 설정 아이콘을 선택합니다

메뉴에서 일정을 선택한 다음 변경 사항을 적용할 날짜와 시간을 입력합니다.

표시된 미래 날짜에 수행하려면 일정을 선택합니다.

할인, 쿠폰 코드 또는 기간 한정 혜택은 수동으로 비활성화 해야됩니다. 알림을 제거해도 프로모션 실행이 자동으로 중지되지는 않습니다.

상품 카탈로그

상품 카탈로그(제품 카탈로그)에 대한 모든 옵션은 외모 -> 사용자 정의 -> 우커머스 -> 제품 카탈로그에서 찾을 수 있습니다.

제품 카탈로그

제품 카탈로그에서는 다음을 선택할 수 있습니다.

  • 상점 페이지에 표시할 내용
  • 카테고리 페이지에 표시할 내용
  • 카테고리에서 상품을 정렬하는 방법
제품 카탈로그

상점 페이지

상점 페이지는 상품, 카테고리 또는 둘 다를 표시할 수 있습니다. 깔끔하게 보이려면 하나를 선택하는 것이 좋습니다.

  1. 상품 또는 카테고리를 선택합니다.
  2. 선택 사항을 실시간으로 미리 봅니다. 상점 페이지를 보고 있어야합니다.
  3. 저장하고 공개하세요.

카테고리 페이지

카테고리 페이지는 카테고리 내의 상품 또는 하위 카테고리 혹은 둘 다 표시할 수 있습니다. 마찬가지로 하나를 선택하는 것이 좋습니다.

상품이 적거나 하위 카테고리가 없는 경우 외형에 차이가 없을 수 있습니다.

  1. 상품 또는 하위 카테고리를 선택합니다.
  2. 선택 사항을 실시간으로 미리 봅니다. 카테고리 페이지를 보고 있어야합니다.
  3. 저장하고 공개합니다.

기본 상품 정렬

기본 상품 정렬을 사용하면 상품이 표시되는 순서를 제어할 수 있으며, 이는 상점 및 카테고리 페이지에서 기본적으로 상품이 표시되는 방식에 영향을 줍니다. 방문자는 원하는 경우 다른 방식으로 상품을 정렬할 수 있습니다.

  • 기본 정렬 (사용자 정의 주문 + 상품명) – 이름을 기준으로 알파벳순으로 제품을 표시합니다. 제품 정렬 순서가 사용자 정의된 경우 해당 사용자 정의 순서가 먼저 고려되고 이름순으로 알파벳순으로 두 번째로 간주됩니다 (제품이 동일한 주문 위치를 공유하는 경우). 상점에서 고객은 이것을 기본 정렬로 볼 수 있습니다.
  • 인기순(판매) – 판매량에 따라 상품을 표시합니다.
  • 평균 평점 – 평균 리뷰 평점을 기준으로 최고부터 최저까지 표시합니다.
  • 최신순 – 상점에 추가된 순서대로 제품을 최신순에서 오래된 순으로 표시합니다.
  • 가격 별 정렬(낮은 가격 순/높은 가격 순) – 최저가에서 최고(asc) 또는 최고에서 최저(desc)로 제품을 정렬합니다.

제품 이미지

제품 이미지에는 두 가지 기능이 있습니다.

  • 카탈로그썸네일 이미지 크기 및 자르기 방법을 선택할 수 있습니다.
  • 변경 사항이 게시되면 스토어에서 사이트 전체의 카탈로그썸네일 이미지 크기를 자동으로 조정

이렇게 하면 각각을 수동으로 자르고 크기를 조정할 때 시간과 에너지를 절약할 수 있습니다.

이미지 유형
  • 카탈로그 이미지는 상점 페이지, 카테고리 페이지 및 관련 제품, 상향 판매 및 교차 판매에 나타나는 중간 크기의 이미지입니다.
  • 썸네일 이미지는 개별 상품 상세 페이지의 단일 상품 이미지 아래에 있는 장바구니, 위젯 및 갤러리 이미지 (선택 사항)에서 사용되는 가장 작은 이미지입니다.
  • 단일 상품 이미지는 가장 큰 이미지이며 주요 / 추천 이미지를 나타냅니다. 우커머스 커스터마이저의 이미지 설정은 여기에 적용되지 않습니다. 단일 제품 이미지 또는 제품 이미지 갤러리를 추가, 편집 또는 삭제하려면 제품 이미지 및 갤러리 추가를 참조하십시오.

이전에는 다른 플러그인을 사용하여 썸네일 이미지를 다시 생성해야 했습니다. 이제 WooCommerce 3.3x이상의 버전에서는 직접 처리합니다. 미리보기 모드에서는 재생성이 실행되지 않습니다.

썸네일 이미지 크기 조정 및 자르기
  1. 외모 -> 사용자 정의 -> 우커머스 -> 제품 이미지
제품 이미지

2. 하나 선택

  • 1 : 1 – 정사각형 이미지
  • 사용자 정의 – 이미지가 잘리는 비율을 선택합니다.
  • 자르지 않음 – 이미지가 있는 그대로 나타나므로 크기와 해상도가 균일한 사진을 사용하지 않는 한 모두 다를 수 있습니다. 아래 스크린 샷은 이에 대한 예입니다. 하나는 완벽하게 정사각형이고 다음은 더 작은 정사각형이며 마지막은 직사각형입니다.

3. 여러 장치에서 테스트합니다.

  • PC 화면
  • 태블릿
  • 모바일

4. 저장하고 발행

결제

외모 -> 사용자 정의 -> 우커머스 -> 결제

결제 설정

이제 수집하려는 데이터에 따라 필수 또는 선택 사항을 설정할 수 있습니다. 별표를 사용하여 필수 필드를 강조 표시하도록 선택할 수도 있습니다.

개인 정보 보호 정책 및 이용 약관 페이지를 생성한 다음 여기에서 설정할 수 있습니다. 입력한 텍스트와 함께 연결되며 다음과 같이 결제 페이지에 표시됩니다.

개인정보 보호 이용약관

“개인 정보 보호 정책” 링크는 새 창에서 페이지를 열고 “이용 약관” 링크는 이용 약관 페이지의 내용을 보여주는 페이지의 상자를 엽니다. 필수 이용 약관 상자를 선택하지 않으면 주문할 수 없습니다.

자주 묻는 질문

우커머스 커스터마이저를 찾을 수 없습니다.

WooCommerce 3.3x 이상을 사용하는 상점은 외모 -> 사용자 정의 -> 우커머스에서 이 옵션을 사용할 수 있습니다.

3.3.0 이전 버전의 WooCommerce를 사용하는 상점은 우커머스 -> 설정 -> 상품 -> 디스플레이 섹션에서 상점 공지 및 제품 이미지를 볼 수 있습니다.

새롭고 향상된 기능을 활용하려면 최신 버전의 WooCommerce로 업데이트하는 것이 좋습니다.

Regenerate Thumbnails 플러그인을 계속 사용할 수 있습니까?

그낭합니다, 하지만 WooCommerce 3.3.0 이상에서는 필요하지 않습니다. WooCommerce가 미리보기 이미지 및 제품 카탈로그 이미지의 크기를 자동으로 조정하고 자동 업데이트합니다.

우커머스 -> 상태 -> 도구에서 상점 미리보기 이미지 재생성 옵션을 사용할 수도 있습니다.

원문: https://docs.woocommerce.com/document/woocommerce-customizer/

코멘트 제출

Don`t copy text!