우커머스 상품 설명 고정 상태에서 이미지 스크롤가능한 상품 레이아웃 만들기

| Updated

우커머스 상품을 매력적으로 보여주는 방법 중의 하나는 상품 이미지를 멋지게 보여주는 것이죠.

최근 상품 페이지에서 이미지를 하나 하나 클릭해서 보여주지 않고 연달아 보여주되 상품 설명부는 고정시키는 레이아웃이 좋은 반응을 얻고 있습니다.

아래 shopkeeper라는 쇼핑몰 전용 우커머스 테마의 Product Layout인데요. 패션 상품의 경우 상품 설명에 괜찮은 레이아웃으로 보이네요.

Shopkeeper 테마의 Product Layout 2

상품 설명 고정한 상태에서 이미지 스크롤 가능한 상품 레이아웃

GeneratePress 테마에서 구현하기

generatePress 테마에서도 이와 비슷하게 상품 레이아웃을 구현할 수 있습니다. 제가 테스트해보니 아직 디자인적으로 더 가다듬어야 하겠지만 …

여기서는 GeneratePress에서 소개하고 있는 방법을 소개합니다.

코드만들기

우선 우커머스 상품 페이지에서 상품 설명부를 고정한채 이미지를 스크롤할 수 있는 코드를 만듭니다.

<div class="woo-gallery-stack hide-on-mobile"> <?php if ( has_post_thumbnail( $product->id ) ) { $attachment_ids[0] = get_post_thumbnail_id( $product->id ); $attachment = wp_get_attachment_image_src($attachment_ids[0], 'full' ); ?> <img src="<?php echo $attachment[0] ; ?>"/> <?php } global $product; $product_image_ids = $product->get_gallery_image_ids(); foreach( $product_image_ids as $product_image_id ) { $image_url = wp_get_attachment_url( $product_image_id ); echo '<img src="'.$image_url.'">'; }?> </div>

GeneratePress 테마의 Hook Element 생성

그 다음으로 GeneratePress 테마의 Hook Element 생성합니다.

  • 위에서 만든 코드를 추가합니다.
  • Hook은 ” woocommerce_before_single_product_summary “를 선택합니다.
  • PHP 실행에 체크합니다.
  • 디스플레이 규칙에 모든 상품을 선택합니다. 이는 선택적으로 상품 카테고리등을 제한할 수도 있겠죠.

CSS 코드 추가

커스텀 CSS를 추가하는 곳에 아래 CSS 코드를 추가합니다.

@media (min-width: 768px) { .woocommerce-product-gallery { display: none; } .woo-gallery-stack { width: 50%; /* adjust % to match container layout */ float: left; } .woocommerce div.product div.summary { position: -webkit-sticky; position: sticky; top: 60px; /* Adjust vertical position of sticky summary */ } .single-product div.product .woocommerce-tabs, .single-product div.product .related.products, .single-product div.product .upsells.products { width: 50%; /* match width of gallery stack */ display: inline-block; } }

서울에 생긴 Vultr 서버 100$ 프로모션 안내

안녕하세요?
새로운 사이트 구축을 위한 신규 서버를 고민하신다면 , 서울 리젼이 생겨 더욱 빨라진 Vultr 서버를 Vultr 100$ 프로모션으로 이용해 보세요.

아래 프로모션 코드 링크를 통해 Vultr에서 서버 구축 후 1달 이상 사용 및 $25이상 결제 時 추가 100$을 주는 프로모션을 진행 中입니다.

아래 이미지를 클릭해 등록할 수 있습니다.

Vultr는 서울에도 리젼이 있어 매우 빠르고, 아마존 웹 서비스(AWS)보다 성능이 높으며 가장 가성비가 뛰어납니다.

거기다 사용자 UI도 좋고, 15개까지 스냅샷을 무료로 제공하기 때문에 관리하기 좋습니다. 그리고 지금 100$ 프로모션처럼 가격적인 메리트도 있습니다.

저는 2016년부터 Vultr 서버를 사용했는데요. 지금까지 잘 사용해 오고 있습니다. 아래 사용기도 참고해 보세요.

도쿄 리젼과 비교해 본 Vultr 서울 리젼 사용기

가성비가 뛰어난 Vultr 가상서버호스팅(클라우드호스팅,VPS) 사용기

Vultr 가상서버호스팅의 새상품 High Frequency 사용기

가상 서버를 운영하고픈 勇者에게 전하는 가상 서버 운영 입문 노하우 – Vultr 가상서버호스팅(VPS)를 중심으로

해외 가상서버호스팅(VPS)이 국내 호스팅보다 빠르다? – 아이비호스팅과 해외 가상서버호스팅 VULTR간 비교

사이트 운영을 위한 안내 – 웹서버 세팅에서 워드프레스 설치까지(우분투 17.10, NGINX 1.13.6, Marian DB 10.2, PHP7.2)

워드프레스 최적화를 위한 18개월간의 고민, 그 노하우를 담다.

Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments