우커머스 상품 이미지 확대 라이트박스 기능 비활성화

0

워드프레스 우커머스(WooCommerce) 쇼핑몰에서 상품 페이지의 상품 이미지에 마우스를 올리면 썸네일 이미지가 확대되고 클릭하면 라이트박스로 표시됩니다. 상품 이미지 확대 기능과 라이트박스 기능을 비활성화하고 싶은 경우 간단한 코드를 추가하거나 플러그인을 사용할 수 있습니다.

우커머스 상품 이미지 확대 라이트박스 기능 비활성화

우커머스 상품 페이지의 제품 이미지 위에 마우스를 올리면 이미지가 확대(줌)되고 클릭하면 라이트박스로 표시됩니다. 다음은 베스트셀링 아바다 테마에서 상품 이미지를 클릭할 때 라이트박스로 표시되는 것을 보여줍니다.

우커머스 상품 이미지 확대 라이트박스 기능 비활성화

이런 효과는 테마에 따라 조금씩 차이가 있습니다.😄

상품 페이지의 이미지에 마우스를 올릴 때 이미지가 확대되는 기능이나 상품 이미지를 클릭할 때 팝업으로 라이트박스 이미지가 보여지는 효과를 원치 않는 경우 몇 가지 방법으로 비활성화할 수 있습니다.

코드를 사용하여 상품 이미지의 Zoom 또는 Lightbox 기능 비활성화하기

코드를 사용하여 우커머스 상품 이미지의 확대(Zoom) 기능과 라이트박스 효과를 제거하는 방법에 대하여 GeneratePress 테마의 포럼 게시글 "Remove zoom effect on WooCommerce product image"에 소개되어 있습니다.

테마의 함수 파일(차일드 테마를 만들어 작업하세요)에 다음 코드를 추가하면 WooCommerce 상품 이미지의 줌(Zoom) 효과가 제거됩니다. FTP에 접속하여 /wp-content/themes/활성화된-테마-이름/functions.php 파일에 입력할 수 있습니다.

function remove_image_zoom_support() {
    remove_theme_support( 'wc-product-gallery-zoom' );
}
add_action( 'wp', 'remove_image_zoom_support', 100 );

그리고 다음 CSS 코드를 모양 » 사용자 정의 » 추가 CSS에 추가하면 상품 갤러리 이미지가 클릭이 되지 않도록 하여 라이트박스 기능이 작동하지 않습니다.

.woocommerce-product-gallery__image.flex-active-slide {
    pointer-events: none !important;
}

위의 CSS 코드가 Avada 테마에서 잘 작동했습니다. 만약 위의 코드가 작동하지 않는 경우 다음과 같은 CSS 코드로도 테스트해보시기 바랍니다.

.woocommerce-product-gallery .flex-viewport {
    pointer-events: none;
}

별도의 플러그인을 사용하지 않고 상품 이미지 확대 효과나 라이트박스 기능을 비활성화하려는 경우에 유용합니다.

Product Gallery Slider 플러그인 사용하기

우커머스 상품 이미지의 확대 및 라이트박스 기능을 제거할 수 있는 플러그인으로 Product Gallery Slider for WooCommerce가 있습니다.

우커머스 상품 이미지 확대 라이트박스 기능 비활성화 플러그인

이 플러그인은 현재 2만 개가 조금 넘는 사이트에 설치되어 사용되고 있으며 무료 버전과 유료 버전이 있습니다.

무료 버전에서는 다음과 같은 주요 기능을 제공합니다.

  • 반응형 레이아웃
  • 내비게이션 지원
  • 슬라이더 자동 재생 설정
  • 갤러리 레이아웃 [가로 슬라이더]
  • 각 상품 옵션별로 무제한 이미지 추가 가능
  • 썸네일 표시 개수 설정
  • 무한 루프(반복) 옵션
  • 슬라이드 높이 자동 조절
  • 마우스 드래그 기능
  • 썸네일 이미지 라이트박스 설정 활성화/비활성화(On/Off)
  • 우커머스 이미지 확대 설정 활성화/비활성화(On/Off)
  • 라이트박스 이미지 캡션 설정 활성화/비활성화(On/Off)
  • 갤러리 이미지 맞춤 크기 설정
  • CSS 커스텀 코드 적용 가능
  • 숏코드 지원 (커스텀 상품 페이지 빌더에서 쉽게 사용 가능)
  • 엘리멘터, Divi, 비주얼 컴포저 페이지 빌더 지원
  • 대부분의 프리미엄 테마와 호환
  • RTL 언어(예: 아랍어 등) 지원

이 플러그인을 플러그인 » 플러그인 추가에서 검색하여 설치하고 활성화하였다면 Codeixer » Product Gallery » Zoom Options에서 상품 이미지의 Zoom(확대/축소) 기능을 제어할 수 있습니다. Zoom을 OFF로 설정하면 이미지 확대 기능이 비활성화됩니다.

우커머스 제품 이미지 확대 비활성화

마찬가지로 Codeixer » Product Gallery » Lightbox Options에서 상품 이미지의 라이트박스 기능을 제어할 수 있습니다.

우커머스 제품 갤러리 라이트박스 기능 비활성화

Image Lightbox 옵션을 OFF로 설정하면 상품 이미지 라이트박스 기능이 제거됩니다. 아바다 테마에서 테스트하니 잘 작동하네요.😄

플러그인을 사용하면 편리하게 이미지 확대 기능과 라이트박스 기능을 비활성화할 수 있고, 이외에 다양한 기능을 이용할 수 있습니다. 하지만 플러그인을 사용할 경우 다른 플러그인과 충돌 가능성이 있고 사이트 속도에도 약간의 영향을 미칠 수 있으므로, 가급적 플러그인 사용을 최소화하는 것이 바람직합니다.

참고

댓글 남기기

댓글 남기기