WooCommerce 라이트박스를 만드는 방법

소비자가 온라인 쇼핑을 할 때 직면하는 가장 큰 장애물 중 하나는 제품 정보를 빠르게 찾는 것입니다. 실제로 Forrester 보고서에 따르면 미국 온라인 성인의 45%는 질문에 대한 빠른 답변을 찾을 수 없는 경우 온라인 구매를 포기합니다 .

온라인 스토어에 빠른 보기 기능이 있는 WooCommerce 라이트박스를 추가하면 원활한 사용자 흐름을 만들고 고객에게 원활한 온라인 쇼핑 경험을 제공할 수 있습니다. 즉, 고객은 단일 제품 페이지를 클릭하지 않고도 제품, 제품 세부 정보, 가격 정보 등 필요한 모든 것을 찾을 수 있습니다.

이 기사에서는 온라인 상점에서 WooCommerce 라이트박스 플러그인 사용을 고려하는 이유에 대해 자세히 알아보겠습니다. 또한 간단한 4단계로 빠르게 볼 수 있는 WooCommerce 라이트박스를 만드는 방법을 보여주는 단계별 자습서를 안내합니다.

시작하자!

WooCommerce 라이트박스 플러그인이 필요한 이유

WooCommerce 매장 소유자는 고객이 각 제품에 대해 자세히 알아보기 위해 개별 제품 페이지를 방문해야 한다는 것을 이미 알고 있을 것입니다. 그러나 이것이 항상 직관적이고 사용자 친화적인 쇼핑 경험을 제공하는 것은 아닙니다.

WooCommerce 라이트박스 플러그인을 사용하면 고객이 다음을 수행할 수 있습니다.

• 라이트박스에서 제품 이미지, 갤러리 및 세부 정보를 봅니다.
• 제품 옵션(예: 변형 및 수량)을 선택하고 장바구니에 추가합니다.

그리고 가장 좋은 점은 이 모든 작업을 기본 상점 페이지 또는 카테고리 페이지에서 직접 수행할 수 있다는 것입니다. 제품 이미지 또는 갤러리, 변형 및 속성, 수량 선택기, 장바구니에 추가 버튼과 같은 정보와 가격, 리뷰 및 카테고리와 같은 추가 제품 세부 정보를 포함하도록 선택할 수 있습니다.

기본 WooCommerce 사용자 흐름과 달리 갤러리 기능이 있는 WooCommerce 라이트박스 플러그인을 사용하면 고객의 온라인 쇼핑 경험을 개선할 수 있습니다. 제품 이미지와 갤러리를 보다 쉽게 ​​보고 모든 중요한 WooCommerce 제품 세부 정보를 빠르게 찾을 수 있습니다. 이것은 옷, 보석, 사진 또는 선물 품목과 같은 이미지 중심 제품을 판매하는 온라인 상점에 특히 유용합니다.

다음은 플러그인을 사용하여 빠른 보기 기능이 있는 라이트박스를 만드는 주요 이점입니다.

• php 파일을 수정할 필요가 없습니다. 플러그인을 설치하고 활성화하면 자동으로 빠른 보기 라이트박스가 생성됩니다. functions.php 파일을 편집할 필요가 없습니다.
• CSS를 사용한 사용자 정의 스타일. CSS 파일을 편집할 필요 없이 브랜드에 맞게 라이트박스를 맞춤설정할 수 있습니다.
• 지원하다. 또한 플러그인 개발자(예: Barn2 Media)의 고객 지원에 액세스할 수 있습니다.

WooCommerce Quick View Pro를 사용하여 빠른 보기 라이트박스를 만드는 방법

빠른 보기 기능이 있는 WooCommerce 라이트박스를 만드는 데 필요한 사항은 다음과 같습니다.

• 일부 제품이 추가된 WooCommerce 기반 상점.
• WooCommerce Quick View Pro — 반응형 WooCommerce 라이트박스 플러그인.

1단계: WooCommerce Quick View Pro 설치 및 활성화

WooCommerce Quick View Pro 플러그인을 구입했으면 WordPress 웹사이트에 로그인하여 설치하고 활성화합니다. 그런 다음 WordPress 대시보드에서 플러그인 설정 페이지( WooCommerce > 설정 > 제품 > 빠른 보기 )로 이동합니다.

라이선스 키 옵션에 구매 확인 이메일로 받은 라이선스 키를 입력하세요. 화면 하단의 변경 사항 저장 버튼을 클릭하여 계속 진행합니다.

온라인 상점의 기본 상점 페이지를 방문하면 제품 이미지 바로 아래에 빠른 보기 버튼이 추가된 것을 알 수 있습니다. 사용 중인 테마에 따라 다음과 같이 보일 수 있습니다.

그리고 그것을 클릭하면 제품의 이미지, 갤러리, 이름, 가격, 설명, SKU 및 카테고리를 표시하는 WooCommerce 라이트박스가 시작됩니다.

2단계: 고객이 WooCommerce 라이트박스를 시작하는 방법 선택

WooCommerce Quick View Pro를 사용하면 고객이 제품 라이트박스를 실행하는 방법을 선택할 수 있습니다. WooCommerce > 설정 > 제품 > 빠른 보기 로 다시 이동하여 옵션 섹션을 찾으십시오.

다음 중 하나를 통해 고객이 라이트박스를 실행하도록 할 수 있습니다.

• 상점에 빠른 보기 버튼을 표시합니다. 각 제품 이미지 바로 아래에 있는 빠른 보기 버튼을 클릭합니다. 버튼 텍스트를 변경하고 버튼 아이콘을 표시하거나 숨길 수도 있습니다.
• 샵에서 상품명이나 이미지를 클릭하여 퀵뷰를 엽니다. 상품명이나 이미지를 클릭하시면 됩니다.

옵션 중 하나 또는 둘 다를 활성화하도록 선택할 수 있습니다! 또한 기본적으로 제품 이름이나 이미지를 클릭하면 고객이 단일 제품 페이지로 연결된다는 점을 기억하는 것도 중요합니다. 제품 이름 또는 상점 이미지를 클릭하여 빠른 보기 열기를 활성화하면 이 옵션을 비활성화할 수 있습니다.

3단계: 라이트박스에 제품 이미지 표시(빠른 보기 사용)

WooCommerce Quick View Pro가 제공하는 깔끔한 기능 중 하나는 라이트박스에 표시할 항목을 선택할 수 있다는 것입니다.

• 이미지 중심 제품. 이미지 중심 제품(예: 옷, 신발 또는 보석류)을 판매하는 경우 고객이 이미지 확대/축소를 사용하여 라이트박스에서 제품 이미지와 갤러리를 볼 수 있도록 하고 싶을 것입니다.
• 사양 및 세부 정보가 있는 제품. 도매 제품, 컴퓨터 부품 또는 음악을 판매하는 경우 라이트박스에 제품 세부 정보만 표시할 수 있습니다.
• 맞춤형 제품. 맞춤형 제품이나 변형이 있는 제품을 판매하는 경우 라이트박스에 제품 이미지와 세부정보를 모두 표시하고 싶을 것입니다.

플러그인의 설정 화면에서 빠른 보기 표시 옵션을 찾아 라이트박스 보기에 이미지만 , 제품 세부정보만 또는 이미지 및 제품 세부정보 를 표시할지 여부를 결정합니다.

예를 들어 제품 세부 정보만 표시하기로 결정한 경우 WooCommerce 라이트박스는 다음과 같을 수 있습니다.

그리고 라이트박스에 이미지를 표시하기로 결정했다면 이미지를 썸네일 또는 글머리 기호 로 표시하도록 선택할 수도 있습니다. 갤러리 썸네일 스타일 옵션을 글머리 기호 로 설정하여 이미지와 제품 세부 정보를 모두 표시한 경우 WooCommerce 라이트박스는 다음과 같습니다.

참고: 제품 갤러리를 표시하려면 제품의 제품 편집 화면에서 제품 갤러리에 이미지를 추가해야 합니다. 여러 이미지를 표시하려는 각 WooCommerce 제품에 대해 이 작업을 수행할 수 있습니다.

4단계: 표시할 제품 세부정보 결정

WooCommerce 라이트박스에 제품 세부정보(또는 이미지 및 제품 세부정보)를 표시하도록 선택하면 빠른 보기 라이트박스에 포함할 제품 세부정보를 결정할 수도 있습니다.

플러그인 설정 페이지에서 제품 세부 정보 옵션을 사용하여 라이트박스에 표시할 제품 세부 정보를 선택할 수 있습니다.

• 리뷰
• 가격
• 간단한 설명
• 장바구니에 담기 버튼
• 메타 정보(예: SKU 및 카테고리)

예를 들어 구매 옵션을 표시하지 않으려면 장바구니에 추가 버튼 확인란을 선택하지 않은 상태로 둡니다. WooCommerce 라이트박스는 다음과 같습니다.

결론

빠른 보기가 포함된 WooCommerce 라이트박스를 통해 고객은 다음을 수행할 수 있습니다.

• 원하는 제품 세부 정보를 빠르게 찾으십시오.
• 제품 이미지 보기
• 변형 선택
• 장바구니에 제품 추가

… 먼저 단일 제품 페이지를 방문하지 않고도.

WooCommerce Quick View Pro를 사용하면 사용자가 주요 쇼핑 페이지 및 카테고리 페이지에 빠른 보기 기능이 있는 라이트박스를 추가할 수 있습니다. 또한 라이트박스의 모양과 느낌, 그리고 고객이 라이트박스와 상호 작용하는 방식을 쉽게 사용자 지정할 수 있습니다.

빠른 보기 기능이 있는 WooCommerce 라이트박스가 고객의 온라인 쇼핑 경험을 향상시킨다는 데 동의하십니까? 아래 의견 섹션에서 생각을 공유하십시오!