쇼핑몰 상품 정보에 사용자 정의 필드(Custom Field) 정보 표현하기

| Updated

이전 글에서 ACF 플러그인을 이용해서 사용자 정의 필드(Custom Field)를 만드는 방법에 대해서 알아보았습니다.

쇼핑몰에 사용자 정의 필드(Custom Field) 추가하기

다음으로는 이렇게 만든 사용자 정의 필드를 쇼핑몰의 상품 정보란에 표현하는 방법에 대해서 살펴봅니다.

1. 기본 접근 방법

사용자 정의 필드를 표현하는 방식은 다양합니다. 개발자들은 굉장히 복잡한 코드를 사용해 이 사용자 정의 필드(Custom Field)를 표현하기도 하는데요.

개발자가 아니고 아주 상식적인 선에서 워드프레스와 우커머스를 이해하고 있는 입장에서 그러한 접근은 머리만 아플 뿐이죠.

그래서 제가 찾은 방식은 워드프레스에서 많이 사용하는 hook을 이용하는 방법입니다.

우커머스에 정보를 입력한 hook 위치를 파악하고 여기에 정보를 표시토록하는 snippet을 작성하는 것이죠.

2. 우커머스 상품 섹션의 hook

그러므로 우선 우커머스 single product에 존재하는 hook에는 어떤 것이 있는지 확인해 봅니다.

Single product hook에 대한 정보는 Business Bloomer에서 소개하는 WooCommerce Visual Hook Guide를 참조하면 될 것 같습니다.

WooCommerce Visual Hook Guide: Single Product Page

여기에 따르면 아래와 같이 다양한 훅(hook)을 발견할 수 있습니다.

쇼핑몰 상품 정보에 사용자 정의 필드(Custom Field) 정보 표현하기 1

3. snippet 작성하기

위에서 적절하게 정보를 입력할 위치를 찾는데요. 저는 상품에 대한 짧은 설명이 끝나는 지점에 위치하는 woocommerce_before_add_to_cart_form을 선택했습니다.

이 hook에 정보가 출력되도록 snippet을 작성합니다. 제가 골프장 기본 정보를 출력토록 만든 snippet이니 참고하세요.

add_action( 'woocommerce_before_add_to_cart_form', 'display_acf_field_before_add_to_cart_form', 30 ); function display_acf_field_before_add_to_cart_form() { echo '<h4> 골프장 기본 정보 </h4>'; echo '<p>홀수(Halls) : ' . get_field('golf_halls') ; echo '<p>파(Par) : ' . get_field('golf_par') ; echo '<p>거리(Length) : ' . get_field('golf_length') ; echo '<p>슬로프(Slope) : ' . get_field('golf_slope') ; // Note: 'golf_halls'은 ACF에서 설정한 필드 이름입니다. }

이러한 snippet을 차이드테마의 functions.php나 mu-plugins에 추가합니다.

그러면 아래 이미지와 같으 모습으로 상품란에서 관련 정보가 추가되는 것을 알 수 있습니다.

쇼핑몰 상품 정보에 사용자 정의 필드(Custom Field) 정보 표현하기 2

제가 보기에 이 방법에 우커머스 상품 정보란에 사용자 정의 필드를 추가해 보여주는 가장 쉬운 방법으로 보입니다.

서울에 생긴 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