쇼핑몰 따라하기는 커스텀 DIY쇼핑몰을 제작하는 방법을 쉽게 따라하실 수 있도록 도움을 드리는 가이드 입니다. 본 가이드에서는 워드프레스(WordPress) + 우커머스(WooCommerce)를 사용한 커스텀 쇼핑몰 제작을 설명합니다. 반복적으로 커스텀이라는 단어를 사용하는 이유는 워드프레스(WordPress) + 우커머스(WooCommerce) 조합으로 쇼핑몰을 제작하면 기능이나 디자인을 여러분의 비지니스 환경에 맞도록 커스터마이징이 가능하기 때문입니다. 쇼핑몰을 시작하면서 최소한의 비용으로 멋진 쇼핑몰을 만드는 가장 적합한 방법입니다.
본 가이드에서는 , Flatsome 이라는 디자인테마를 사용하고 있습니다. 본 DIY가이드를 진행 하시기 위해서는 Flatsome 디자인테마를 구입하셔야 합니다. 물론, 우커머스 쇼핑몰을 만들기 위한 무료 디자인테마도 있습니다. 그러나, 멋진 기능과 디자인을 적용하기 위해서는 수많은 유료 플러그인을 별도로 설치해야합니다. Flatsome은 이런 기능과 디자인을 이미 충분히 가지고 있기 때문에 실제로 쇼핑몰을 제작하는 시간과 비용을 Save하도록 해줍니다.
또한, 아래와 같이 최고의 웹디자이너들이 미리 만들어 놓은 15개의 멋진 디자인 중 하나를 선택해서 시작할 수 있고, 나중에 다른 디자인으로 변경도 가능합니다.
각각의 디자인을 클릭 해보면 Live 웹사이트를 보실 수 있습니다.
Contents
웹호스팅 및 도메인
Flatsome 디자인테마 구입 및 설치
Flatsome 디자인테마 설정 (Setup wizard)
우커머스(WooCommerce) Quick Setup
우커머스(WooCommerce) 상세설정
상품등록
페이지 만들기.
메뉴 만들기
쇼핑몰 헤더(Header) 및 푸터(Footer)
쇼핑몰 프론트 페이지 디자인
상품진열 페이지 디자인
상품상세 페이지 디자인
마케팅관련 플러그인 설치
쇼핑몰 Launch
1.웹호스팅 및 도메인이름
웹호스팅 이란?
웹사이트를 운영하기 위해서는 웹사이트가 운영될 서버, 사용자들의 접속을 감당할만한 네트워크, 데이터 센터 (서버와 네트워크가 있을장소)가 필요합니다. 그러나, 이러한 환경을 모두 갖추기 위해서는 많은 비용이 들어가기 때문에 개인이나 스몰비지니스가 감당하기가 어렵습니다. 그래서 이러한 환경을 모두 갖춘 웹호스팅 회사에서 저렴한 월 비용만 지불하고 웹호스팅 서비스를 받게 됩니다. 특희, 쇼핑몰의 경우는 사용자의 민감한 개인정보를 다루기 때문에 일반 웹호스팅 보다는 보다 안전하고 속도가 빠른 웹호스팅이 필요합니다.
도메인(Domain)이름 이란?
웹사이트를 인터넷에서 구별하는 이름입니다. 흔희 URL 이라고도 얘기하는 경우가 있습니다. 예를들어 GOOGLE.COM AMAZON.COM, DAUM.NET 등이 있습니다. 도메인 이름은 보통 1년 단위로 도메인 등록 회사에서 임대해서 사용하게 됩니다.
웹호스팅 구입 및 설정하기 (도메인 이름 설정 포함)
우커머스 쇼핑몰을 제작 할 때 웹호스팅의 선택은 아주 중요합니다. 가능하면 워드프레스와 우커머스에서 공식적으로 권장하는 웹호스팅 회사를 선택하시는 것이 좋습니다. 왜냐하면 워드프레스와 우커머스를 운영하기 위해서는 권장되는 특정한 서버 사양이 있습니다. 이런 서버 권장 사양을 만족 하고 또, 워드프레스와 우커머스의 지속적인 업데이트 패치들을 적용해 주어야 합니다. 이런 내용들을 신경쓰지않으면 속도저하, 웹사이트 다운, 해킹 및 Malware 감염등의 피해를 입을 수 있습니다. 워드프레스와 우커머스에서 권장하는 웹호스팅 회사들은 이런 내용들을 별도로 신경쓰지 않아도 웹호스팅 회사에서 자체적으로 이런 부분을 모두 지원해줍니다.
워드프레스 웹호스팅 선택하기를 참조하셔서 웹호스팅 회사를 선택 하시기 바랍니다. 만약 내용을 잘 이해하시기 힘드시면 저희가 가장 우선적으로 권장 하는 사이트그라운드를 가지고 시작을 하시면 웹호스팅 회사 선택의 스트레스를 줄이 실 수 있을 것입니다. 자세한 내용은 사이트그라운드 장점 및 구입, 설정 방법을 참조하세요.
2. Flatsome 디자인테마 구입/설치
1) Flatsome 디자인 테마 구입하기
본 가이드에서는 쇼핑몰 제작시 가장 많이 사용되는 Flatsome 디자인테마를 사용합니다. 다음의 링크를 참조하셔서 다음 단계를 진행 하기 전에 구입을 하시기 바랍니다. (이미 Flatsome 디자인테마를 가지고 계시면 별도로 구입하실 필요가 없습니다.)
먼저 워드프레스 관리자 화면으로 로그인 합니다. 워드프레스 관리자 주소(URL)는 원래 웹사이트 주소 뒤에 “/wp-admin”을 붙여주면 됩니다. 예를들어 웹사이트 주소가 “MYDOMAIN.COM” 이라면 다음과 같이 해주시면 됩니다. 관리자주소 URL )MYDOMAIN.COM/wp-admin, “/wp-admin”는 반드시 소문자로 입력하셔야 합니다.인터넷 브라우져에서 위와 같이 주소(URL)를 입력하고 이동하면 아래 화면이 나타 납니다.
아래 화면에서 Username or Email Address 에 관리자 아이디 혹은 이메일을 입력 하시고, Password란에 패스워드를 입력하신 후 Log In 버튼을 클릭 합니다.
Flatsome 디자인테마를 설치하기 위해서 Appearance > Themes 화면으로 이동 합니다.
아래 화면과 같이 Add New 버튼을 클릭 합니다.
아래 화면과 같이 Flatsome 설치 화일을 업로드하기 위해서 ‘Upload Theme‘을 클릭 합니다.
아래 화면과 같이
(1) Flatsome 설치화일을 업로드 하기 위해서 ‘Choose File‘을 클릭합니다.
(2) 본인이 Flatsome 디자인테마를 구입 후 다운로드 받은 폴더를 선택 합니다. 거기서 설치 화일을 찾아서 선택해 줍니다.
(3) ‘Install Now’를 클릭 합니다.
아래 그림과 같이 ‘Activate’를 클릭합니다
3. Flatsome 디자인테마 설정 (Setup wizard)
아래 그림과 같이 Flatsome의 Welcome 화면이 나타납니다.
여기서 Setup wizard for Flatsome 과정이 시작됩니다. 이 과정을 지금 생략하고 나중에 해도 됩니다. 그럴경우는 아래와 같이 ‘Not right now‘를 클릭하세요. 여기서는 ‘Let’s Go!’를 클릭하세요.
아래 그림과 같이 Purchase code를 입력하고 ‘Active’를 클릭합니다. ( Purchase code를 찾는 방법은 이어지는 2개의 화면을 참조하세요)
Flatsome 디자인테마를 구입하신 ThemeForest.net으로 로그인 합니다. 구입하신 Flatsome 다운로드 페이지로 이동합니다. 4가지 다운로드 옵션중 가장 아래에 있는 ‘License certificate & purchase code (text)‘를 다운로드 합니다.
다운로드받은 ‘License certificate & purchase code (text)‘를 오픈합니다. 아래 그림처럼 화면 하단에서 ‘Item Purchase Code‘를 확인 할 수 있습니다.
다음화면은 ‘Child Theme‘을 설치하는 과정 입니다. 여기서는 ‘Skip this step‘을 클릭합니다.
Child Theme 이란?
Child Theme은 디자인테마의 복사본이라고 생각 하시면 됩니다. 그러나, 실제로는 원본 디자인테마의 위치만을 가지고 있는 것입니다. 즉, 디자인테마의 특정 부분의 소스코드를 수정할 필요가 있을때 원본 소스코드는 그대로 보존 하면서 원하는 부분의 소스코드만을 변경하는 것입니다. 설명이 조금 복잡 할 수 있지만, 소스코드를 수정할 필요가 있을때만 사용한다고 생각하시면 간단합니다. 본 가이드에서는 Child Theme을 사용하지 않습니다.
아래 화면처럼 필수 플러그인 설치 화면이 나타납니다.
‘Continue‘를 클릭 합니다. 설치되는데 시간이 조금 걸립니다.
이전 화면에서 필수 플러그인 설치 과정이 끝나면 ‘Demo Contents‘를 설치하는 화면이 나타납니다. Demo Contents를 설치하기 위해서, 모두 체크를 하고 ‘Continue’를 클릭 합니다.
Demo Contents란?
디자인테마를 구입한 후 설치를 해보면 판매할때 SAMPLE로 보여 주었던 웹사이트와 차이가 나서 당황할 수 있습니다. Sample 웹사이트는 Demo Contents가 설치된 상태로 보여지게 됩니다. 따라서, 여러분도 Demo Contents를 설치한 후에 본인의 비지니스에 맞도록 뺄것은 빼고, 수정할 것은 수정하는 방식으로 작업을 진행 하시는것이 훨씬 쉽습니다.
Demo Contents가 설치된 후에는 Logo를 업로드 하는 화면이 나타납니다. 또한, 화면 중앙에 보면 이미 만들어진 쇼핑몰 디자인중 하나를 선택할 수 있습니다.
로고를 업로드 후 ‘Continue’를 클릭 합니다. (로고의 이미지 사이즈는 가로395px X 세로 84PX입니다).
여기까지 Flatsome 디자인테마의 기본설정 완료됬습니다. ‘Agree and Continue’를 클릭 합니다.
이제 Flatsome 디자인테마의 설치와 셑업이 완료됬습니다.
아래 그림처럼 ‘Setup WooCommerce‘ 를 클릭해서 WooCommerce Quick Setup으로 이동합니다.
여기까지 진행 후 실제로 웹사이트를 보면 아래 화면과 같습니다. 보시는 바와 같이 이미 쇼핑몰의 기본틀을 모두 갖추고 있습니다.
4. 우커머스(WooCommerce) Quick Setup
위 화면에서 ‘Setup WooCommerce‘를 클릭하면 아래 화면과 같이 WooCommerce Quick Setup화면이 나타납니다. ‘Lets Go!‘를 클릭 합니다.
아래는 WooCommerce Default 페이지들을 설치하는 화면 입니다. ‘Continue‘를 클릭 합니다.
사업장 위치 및 상품부피 측정 단위를 입력한 후 ‘Continue‘를 클릭합니다. (아래 예제는 미국에 사업장이 있는 경우 입니다)
Shipping & Tax는 조금씩 다를수 있으니 여기서는 ‘Skip this step‘을 클릭합니다. (향후에 우커머스(WooCommerce)설정에서 본인의 비지니스 환경에 맞도록 설정합니다)
아래 화면은 결제관련 세팅 화면 입니다. PayPal Standard 의 경우는 사용료가 무료입니다. 단, 매 주문건당 Fee가 발생 합니다. 미국에 사업장이 있는 경우 PayPal Transaction Fee 를 참조하세요. PayPal 이메일만 입력한 후 ‘Continue‘를 클릭하세요.
여기까지 진행이 되셨으면 ‘WooCommerce Quick Setup‘이 완료된 것입니다. 아래 그림과 같이 ‘Create your first products!‘를 클릭하면 바로 상품을 입력하실 수 있습니다.
대부분의 쇼핑몰들은 공통적으로 가지고 있는 페이지들이 있습니다.
쇼핑몰에 따라서 추가적인 페이지가 더 있을 수는 있지만, 일반적으로 About us, Contact us, FAQ, Terms & Condition등의 페이지는 꼭 필요한 페이지들이라 할 수 있습니다.
About (us) : 우리 쇼핑몰에 대한 소개를 제공하는 페이지 입니다. 보통 고객들은 About (us) 페이지를 보고 쇼핑몰의 신뢰성을 판단하기도 합니다. Company 혹은 Who we are 등의 제목을 갖기도 합니다.
Contact (us) : 고객의 문의사항이나 문제해결을 위한 연락 방법을 제공하는 페이지 입니다. 배송이 필요한 상품을 판매한다면 반품(Return)을 받을 주소등이 제공되야 합니다.
FAQ : 배송(Shipping) 혹은 반품(Return), 환불(Refund)등 쇼핑몰 이용시 자주 질문하는 내용들을 모아서 고객에게 편리하게 정보를 제공하도록 하는 페이지 입니다.
Terms & Condition : 쇼핑몰을 운영하는 회사의 내부 정책(Policy)을 보여주는 페이지 입니다. 향후 고객과의 분쟁 발생 시 책임소재등을 따질 때 참고가 되는 페이지 입니다. 보통 쇼핑의 마지막 단계인 결제(Checkout)페이지에서 이러한 T&C를 읽어야만 주문(Order)이 완료 되도록 설정을 해놓습니다.
페이지를 만들기 위해서는 먼저 워드프레스 페이지 만드는 방법을 알아보아야 합니다.
워드프레스는 쉽게 페이지를 만들고 만든 페이지를 헤더(Header)의 메인메뉴(Main Menu) 혹은 푸터(Footer), 사이드바(Sidebar)등에 링크형태로 연결 할 수 있습니다.
페이지 만들기
Pages > Add New 화면으로 이동 합니다.
아래 화면에서 페이지 제목과 내용을 입력합니다. 다음 이어지는 화면들의 이미지 업로드까지 완료되면 ‘Publish를 클릭 합니다. (Tip) 이미지 업로드는 마지막에 하시는 것이 좋습니다. 먼저 글을 입력 하시고 글의 원하는 위치에 마우스를 한번 클릭하시고 이미지업로드를 하시면 이미지의 위치를 설정하기가 수월합니다.
페이지에 이미지 업로드하기. (1) ‘Add Media’ 를 클릭합니다. (2) 오픈되는 창에서 ‘Upload File’을 선택한 후 ‘Select Files’를 클릭 합니다. (3) 원하는 이미지 화일(들)을 선택 합니다. (4)‘Open’ 버튼을 클릭 합니다. (5) ‘Insert into page’ 를 클릭 합니다.
이미지가 업로드 된 후에는 이미지위에 마우스를 한번 만 클릭 합니다. 그러면 아래 화면과 같이 이미지의 위치를 조절하는 옵션이 나타날 것입니다. Left, Right, Top, No align과 같이 4개의 우치 조절 옵션이 있습니다. 연필모양의 아이콘을 클릭하면 이미지를 변경, 사이즈조절, 이미지를 클릭 했을때 링크, 링크가 새창에서 열릴지 현재 창에서 열릴지 등을 설정 가능 합니다.
아래 화면은 이미지를 Left Align으로 했을때입니다. 아래와 같이 그림은 왼쪽으로 글은 오른쪽으로 Align이 잘 맞추어졌습니다. 이렇게 작성이 끝나면 ‘Publish’ (이미 한번 Publish을 했으면 ‘Update’)를 클릭 합니다.
페이지를 메뉴에 연결하기
위에서 만든 페이지는 아직 메뉴에 연결되있지 않기 때문에 사용자가 볼 수가 없습니다. 페이지를 메뉴에 연결하는 방법은 아래와 같습니다.
워드프레스에서 메뉴를 만들고 관리하는 것은 아주 쉽습니다. Drag & Drop 방식으로 쉽게 메뉴의 순서나 계층구조를 변경 가능 합니다. 또한, 페이지, 글, 카테고리, 상품, 상품 카테고리, 특별한 링크등 여러가지 소스를 메뉴에 직접 추가 할 수 있습니다. Appearance > Menus화면으로 이동 합니다.
아래 화면과 같이 조금전에 만든 About us 페이지가 가장 위에 보이는것을 알 수 있습니다. About us 페이지를 체크하고 ‘Add to menu’를 클릭합니다.
기존 메뉴에 새 메뉴 아이템을 추가 하면 기본값으로 메뉴의 가장 아래에 위치하게 됩니다.
아래 화면은 2가지 방식으로 메뉴를 원하는 위치에 이동 시킨 결과 입니다.
Drag & Drop 방식으로 ‘Blog’ 와 ‘Element’ 사이에 위치 시킨후 메뉴를 Save한 결과 입니다.
위와 마찬가지로 Drag & Drop 방식으로 ‘Blog’ 와 ‘Element’ 사이에 위치 시킨면서 조금더 안쪽으로 이동시킨 후 메뉴를 Save한 결과 입니다.
이와 같이 메뉴의 위치를 마음대로 Drag & Drop 방식으로 원하는대로 만들 수 있습니다.
Flatsome UX Builder로 페이지 꾸미기
페이지를 만들 때 보통은 워드프레스에서 기본적으로 제공하는 기본 Editor로 작성을 합니다. 그러나 워드프레스 기본 Editor를 이용해서 페이지를 멋지게 꾸미는 것에는 한계가 있습니다.
그래서 보통 Flatsome과 같은 유료 디자인테마들은 대부분 유료페이지빌더(Visual Composer와 같은) 혹은 자체적으로 개발한 페이지빌더를 제공합니다.
페이지빌더란?
워드프레스 기본 Editor를 사용하지 않고 페이지를 멋지게 꾸밀수 있도록 돕는 도구입니다. 보통은 html, css, javascript등을 이용해서 직접 코딩을 해야하는 디자인 요소들을 코드를 몰라도 쉽게 Drag & Drop 방식으로 적용 가능 하도록 해줍니다.
Flatsome의 경우는 자체적으로 개발한 UX Builder 라는 Drag & Drop 방식의 페이지 빌더를 제공 합니다.
아래는 UX Builder의 자세한 사용 방법관련 동영상 입니다. (계속 진행하시기 전에 아래 동영상을 먼저 보시는것이 다음 단계를 진행하는데 도움이 됩니다)
Pages> All pages 로 이동해서 원하는 페이지를 선택해서 마우스를 페이지 제목위로 가져갑니다. 그러면 ‘Edit’이라는 링크가 나타납니다. ‘Edit’을 클릭합니다.
그러면 아래와 같은 화면이 나타납니다. 아래 화면과 같이 ‘UX Builder’를 클릭 합니다.
아래와 같이 왼쪽에 UX Builder의 컨트롤 판넬이 나타납니다. 현재 오픈된 About us 페이지에는 이전 예제에서 우리가 입력했던 이미지와 텍스트가 포함된 Text라는 Element 하나만 보여질 것 입니다. UX Builder 컨트롤 판넬에 있는 ‘Text’ Element 바로 아래 ‘Add to Content’라는 버튼을 클릭 합니다.
Add to Contents’ 를 클릭하면 아래 화면과 같이 ‘LAYOUT’, ‘CONTENT’, ‘SHOP’ 이라는 사용가능한 기능들이 나열됩니다.
LAYOUT : 웹페이지의 구조를 잡아주는 기능들을 나열합니다. 배너 슬라이더도 기능도 여기에서 사용 가능 합니다.
CONTENT : 웹페이지를 다양하게 꾸며주는 기능들을 선택하실 수 있습니다.
SHOP : 사용 가능한 우커머스 관련 기능들을 보여줍니다.
먼저 LAYOUT 중 하나를 선택 합니다.
아래는 LAYOUT 중 ‘Large Media Left’라는 것을 선택한 경우의화면 입니다. 오른쪽에 Upload Image, Element Add등 2개의 컬럼(Column)이 만들어 진것을 보실 수 있습니다.
‘Upload Image’ 컬럼위에 마우스를 가져가면 왼쪽 위에 ‘Row’라고 표시되면서 우측에 톱니바퀴 아이콘이 나타 납니다. 톱니바퀴 아이콘을 클릭하면 아래 화면과 같이 여러가지 옵션메뉴가 나타 납니다. 그리고 화면 좌측의 UX Builder 컨트롤 판넬에 있는 각각의 톱니바퀴 아이콘들도 클릭을 하면 동일하게 옵션메뉴가 보여집니다.
아래 화면과 같이 ‘Upload Image’를 더블클릭 합니다.
그러면 왼쪽위의 Row 가 Image로 변경 됩니다. (정확히 말하면 Row 안에 들어있는 Column 안의 Image Element로 변경되는 것입니다) Image를 한번만 클릭하면 왼쪽의 UX Builder 컨트롤 판넬이 이미지 설정 화면으로 변경 됩니다. Select Media를 클릭해서 원하는 이미지를 업로드 합니다.
이미지가 업로드되면 이미지 관련 옵션들을 설정 할 수 있습니다. 자세한 설정은 아래 화면의 왼쪽의 이미지 컨트롤 판넬에서 테스트 해보시기 바랍니다.
원하는 설정들을 완료한 후에는 화면 하단 왼쪽의 ‘Apply’를 클릭 합니다.
그러면 왼쪽 컬럼의 이미지 업로드가 완료 됩니다.
이미지 업로드가 왼료되면 텍스트를 입력하기 위해서 오른쪽 컬럼의 + 아이콘을 클릭합니다. (왼쪽의 UX Builder 컨트롤 판넬의 Row 아래에 있는 2번째 Column의 톱니바퀴를 클릭한 후 나오는 메뉴에서 ‘Option’을 클릭해도 됩니다.)
왼쪽 UX Builder 컨트롤 판넬의 CONTENT 중 ‘Text’를 클릭 합니다.
위에서 ‘Text’를 클릭하면 텍스트를 어떤 식으로 구성할 것인지를 미리 정해 놓은 PRESET중 하나를 선택 할 수 있습니다. ‘Apply’를 클릭하기 전까지는 Save가 되지 않기 때문에 하나씩 클릭해서 원하는 PRESET을 찾아서 원하는 것을 선택 합니다. 여기에서는 Paragraph with Headline을 선택 했습니다. 그러면 화면 우측과 같이 가장 윗줄에 Bold Headline이 보이고 그아래 Text가 보이는 형태의 PRESET이 선택 됩니다.
아래 화면과 같이 텍스트를 Element가 나타납니다. 오른쪽의 Text Element를 더블 클릭하거나 왼쪽 UX Builder의 ‘Open Text Editor’을 클릭하면 워드프레스 기본 Editor가 나타납니다. HTML에 익숙하지 않은경우 워드프레스 기본 Editor를 활용해서 텍스트를 입력 합니다.
이제 이미지와 텍스트 입력이 모두 완료 되었습니다. 왼쪽 UX Builder 의 가장 윘쪽에 있는 ‘Text’ Element 는 우리가 UX Builder를 사용하기 전에 워드프레스 기본 Editor로 입력한 자료 입니다. 이 내용은 우리가 방금 만든 자료와 중복이 됩니다. 따라서 삭제를 해야 합니다. 오른쪽의 톱니바퀴를 클릭해서 메뉴가 나타나도록 합니다. 메뉴중 ‘Delete’를 클릭합니다. ‘Update’를 클릭 합니다.
위 과정까지 진행이 완료되면 화면 왼쪽상단의 X 아이콘을 클릭해서 UX Builder를 Close합니다.
현재까지의 작업내용을 Save하기 위해서 반드시 ‘Update’를 클릭해 주세요.
FrontPage에 가서 변경한 사항이 잘 적용 되었는지 확인 합니다. 아래 화면과 같이 잘 적용이 되었습니다.
UX Builder를 통해서 새로운 Row를 추가해서 그것을 2개의 컬럼으로 나누고 컬럼의 PRESET으로 이미지와 텍스트가 나타나도록 설정해서 이미지, 텍스트 Element를 입력하는 과정을 함께 진행해 보았습니다. 또, 필요없는 ‘Text’ Element를 삭제하는 것도 해보았습니다.
조금 복잡해 보이지만 실제로 사용해보면 아주 직관적인 UX(Use Experience)를 제공 합니다.
UX Builder에 대한 보다 자세한 정보가 필요한 경우아래 링크를 클릭하시면 보다 자세히 알아볼 수 있습니다.
이전 단계에서 UX Builder 를 이용한 페이지 꾸미기를 알아보았습니다. 사실 이전과 같은 경우는 워드프레스 기본 Editor를 이용해서도 만들 수 있는 페이지입니다. UX Builder의 사용방법에 익숙해 지도록 도움을 드리기 위해서 진행한 과정 입니다. 그러나 FAQ페이지와 같은 경우는 페이지빌더가 없으면 만들기 어려운 기능적인 요소들이 있습니다. 이번과정에서는 FAQ페이지를 통해서 UX Builder를 조금더 활용하는 방법에 대해서 알아보도록 하겠습니다 .
Pages> Add New 로 이동해서 FAQ페이지를 새로 만듭니다. 아래 화면과 같이 페이지 이름을 FAQ라고 주고 ‘Publish’를 클릭 합니다. Save가 된 후 같은 화면에서 UX Builder를 클릭 합니다
‘Add to Content’를 클릭합니다. (새 페이지를 만들고 처음 UX Builder를 클릭하면 아래와 같이 이미 만들어진 Template 페이지중에서 하나를 선택해서 시작을 할 수 있습니다. )
LAYOUT 중에서 ‘One Column Row’를 추가 합니다. ‘Add elements’를 클릭합니다.
UX Builder 의 CONTENT 중 Accordion을 클릭 합니다.
아래 화면과 같이 Accordion item 3개를 가진 Accordion Element가 추가 됬습니다. 먼저, Accordion의 이름을 입력 합니다. 여기에서는 FAQ라고 입력 합니다. ‘Apply’를 클릭 합니다. Accordion item 1 을 클릭하면 왼쪽 UX Builder 컨트롤 판넬에 Accordion item 1의 질문을 입력하는 텍스트 박스가 나타 납니다.여기에서는 ‘How to Order?’ 라고 입력 합니다.이름을 입력 합니다. 입력후에는 ‘Apply’를 클릭 합니다. 다음에는 Accordion item 1 의 내용을 입력하기 위해서 Add element를 클릭 합니다
‘Text’를 클릭 합니다.
PRESET 중 하나를 선택 합니다. 여기서는 Paragraph를 선택 합니다.
Text 를 입력하기 위해서 Open Text Editor를 클릭 합니다.
Text 입력이 완료되면 ‘Apply’를 클릭 합니다.
위와 같은 과장을 반복해서 원하는 만큼의 FAQ항목을 만듭니다. 작업이 완료되면 ‘Update’를 클릭 합니다.
UX Builder 를 Close 한 후 반드시 ‘Update’를 클릭해서 변경 사항을 Save를 하시기 바랍니다.
FrontPage 에서 작업 내용을 확인해 봅니다. 아래 화면과 같이 우리가 일반적으로 많이 봤던 Accordion형식의 FAQ를 보실 수 있습니다.
UX Builder 를 이용한 Contact us 페이지 만들기
Contact us 페이지에는 보통 다음과 같은 정보들이 포함되게 됩니다.
Store Address(Google Map)
Business Hours
Email
Customer Support Phone
Contact Form
Pages> Add New 로 이동해서 Contact us페이지를 새로 만듭니다. 아래 화면과 같이 페이지 이름을 Contact us라고 주고 ‘Publish’를 클릭 합니다. Save가 된 후 같은 화면에서 UX Builder를 클릭 합니다.
LAYOUT 중에서 One Column Row를 하나 추가 해줍니다. 아래 화면과 같이Map을 추가 합니다.
Map을 추가한 Row 바로 아래에 2개의 Column을 가진 Row를 새로 추가 합니다. 왼쪽의 Column에 Accordion을 추가 해주고 Phone, Email, Business Hour등을 추가 합니다.
아래 화면을 참조하세요. (Accordion 사용방법은 이전 단계인 FAQ 페이지 만들기를 참조하세요)
오른쪽 Column에는 Contact Form을 추가 합니다. Add element 를 클리한 후 UX Builder 컨트롤 판넬에서 Form(CF7) 을 클릭 합니다.
사용가능한 Form 중 하나를 선택 합니다. (Contact Form 만드는 방법은 조금 있다가 설명 드리겠습니다. 여기에서는 먼저 ‘Contact Form 1’을 선택 합니다)
아래 화면과 같이 오른쪽 Column에 Form이 입력이 됬습니다. Apply를 클릭합니다. 그리고 UX Builder를 클릭하고 기본 Editor로 돌아가서 ‘Update’를 클릭합니다.
Frontpage에서 확인 한 Contact us 페이지 입니다.
Contact Form 만들기
Contact Form은 사용자들의 정보를 입력받고 소통을 하기위한 도구 입니다. 일반적으로 입력받는 내용은 아래와 같습니다. 너무 많은 정보의 입력을 요구하는 것은 사용자에게 거부감을 주기 때문에 가능한 꼭 필요한 정보 위주로 간단하게 만드시는 것이 좋습니다.
이름
이메일
전화 (옵션)
제목
내용
Contact> Contact Forms 로 이동 합니다.
리스트된 Form중 하나를 선택 합니다. 여기서는 Contact form 1을 선택 했습니다. (위 Contact us 페이지를 만들때 Contact Form 1을 선택했기 때문에 여기서는 Contact Form 1을 가지고 설명 드립니다. Contact Form 1은 보통 Contact form 7 플러그인을 설치하면 기본적으로 만들어져 있는 Form입니다.)
Preset 은 기본 Format을 미리 만들어 놓은 것 입니다. Copy & Paste로 쉽게 사용 가능 합니다. 여기서는 상단의 Tab중 Form을 클릭 합니다.
아래와 같이 Form의 입력 항목을 선택해서 실제 Form에 추가하는 방식으로 Form을 만들 수 있습니다. 여기서는 선택박스(여러개중 하나의 값을 선택), 라디오버튼, 체크박스등 다양한 Form element를 사용 가능 합니다. 보다 상세한 정보가 필요한 경우 여러분의 요구 사항에 맞도록 Form을 만들 수 있습니다. 즉, 원하는 위치에 마우스를 한번 클릭하고 위의 Form element중 하나를 클릭 합니다. 여기서는 Email 과 Subject 사이에 Tel을 추가하는 작업을 기준으로 Form을 수정하는 방법에 대해서 알아보겠습니다.
아래와 같이 Email 과 Subject 사이에 조금 공간을 두고 상단의 Form element중 ‘Tel’을 클릭합니다. 필수 항목이면 ‘Required field’를 클릭합니다. ‘Insert tag’를 클릭 합니다.
아래 (2)번 화면과 같이 이미 등록된 Form element 를 하나 Copy해서 제목을 Phone으로 변경하고 원래 항목 대신 방금 추가한 Tel 항목으로 변경 해주고 Save 를 합니다.
헤더와 푸터는 쇼핑몰의 어떤 페이지에서도 항상 보여지는 부분입니다. 모든 페이지에서 동일하게 보여지기 때문에 웹사이트를 사용하는데 자주 쓰는 기능과 컨텐츠들이 보여지도록 하는 것이 좋습니다. 예를들어 메인메뉴, 마이페이지링크, 로고, 연락처, 쇼핑카트버튼등 입니다.
본 DIY 쇼핑몰따라하기 포스팅에서 설명드리고 있는 Flatsome Theme의 경우는 헤더와 푸터를 아주 세밀하게 설정 할수 있습니다. 아래에서 하나씩 살펴보도록 하겠습니다.
(1) 헤더설정
아래 화면과 같이 웹페이지 가장 상단 부분의 일정부분을 헤더라고 합니다. 헤더는 어떤 페이지를 오픈해도 똑같이 내용이 보여지게 됩니다. 아래와 같이 로고, 메인메뉴, 로그인, 쇼핑카트, 추가적인 메뉴등이 들어가는 것이 일반적입니다. 그러나, 정해진 규칙이 있는 것은 아니니 여러분의 개성에 따라서 다양하게 연출이 가능 합니다.
헤더를 설정하기 위해서는 Flatsome > Theme Options로 이동합니다. (아래화면 참조)
아래 화면과 같이 Theme Options메인 화면이 나타납니다. Flatsome의 경우는 워드프레스 커스터마이징 기본 화면에 Flatsome의 추가적인 설정 기능들을 추가하는 방식으로 사용자 인터페이스를 제공 합니다. 이어서 설명드릴 푸터의 경우도 여기서 설정이 가능 합니다. 아래 화면에서 Header를 클릭 합니다.
그러면 아래와 같이 헤더를 설정하는 모든 기능들이 왼쪽에 나열됩니다. 그리고 화면 오른쪽에는 실제 웹사이트가 위쪽에 보이고 아래쪽에는 Drag & Drop 설정 창이 보이게 됩니다. 직감적으로 아시겠지만 아래 부분에서 원하는 부분을 클릭하면 해당 부분을 수정 할 수 있도록 되있습니다.
그럼, 중요기능들에 대해서 하나씩 설명을 드리겠습니다.
Preset : 이부분은 일반적으로 쇼핑몰 에서 많이 사용하는 헤더타입들을 미리 만들어 놓고 그중 하나를 선택해서 빠르게 설정하도록 도움을 주는 부분 입니다. 아래 화면에서 왼쪽에 미리 정해진 헤더의 이미지가 보이는데 이중 마음에 드는 것을 하나 선택하신 후 Publish를 클릭하면 헤더가 변경이 됩니다. 보통 이 방법으로 헤더를 설정하는 경우가 많습니다. 선택된 헤더타입의 부분부분의 컨텐츠는 오른쪽 화면 하단의 원하는 부분을 클릭한 후 변경이 가능 합니다.
Logo & Site Identity: 로고이미지를 업로드 하는 부분입니다. 아래 화면과 같이 원하는 로고 이미지를 업로드하고 로고의 위치 조정, 로고 주변의 여백조정등을 할 수 있으며 Favicon 설정도 여기서 가능 합니다.
Top Bar : 헤더의 가장 윗부분을 Top Bar라고 합니다. 아래 화면의 왼쪽과 같이 높이 조절, 폰트 색상, 미리 정해진 스타일등의 설정을 변경 가능합니다. Top Bar는 3개의 컬럼으로 이미 정해져 있습니다. 아래에서 보듯이 맨 왼쪽에 자유롭게 컨텐츠를 넣을 수 있는 ‘HTML1’ 이 만들어져 있고 가운데 컬럼은 비어 있으며 맨 오른쪽 컬럼에는 ‘Top Bar Menu’ 와 ‘Social Icon’이 자리하고 있는 것을 알 수 있습니다. 각각의 내용을 변경 하려면 해당 부분을 클릭하면 됩니다. 예를들어 ‘HTML1’ 에 본인이 원하는 내용을 입력 하려면 아래 화면 오른쪽 하단의 Top Bar안에 있는 ‘HTML1’을 클릭한 후 내용을 변경 하면 됩니다.
Header Main : 메인헤더 부분의 디자인을 변경하는 부분입니다. 아래 화면과 같이 헤더의 넓이변경, 배경색 변경, 백그라운드 이미지 추가, 메뉴의 디자인 변경, 헤더의 높이 변경등 아주 세밀하게 디자인을 변경 가능 합니다. 여러분이 원하는 디자인으로 만들기 위해서 하나씩 테스트를 해보세요. 수정한 내용은 실시간으로 오른쪽에 나타납니다.
Header Bottom : 메인헤더 아래부분을 Header Bottom이라고 구분 합니다. 그러나 이부분은 앞서 설명드린 Preset의 종류에 따라서 보이기도 하고 보이지 않는 경우도 있습니다. 아래 화면의 경우는 Header Bottom을 사용하는 Preset을 예로 들었습니다. 아래 화면과 같이 Header Bottom부분에 메인 메뉴가 보이도록 설정이 되있습니다. 이때 Header Bottom의 높이 조절, 배경색 변경, 메인메뉴 디자인 스타일등을 변경 하 실 수 있습니다.
Header Sidebar / Mobile : 다른기기 특희, 모바일에서 웹사이트 디자인을 설정하는 부분 입니다. 우측 화면 중간 부분에 있는 Desktop, Tablet, Mobile을 클릭하면 각각의 기기에서 디자인이 어떻게 보이는지 미리 확인이 가능 합니다. 모바일에서의 해더의 높이, 로고위치, 메뉴아이콘의 스타일등을 설정 하고, 메뉴에 보일 항목도 수정이 가능 합니다.
Sticky Header : Sticky Header 란? 마우스를 스크롤해서 현재 화면을 아래쪽으로 넘어갈때 헤더 부분이 화면에서 계속 나타나도록 고정 시켜주는 기능을 말합니다. 지금까지 살펴본 헤더의 3부분을 각각 설정이 가능 합니다. Sticky Header에서만 보이는 로고 설정, 높이 설정등이 가능 합니다.
Dropdown Style : 메인메뉴의 가장 상위 단계 바로 다음단계 부터의 디자인 설정을 합니다. 배경색 변경, 테두리색 변경, 하위메뉴가 나타나는 창의 테두리를 둥글게하는 설정, 하위메뉴에 마우스가 올려졌을때 효과등의 설정을 할 수 있습니다.
Buttons : 헤더에 2개의 커스텀 버튼을 추가 할 수 있습니다. 버튼의 스타일, 링크, 색상등을 설정 가능 합니다. 버튼은 헤더의 상단, 메인, 하단의 원하시는 곳에 Drag & Drop방식으로 추가 할 수 있습니다.
Account : 마이어카운트(마이페이지) 링크 부분의 디자인을 설정 합니다. 아이콘스타일, 회원가입링크의 표시여부등을 설정 가능 합니다. 아리어카운틑를 클릭하면 기본적으로 우커머스에서 기본적으로 재공하는 마이페이지로 이동하게 됩니다. 그러나, 여러분의 비지니스 요구사항에 맞는 커스텀 마이페이지를 만들고 그것을 링크 시키는 것도 가능 합니다.
Cart : 쇼핑카트에 마우스를 가져가거나 클릭을 했을때 디자인 및 기능 설정을 하는 부분 입니다. 카트 부분의 디자인 스타일 선택, 카트 아이콘 선택등을 할 수 있습니다. 특희, 카트를 클릭했을때 바로 아래 Dropdown으로 카트 내용을 간략하게 보여주는 방식 혹은 화면의 옆에 창을띄워 보여주는 방식등를 선택 할 수 있습니다.
Search : Search 폼을 추가하고 간단한 디자인 설정을 합니다
HTML : 헤더의 원하는 부분에 간단한 HTML을 추가합니다. 고급 사용자의 경우 자바스크립트도 추가 가능 합니다. 예를들어 현재시간을 알려주는 간단한 자바스크립트 코드등을 추가 할 수 있습니다.
Contact : 간단한 Contact 정보를 입력하고 헤더의 원하는 부분에 보여 줄 수 있습니다.
Newsletter
Wishlist
Follow Icon
10. 쇼핑몰 프론트(홈) 페이지 디자인.
준비중입니다.
11. 상품진열 페이지 디자인.
준비중입니다.
12. 상품상세 페이지 디자인.
준비중입니다.
13. 마케팅관련 프러그인 설치.
1) 웹사이트 접속통계 플러그인 설치하기
웹사이트를 운영하면서 접속자에 대한 통계정보를 기록하는 것은 아주 중요합니다. 웹사이트를 접속한 사용자의 위치(국가), 어떤 검색엔진을 통해서 접속했는지, 어떤 키워드를 입력해서 접속을 했는지, 하루/일주일/한달간의 접속 통계는 어떻게 되는지…등의 통계 정보를 잘 모니터링 하면 웹사이트 컨텐츠를 어떻게 운영해야 하는지, 온라인 마케팅을 어떤 방향으로 해야 하는지 실마리(Clue)를 얻게 됩니다. 그래서 WP Statistics라는 유용한 웹사이트 접속 통계정보를 제공하는 플러그인을 소개 해드립니다..
웹사이트 방문통계 플러그인(WP Statistics)설치 및 리포트보기
Plugins > Add New 를 클릭 합니다.
Keyword를 ‘wp statistics’라고 입력 합니다. 그런후 아래와 같이 리스트가 나오면 첫번째 플러그인인 WP Statistics의 ‘Install Now’를 클릭 합니다.
Activate’을 클릭합니다.
WP Statistics가 정상적으로 설치 된후 아래와 같이 WP Statistics > Overview를 클릭 합니다.
[fusion_fontawesome icon=”fa-chevron-right” circle=”yes” size=”13px” iconcolor=”” circlecolor=”” circlebordercolor=”” rotate=”” spin=”no” animation_type=”0″ animation_direction=”down” animation_speed=”0.1″ alignment=”left” class=”” id=””/]WooCommerce > Settings 에는 다음과 같은 항목들이 있습니다.
1) General 2) Products 3) Shipping 4) Checkout 5) Account 6) Email 7) API
1) General Tab
아래 화면은 WooCommerce > Settings > General 에 관련된 설명 입니다.
Base Location : 사업장의 위치, Tax Rate을 결정해 줍니다. Selling Location(s) : 전세계를 대상으로 판매를 할 것인지 특정 국가(들)에만 판매할 것인지를 결정 합니다. Shipping Location(s) : 상품을 배송할 국가를 지정할 수 있습니다. Default Customer Address : 사용자가 본인의 주소를 입력하기전에 Tax와 배송비를 미리 보여줄때 사용자의 주소를 미리 가정하는 것입니다. 사용자가 본인의 주소를 입력하면 거기에 맞도록 Tax와 배송비가 다시 변경 됩니다.
Shop base address : 사업장과 동일한 위치에 있다고 가정 합니다. 즉, Tax와 배송비가 사업장 기준으로 미리 보여집니다.
No address : Tax와 배송비를 미리 보여주지 않습니다.
Geolocate address (기본값) : 위치정보를 이용해서 사용자의 위치에 따라서 Tax 와 배송비를 계산 해줍니다. 이 설정이 기본값 입니다.
Geolocate with page caching support : 위 Geolocate address 와 동일하지만, 실시간으로 정보를 가져와서 가격정보등이 업데이트가 되지않는 것을 방지해 줍니다.
Enable Taxes : Tax 를 적용할 것인지 말것인지를 결정합니다. Store Notice : 화면의 상단에 메세지를 보여줄 수 있습니다. 예) 긴급 공지사항. Currency : 쇼핑몰에서 사용할 통화를 결정 합니다. Currency Position : 통화 기호를 왼쪽, 오른쪽중 어디에 보이게 할 것인지 설정 합니다. Thousand Separator : 천단위 구분기호를 선택 합니다. 예) 1,000 or 1.000 Decimal Separator : 소수점이하 구분기호를 선택합니다. 예) 100.00 or 100,00 Number of Decimals : 소수점이하 몇자리 까지 보이게 할 것 인지를 결정합니다.
2) Products Tab
[fusion_fontawesome icon=”fa-chevron-right” circle=”yes” size=”13px” iconcolor=”” circlecolor=”” circlebordercolor=”” rotate=”” spin=”no” animation_type=”0″ animation_direction=”down” animation_speed=”0.1″ alignment=”left” class=”” id=””/]아래 화면은 WooCommerce > Settings > Product > General 에 관련된 설명 입니다.
Measurements : 측정 단위를 입력합니다. Product Ratings : 상품 리뷰관련 설정
Enable ratings on reviews. : 리뷰를 허용할 것인지를 설정 합니다.
Ratings are required to leave a review. : 리뷰를 남기려면 평가(Rating)를 먼저해야 하도록 합니다.
Show Verified Owner label for customer reviews. : Verified Owner label을 보여주도록 합니다 : verified owner 는 로그인을 했고 해당 상품을 구매한 고객을 말합니다.
Only allow reviews from verified owners. : Verified Owner 만 리뷰를 남길 수 있도록 합니다.
Shop Page/Product Archive : 상품을 진열하는 기본페이지를 설정해줍니다. ( 4.우커머스(WooCommerce) Quick Setup 에서 이미 설정을 했습니다.) Shop Page Display : 상품만 진열할 것인지, 해당 카테고리의 서브카테고리만 진열할 것인지, 서브카테고리와 상품을 모두 진열할 것인지 설정을 해줍니다. Default Category Display : 상품만 진열할 것인지, 해당 카테고리의 서브카테고리만 진열할 것인지, 서브카테고리와 상품을 모두 진열할 갓인지 설정을 해줍니다. Default Product Sorting : 상품 정렬 방법을 설정해줍니다
Default product sorting (custom ordering + name) : 기본 정렬값.
Popularity (sales) : 많이 팔린순서.
Average rating : 평가가 좋은순서.
Most recent : 가장 최근에 등록된 순서.
Price (ascending/descending) : 가격이 높거나 낮은순서.
Add to cart behavior : 장바구니(Cart)를 클릭했을때 어떻게 행동할 것인지를 설정 합니다.
Redirect to cart page after successful addition – 장바구니(Cart)페이지로 이동합니다.
Enable Ajax add to cart buttons on archives – 상품 진열페이지에 ‘Add to Cart’ 버튼을 추가 합니다.
Product Thumbnails : 상품 장바구니, 위젯, 상품 이미지 겔러리 등에서 보이는 상품 이미지 사이즈.
[fusion_fontawesome icon=”fa-chevron-right” circle=”yes” size=”13px” iconcolor=”” circlecolor=”” circlebordercolor=”” rotate=”” spin=”no” animation_type=”0″ animation_direction=”down” animation_speed=”0.1″ alignment=”left” class=”” id=””/] 아래 화면은 WooCommerce > Settings > Product > Inventory 에 관련된 설명 입니다.
Hold Stock (minutes) : 주문(Order)가 입력됬는데 결제(Payment)가 아직 처리 않된 경우, 상품 재고를 여기에 지정한 시간동안 차감하고 있다가 지정한 시간이 경과 됬는데도 결제처리가 않되면 재고를 원상복구하고 주문은 자동 Cancel 합니다. 기본값은 설정하지 않음 입니다.
Enable out of stock notifications : 어떤 상품의 재고가 Out Of Stock Threshold에 설정된 값에 이르면 Notification Recipient에 설정된 이메일로 경고 이메일을 보내줍니다.
Notification Recipient – 재고관련 경고 이메일을 받을 사람의 이메일 주소를 입력합니다.
Low Stock Threshold – 재고부족 기준 수량.
Out Of Stock Threshold – 품절 기준 수량..
Out Of Stock Visibility – 품절인 경우 상품 진열 페이지에서 않보이도록 합니다.
Stock Display Format : 상품 상세 페이지에서 재고표시 방법
Always show stock – “12 in stock”
Only show stock when low – “Only 2 left in stock” vs. “In stock”
Never show amount
[fusion_fontawesome icon=”fa-chevron-right” circle=”yes” size=”13px” iconcolor=”” circlecolor=”” circlebordercolor=”” rotate=”” spin=”no” animation_type=”0″ animation_direction=”down” animation_speed=”0.1″ alignment=”left” class=”” id=””/] 아래 화면은 WooCommerce > Settings > Product > Downloadable Products 에 관련된 설명입니다.
File Download Method : 다운로드 상품을 구입한 사람들에게 화일을 어떤 형태로 제공할 것인지 설정 합니다.
Force Downloads – PHP script를 통해서만 다운로드 받을 수 있도록 합니다. 화일을 구입하지 않으 사람에게는 다운로드 링크가 보이지 않습니다.
X-Accel-Redirect/X-Sendfile – 위 방법과 비슷한데, 보다 큰 화일을 지원합니다. 그러나, 쇼핑몰을 운영중인 웹호스팅 회사가 X-Sendfile 나 X-Accel-Redirect 를 지원해야 가능 합니다.
Redirect only – 다운로드 URL을 사용자에게 제공합니다. 해당 링크는 외부에 노출이 가능 합니다.
보통은 Forced Downloads 방식이나, X-Accel-Redirect/X-Sendfile 방식을 사용합니다.
Access Restriction
Select if downloads require login – 로그인을 해야만 다운로드가 가능하게 합니다.
Grant access to downloadable products after payment – 오더가 완료되지 않고 프로세싱 중에도 다운로드가 가능하게 합니다.
3) Shipping Tab
[fusion_fontawesome icon=”fa-chevron-right” circle=”yes” size=”13px” iconcolor=”” circlecolor=”” circlebordercolor=”” rotate=”” spin=”no” animation_type=”0″ animation_direction=”down” animation_speed=”0.1″ alignment=”left” class=”” id=””/] 아래 화면은 WooCommerce > Settings > Shipping > Shipping Zones 에 관련된 설명입니다.
[fusion_tagline_box backgroundcolor=”” shadow=”no” shadowopacity=”0.7″ border=”1″ bordercolor=”” highlightposition=”top” content_alignment=”left” link=”” button=”” linktarget=”_self” modal=”” button_size=”” button_type=”” button_shape=”” buttoncolor=”default” title=”Shipping Zone을 꼭 사용해야 하나?” description=”Shipping zones 은 우커머스(WooCommerce) 2.6에서 처음 소개되는 기능 입니다. 이전 우커머스 버젼에는 없는 기능 입니다. Shipping zones은 상세하게 배송방법을 설정할 수 있는 장점이 있는 반면, 설정이 조금 복잡합니다. 본인의 비지니스 환경에 따라서 기존의 Flat Rate, Free Shipping, 그리고 Local Pickup 등의 방법을 사용해도 상관이 없습니다. ” margin_top=”” margin_bottom=”20″ hide_on_mobile=”small-visibility,medium-visibility,large-visibility” class=”” id=”” animation_type=”” animation_direction=”left” animation_speed=”0.3″ animation_offset=””][/fusion_tagline_box]
Shipping Zone을 설정하려면 먼저 자신의 고객들에게 어떤 배송방법 및 배송비를 적용할 것인지 결정 합니다.
예를들어 미국의 경우 다음과 같이 정할 수 있을 것입니다
Local(자동차로 30분이내) = California ZIP 90210 = Local pickup ($5), Free Shipping
Domestic(자동차로 30분 이상 전 미국지역) = All US states = Flat rate shipping ($10)
Rest of the World(다른 모든 지역) = Flat rate shipping ($100)
만약, 위와 같이 정했다면 다음과 같이 Shipping Zone을 만들 수 있습니다.
[fusion_fontawesome icon=”fa-chevron-right” circle=”yes” size=”13px” iconcolor=”” circlecolor=”” circlebordercolor=”” rotate=”” spin=”no” animation_type=”0″ animation_direction=”down” animation_speed=”0.1″ alignment=”left” class=”” id=””/] 위 화면에서 ‘Add shipping zone’을 클릭 합니다.
아래 그림은 4개의 Shipping zone을 추가하는 경우 입니다. Zone Name : 적당한 이름을 줍니다. 아래 예제의 경우는 Local, Domestic, Korea라는 이름들을 주었습니다. Regions(s) : Continents(대륙-아메리카,아시아,유럽,아프리카…등), Countries(미국,한국…등), States(미국의 경우만 가능)등을 지정해 줄 수 있습니다. 여러개를 지정가능 합니다.
원하는 Shipping zone들을 입력하신 후 ‘Save Changes‘를 클릭 합니다
[fusion_fontawesome icon=”fa-chevron-right” circle=”yes” size=”13px” iconcolor=”” circlecolor=”” circlebordercolor=”” rotate=”” spin=”no” animation_type=”0″ animation_direction=”down” animation_speed=”0.1″ alignment=”left” class=”” id=””/] Shipping zone을 아래와 같이 Drag & Drop 방식으로 순서를 변경할 수 있습니다. Shipping zone의 내용을 수정하려면 Zone Name 위로 마우스를 가져가면 edit 이라는 옵션이 나타나는데 그것을 클릭하면 수정이 가능 합니다.
[fusion_fontawesome icon=”fa-chevron-right” circle=”yes” size=”13px” iconcolor=”” circlecolor=”” circlebordercolor=”” rotate=”” spin=”no” animation_type=”0″ animation_direction=”down” animation_speed=”0.1″ alignment=”left” class=”” id=””/] Shipping zone에 Shipping Method를 추가 하기 위해서 아래와 같이 각각의 Shipping zone의 우측에 있는 ‘+’를 클릭 합니다.
[fusion_fontawesome icon=”fa-chevron-right” circle=”yes” size=”13px” iconcolor=”” circlecolor=”” circlebordercolor=”” rotate=”” spin=”no” animation_type=”0″ animation_direction=”down” animation_speed=”0.1″ alignment=”left” class=”” id=””/] Shipping Method를 선택하는 창이 오픈됩니다.
– Flat Rate : 정해진 금액
– Free Shipping : Free
– Local Pickup : 고객이 직접 찾아와서 상품을 수령하는 경우
위 3가지 방법 중 하나를 선택해 줍니다.
[fusion_fontawesome icon=”fa-chevron-right” circle=”yes” size=”13px” iconcolor=”” circlecolor=”” circlebordercolor=”” rotate=”” spin=”no” animation_type=”0″ animation_direction=”down” animation_speed=”0.1″ alignment=”left” class=”” id=””/] 아래와 같이 각각의 Shipping zone에 Shipping Method를 지정해 줍니다. 그런후에 각각의 Shipping Method를 클릭해서 상세 설정을 해줍니다. Local Pickup 과 Free Shipping 은 별도의 설정이 필요 없습니다.
[fusion_fontawesome icon=”fa-chevron-right” circle=”yes” size=”13px” iconcolor=”” circlecolor=”” circlebordercolor=”” rotate=”” spin=”no” animation_type=”0″ animation_direction=”down” animation_speed=”0.1″ alignment=”left” class=”” id=””/] 아래 화면은 Shipping zone > Korea 에 적용된 Shipping Method -Flat Rate의 상세 설정 화면 입니다. 금액($20)을 입력하고 ‘Save Changes‘를 클릭 합니다.
[fusion_fontawesome icon=”fa-chevron-right” circle=”yes” size=”13px” iconcolor=”” circlecolor=”” circlebordercolor=”” rotate=”” spin=”no” animation_type=”0″ animation_direction=”down” animation_speed=”0.1″ alignment=”left” class=”” id=””/] 아래 화면은 고객의 Checkout 페이지 입니다.
아래 화면과 같이 Country 가 South Korea로 선택이 되면 자동으로 SHIPPING 이 Flat Rate $20으로 변경됩니다.
[fusion_fontawesome icon=”fa-chevron-right” circle=”yes” size=”13px” iconcolor=”” circlecolor=”” circlebordercolor=”” rotate=”” spin=”no” animation_type=”0″ animation_direction=”down” animation_speed=”0.1″ alignment=”left” class=”” id=””/] 아래 화면은 Shipping zone > Korea 에 Shipping Method -Flat Rate를 하나 더 추가 한 경우 입니다. 고객에게 더 빨리 주문을 받아 볼 수 있도록 2Days라는 Shipping Method를 하나 더 추가 했습니다. 고객의 Checkout 페이지에서는 가장 위에 있는 Shipping Method가 기본값으로 설정 됩니다.
[fusion_fontawesome icon=”fa-chevron-right” circle=”yes” size=”13px” iconcolor=”” circlecolor=”” circlebordercolor=”” rotate=”” spin=”no” animation_type=”0″ animation_direction=”down” animation_speed=”0.1″ alignment=”left” class=”” id=””/] Shipping zone 에서 Shipping Method를 삭제하는 방법.
아래 화면과 같이 Shipping zone 이름위에 마우스를 가저가면 ‘View‘가 나타납니다. ‘View‘를 클릭 합니다.
[fusion_fontawesome icon=”fa-chevron-right” circle=”yes” size=”13px” iconcolor=”” circlecolor=”” circlebordercolor=”” rotate=”” spin=”no” animation_type=”0″ animation_direction=”down” animation_speed=”0.1″ alignment=”left” class=”” id=””/] 아래 화면과 같이 4가지 Shipping zone 에 따라서 실제로 배송비가 다르게 계산되는 것을 볼수 있습니다.
[fusion_fontawesome icon=”fa-chevron-right” circle=”yes” size=”13px” iconcolor=”” circlecolor=”” circlebordercolor=”” rotate=”” spin=”no” animation_type=”0″ animation_direction=”down” animation_speed=”0.1″ alignment=”left” class=”” id=””/] 아래 화면은 WooCommerce > Settings > Shipping > Shipping Zones 에 관련된 설명입니다.
Shipping Calculations : 배송비 계산을 보여주는 방식을 설정 합니다.
Enable the shipping calculator on the cart page : 장바구니(Cart) 페이지에서 배송비 계산기능을 보여줍니다.
Hide shipping costs until an address is entered : 고객이 주소를 입력하기 전 까지는 배송비 계산기능을 보요주지 않습니다.
Shipping Destination : 배송할 주소를 결정 합니다.
billing address, shipping address로 할것 인지를 결정 해줍니다.
Shipping classes 는 비슷한 유형의 상품들을 하나의 Shipping Class로 묶어서 Flat Rate 배송방법과 함께 배송비를 계산하는데 도움이 되도록 하는 기능 입니다.
[fusion_fontawesome icon=”fa-chevron-right” circle=”yes” size=”13px” iconcolor=”” circlecolor=”” circlebordercolor=”” rotate=”” spin=”no” animation_type=”0″ animation_direction=”down” animation_speed=”0.1″ alignment=”left” class=”” id=””/] 아래 화면은 WooCommerce > Settings > Shipping > Shipping Classes 에 관련된 설명입니다.
아래 화면과같이 ‘Add Shipping Class‘ 버튼을 클릭한 후 Shipping Class Name과 간단한 Description을 입력합니다.
필요한 만큼의 Shipping Class를 입력한 후 화면 왼쪽 하단의 ‘Save Shipping Classes‘를 클릭 합니다.
Shipping Class는 상품을 새로 등록할때 혹은 이미 들고된 상품을 수정할때 설정 해줄 수 있습니다.
[fusion_fontawesome icon=”fa-chevron-right” circle=”yes” size=”13px” iconcolor=”” circlecolor=”” circlebordercolor=”” rotate=”” spin=”no” animation_type=”0″ animation_direction=”down” animation_speed=”0.1″ alignment=”left” class=”” id=””/] 아래 화면은 WooCommerce > Products 에서 상품을 편집하는 화면 입니다. 아래 화면과 같이 Shipping Class를 적용하기 원하는 상품위에 마우스를 가져가서 ‘Edit‘을 클릭 합니다.
[fusion_fontawesome icon=”fa-chevron-right” circle=”yes” size=”13px” iconcolor=”” circlecolor=”” circlebordercolor=”” rotate=”” spin=”no” animation_type=”0″ animation_direction=”down” animation_speed=”0.1″ alignment=”left” class=”” id=””/] 상품편집 화면에서 화면을 조금 아래로 내리면 아래와 같이 ‘Product Data‘ Panel이 나타납니다. Shipping Tab을 클릭한 후, 아래 화면처럼 원하는 Shipping Class를 선택 해줍니다. 수정이 끝나면 반드시 ‘Update‘를 해주세요.
Shipping Class를 만드신 후에는 Shipping zone에이미 설정된 Shipping Method들 중 ‘Flat Rate‘에서 상품에 따라서 Shipping Cost를 다르게 줄 수 있습니다.
[fusion_fontawesome icon=”fa-chevron-right” circle=”yes” size=”13px” iconcolor=”” circlecolor=”” circlebordercolor=”” rotate=”” spin=”no” animation_type=”0″ animation_direction=”down” animation_speed=”0.1″ alignment=”left” class=”” id=””/] WooCommerce > Shipping zones로 이동한 후, 수정을 원하는 Zone Name위에 마우스를 가져 갑니다. ‘View‘를 클릭 합니다.
[fusion_fontawesome icon=”fa-chevron-right” circle=”yes” size=”13px” iconcolor=”” circlecolor=”” circlebordercolor=”” rotate=”” spin=”no” animation_type=”0″ animation_direction=”down” animation_speed=”0.1″ alignment=”left” class=”” id=””/] 아래 화면과 같이 ‘Shipping Class Cost‘란의 값들을 조절해 줍니다.
“Reusable Cup” Shipping Class Cost : ‘qty * 0.05’의 의미는 상품이 Reusable Cup이라는 Shipping Class인 경우 상품의 수량 하나당 5c를 기본 배송비 $10에 추가하라는 의미 입니다. 예) Reusable Cup이라는 Shipping Class를 갖는 상품이 5개가 주문되면 배송비는 (1)기본 Flat Rate : $10 + (2) 5 X 0.05 = 0.25 즉, $10.25의 배송비가 적용됩니다.
No Shipping Class Cost : ‘cost * 0.1’의 의미는 상품이 Shipping Class를 갖지않는 경우상품의 수량 하나당 상품 하나의 판매금액의 10%를 기본 배송비 $10에 추가하라는 의미 입니다. 예) 판매금액이 $20인 Shipping Class가 없는 상품 5개가 주문되면 배송비는 (1)기본 Flat Rate : $10 + (2) 5 X ($20 X 0.1) = $10 즉, $20의 배송비가 적용됩니다.
Calculation Type :
Per Class Charge shipping for each shipping class : 각각의 Shipping Class별로 배송비를 계산
Per Order Charge shipping for the most expensive shipping class : 전체 주문된 상품 중 가장 비싼 Shipping Class를 기준으로 배송비를 계산
[fusion_fontawesome icon=”fa-chevron-right” circle=”yes” size=”13px” iconcolor=”” circlecolor=”” circlebordercolor=”” rotate=”” spin=”no” animation_type=”0″ animation_direction=”down” animation_speed=”0.1″ alignment=”left” class=”” id=””/] 아래 화면은 위와 같은 설정을 적용 했을때 계산된 배송비 예제 입니다.
상품가격 : $29, 주문수량 : 5개, 고객의 Shipping zone : Domestic Flat Rate $10
계산된 배송비 $24.50은 아래와 같이 계산이 됬습니다.
기본 배송비(Flat Rate) : $10
Shipping Class가 없는 상품의 배송비 : ( 상품가격 $29 X 10% ) X 5 = $14.5
Coupons
쿠폰 기능을 활성화 합니다. 크폰은 장바구니(Cart) 및 결제(Checkout) 화면에서 사용 가능 합니다.
Calculate coupon discounts sequentially 쿠폰을 여러장 적용할때 할인금액을 쿠폰이 적용된 금액을 기준으로 계산 합니다.
예) 상품가격 : $10, 쿠폰1 : 10%, 쿠폰2 : 10% 인 경우 먼저 $10에 쿠폰1을 적용합니다. 그러면 $9이 됩니다. 두번째 쿠폰2를 적용할때 원래가격 $10의 10%가 아닌 $9의 10%인 $0.9가 적용됩니다. 최종가격은 $8.1이 됩니다.
Checkout Process
Enable guest checkout – 회원 가입을 하지 않고도 상품 구입을 할 수 있도록 합니다.
Force secure checkout – 결제화면은 반드시 SSL이 있어야만 가능 하도록 합니다.
Cart Page : 장바구니(Cart) 페이지를 설정 합니다. (우커머스 설치 과정에서 이미 자동으로 설치됩니다. 그러나, 어떤 이유로든 여기있는 설정이 지워주면 쇼핑카트 기능이 작동하지 않습니다. 그런경우 ‘Cart’ 페이지를 선택해 주면 됩니다. )
Checkout Page : 결제(Checkout) 페이지를 설정 합니다. (우커머스 설치 과정에서 이미 자동으로 설치됩니다. 그러나, 어떤 이유로든 여기있는 설정이 지워주면 쇼핑카트 기능이 작동하지 않습니다. 그런경우 ‘Checkout’ 페이지를 선택해 주면 됩니다. )
Terms and Conditions. : 결제페이지에서 이용약관(Terms & Condition)페이지를 체크해야만 계속 진행하도록 할때 사용합니다. 먼저 워드프레스 관리자 > Pages로 이동해서 Terms & Conditions 페이지를 만든 후 여기에서 그 페이지를 선택 해주면 됩니다.
Checkout Endpoints : 이부분은 조금 기술적인 이해가 필요한 부분 입니다. 관심이 있는경우는 WooCommerce Endpoint 자세히 알아보기를 참조하세요. 기본값을 수정하지 마시고 그대로 사용하세요.
Payment Gateways :
WooCommerce에서 기본적으로 제공하는 Payment Gateway는 다음과 같습니다. 아래 리스트된 방법 이외에도 플러그인들을 통해서 여러가지 Payment Method를 설치 할 수 있습니다. 예) 한국 크레딧카드 결제, Authorize.net, … 등
Description –고객이 Cash on Delivery를 선택하면, 간단한 설명을 보여줍니다.
Instructions – 결제하는 방법에 대해서 설명 합니다. 보통 주문이 완료된 후 보여지는 Thank You 페이지에 나타 납니다.
Enable for shipping methods – 공백으로 비워두시면 됩니다.
Enable for virtual orders – 가상의 상품에 COD를 적용하는 경우.
Bank Account Clearing System (BACS), 보통 계좌이체 혹은 Wire Transfer라고 불리는 방식 입니다. 이 결제 방식은 쇼핑몰에서 온라인으로 처리되는 방식이 아닙니다. 고객이 쇼핑몰 Owner의 개인 혹은 비지니스 은행계좌로 구매금액을 온라인 입금하는 방식입니다.
BACS 방식으로 주문을 하게되면 주문의상태(Order Status)가 On Hold 로 잡혀있습니다. 고객의 입금내역이 확인 되면 쇼핑몰 관리자가 On Hold를 Processing으로 변경 해줍니다. (고객의 입금 확인이 된 후에 상품을 배송하여야 합니다)
[fusion_fontawesome icon=”fa-chevron-right” circle=”yes” size=”13px” iconcolor=”” circlecolor=”” circlebordercolor=”” rotate=”” spin=”no” animation_type=”0″ animation_direction=”down” animation_speed=”0.1″ alignment=”left” class=”” id=””/] WooCommerce > Settings > Checkout > BACS화면 설명 입니다.
Enable/Disable – 사용/비사용 설정
Title – 결제과정에서 보여질 결제방법 이름입니다.
Description – 고객이 BACS 결제방법을 선택하면 보여질 간단한 설명을 입력합니다.
Instructions – 처리방법을 설명하고 쇼핑몰의 은행정보를 제공합니다. (계좌이체에 필요한 정보)
Check Payments는 고객이 메일(POST OFFICE등을 이용한)로 체크를 보내는 방식입니다. 이 결제 방식은 쇼핑몰에서 온라인으로 처리되는 방식이 아닙니다. Check Payments 방식으로 주문을 하게되면 주문의상태(Order Status)가 On Hold 로 잡혀있습니다. 고객의 체크가 도착되고 은행애서 정상적으로 현금화가 된 후, 쇼핑몰 관리자가 On Hold를 Processing으로 변경 해줍니다. (은행에서 체크가 정상적으로 Clear된 후에 상품을 배송하여야 합니다)
[fusion_fontawesome icon=”fa-chevron-right” circle=”yes” size=”13px” iconcolor=”” circlecolor=”” circlebordercolor=”” rotate=”” spin=”no” animation_type=”0″ animation_direction=”down” animation_speed=”0.1″ alignment=”left” class=”” id=””/] WooCommerce > Settings > Checkout > Check Payments화면 설명 입니다.
Enable/Disable – 사용/비사용 설정
Title – 결제과정에서 보여질 결제방법 이름입니다.
Description – 고객이 Check Payments 결제방법을 선택하면 보여질 간단한 설명을 입력합니다.
Instructions – 처리방법을 설명합니다.
PayPal Standard 은 고객이 결제버튼을 클릭하면 현재 쇼핑몰에서 PayPal.com으로 이동해서 결제 처리를 합니다. PayPal의 웹사이트는 가장 안전한 결제 환경을 갖추고 있습니다. 고객은 안심하고 자신의 크레딧카드 정보를 입력 할 수 있습니다.
[fusion_tagline_box backgroundcolor=”” shadow=”no” shadowopacity=”0.7″ border=”1″ bordercolor=”” highlightposition=”top” content_alignment=”left” link=”” button=”” linktarget=”_self” modal=”” button_size=”” button_type=”” button_shape=”” buttoncolor=”default” title=”PayPal 의 https 사용 권장” description=”우커머스(WooCommerce)에서는 Instant Payment Notification (IPN) 이라는 기술을 사용합니다. 얼마전 PayPal에서는 이런 경우 https 를 사용하기를 권장하고 있습니다. 자세한 내용은 Google 에서 PayPal’s announcement to https for added security를 검색해 보시기 바랍니다.” margin_top=”20″ margin_bottom=”20″ hide_on_mobile=”small-visibility,medium-visibility,large-visibility” class=”” id=”” animation_type=”” animation_direction=”left” animation_speed=”0.3″ animation_offset=””][/fusion_tagline_box]
(필수사항) PayPal Business account 가 필요합니다. PayPal 웹사이트에서 Businessaccount를 만드세요. 만약, 이전에 Personal account 를 가지고 계신 경우에는 Business account 로 변경 하세요.
PayPal Email : PayPal Business Account 에서 사용하는 이메일을 입력하세요.
PayPal Sandbox : 테스트를 위해서 PayPal을 임시로 결재 처리가 이루어지지 않도록 설정 할 수 있습니다.
Debug logs : 테스트 Log가 WooCommerce > System Status > Logs 에 기록됩니다.
고급옵션(Advanced Options)
Shipping Details ‘Send shipping details to PayPal instead of billing.’ : 고객의 Shipping Address를 PayPAL로 전송할 수 있습니다. PayPal을 통해서 주소라벨을 출력하는 경우 유용 합니다.
Address Override ‘Enable “address_override” to prevent address information from being changed.’ : Error 발생 소지가 있어서 체크를 하지 말기를 권장 합니다.
Receiver Email : PayPal 이메일과 실제 사용하는 이메일이 다른 경우에 사용합니다.
Invoice Prefix : 송장(Invoice) 앞에 붙는 식별자를 정해 줍니다. 예) ‘SN-‘ PayPal은 동일한 인보이스 번호를 허용하지 않기 때문에 하나의 PayPal Account로 여러 쇼핑몰을 운영하는 경우에는 반드시 중복되지 않는 식별자를 입력해 주세요.
Payment Action :
Capture : 결제와 동시에 PayPal Account로 자금이 입금됩니다. ( 빠른 현금화 )
Authorize : 결제를 하면 자금을 Hold해 두고 주문(배송)이 완료되면 PayPal Account로 입금됩니다.
lets you choose to capture funds immediately or only authorize.
Page Style : PayPal Account에서 설정한 커스텀 페이지를 사용하기를 원할때 Page Style을 입력 합니다. 보통의 경우 공백으로 비워두시면 됩니다.
PayPal Identity Token : IPN 관련 문제가 있을 경우 PayPal Account에 있는 IPN을 입력합니다. 보통의 경우 공백으로 비워두시면 됩니다.
API Credentials
API는 PatPal 과 시스템적으로 밀접하게 통합해서 특별한 정보를 주거나 받을 때 사용합니다. 보통은 개발자들이 주로 사용하는 기능 입니다. 보통은 공백으로 두시면 됩니다.
Automatically generate customer password : 자동으로 비밀번호를 생성 해줍니다. 보통은 고객이 직접 비밀번호를 만들도록 합니다.
My Account Endpoint : 설정된대로 그대로 사용하시면 됩니다. 수정하지 마세요.
6) Email Tab
우커머스(WooCommerce)에서 기본적으로 제공되는 이메일 템플릿들은 New order | Cancelled order | Failed order | Processing order | Completed order | Refunded order | Customer invoice | Customer note | Reset password | New account 입니다. 아래 화면들에서 설명하는대로 각각의 템플릿의 상세 내용을 수정할 수 있습니다.
쿠폰(Coupon)기능을 사용하기 위해서는 먼저 쿠폰기능 사용여부를 체크해 주어야 합니다.
워드프레스 관리자의 WooCommerce > Settings 의 Checkout 탭으로 이동 합니다. “Enable the use of coupons“를 체크 해줍니다.
쿠폰(Coupon)은 워드프레스 관리자의 WooCommerce > Coupon으로 이동해서 관리합니다. 아래 그림과 같이 현재 등록된 쿠폰들이 리스트 됩니다. Code를 클릭해서 상세화면으로 이동 합니다.
위 화면에서 “Add Coupon“을 클릭해서 새로운 쿠폰을 만들거나 기존 쿠폰의 Code를 클릭해서 수정을 하실 수 있습니다. 아래 3개의 화면은 Coupon Data Panel의 각각의 탭들에 대한 설명 입니다.
GENERAL 탭 설명
Discount type :
Cart discount – 전체 주문금액중 일정금액을 Discount 해줌. 예) 만약 각 $20인 3개의 제품을 주문해서 전체 주문금액이 $60인 경우, $10의 쿠폰을 제공하면 전체 주문금액 $60중 $10을 차감해서 전체 주문금액이 $50이됨.
Cart % discount – 전체 주문금액중 일정%를 Discount 해줌. 예) 만약 각 $20인 3개의 제품을 주문해서 전체 주문금액이 $60인 경우, 10%의 쿠폰을 제공하면 전체 주문금액 $60의 10%인 $6을 차감해서 전체 주문금액이 $54이됨.
Product discount – 선택된 제품의 개별 주문금액중 일정 금액을 Discount 해줌. 예) 만약 각 $20인 3개의 제품을 주문해서 전체 주문금액이 $60인 경우, 해당 제품에 각 $10의 쿠폰을 제공하면 각각의 제품에서 $10씩을 차감해서 전체 $30의 금액을 차감해줌. 주문금액 $60에서 $30을 차감해서 전체 주문금액이 $30이됨.
Product % discount – 선택된 제품의 개별 주문금액중 일정 %를 Discount 해줌. 예) 만약 각 $20인 3개의 제품을 주문해서 전체 주문금액이 $60인 경우, 해당 제품에 각 10%의 쿠폰을 제공하면 각각의 제품에서 $2씩을 차감해서 전체 $6의 금액을 차감해줌. 즉, 주문금액 $60에서 $6을 차감해서 전체 주문금액이 $54이됨.
Coupon amount – 숫자만 입력해야 합니다. Discount Type에 따라서 금액이나 %로 자동 인식 됩니다.
Allow free shipping – 쿠폰이 적용되면 배송비를 무료로 해줍니다. ( Free Shipping이 Setting에 설정되 있어야 합니다)
Coupon expiry date – 쿠폰의 만기일을 지정해 줍니다. 만기일에 이르면 쿠폰은 더이상 사용이 불가능 합니다.
USER RESTRICTION 탭 설명
Minimum spend – 쿠폰을 사용하기 위한 최소 주문금액 ( Sub Total +Tax 금액 )
Maximum spend – 쿠폰을 사용하기 위한 최대 주문금액 ( Sub Total +Tax 금액 ). 조금 이상할 수는 있으나 너무 주문금액이 큰경우 쿠폰금액도 커지기 때문에 지정할 필요가 있음
Individual use only – 다른 쿠폰과 함께 사용불가능 하도록 설정.
Exclude sale items – 현재 세일중인 제품에는 크폰이 적용되지 않도록 함. 주문금액 정체에 대한 쿠폰의 경우는 세일중인 제품이 추가되면 작동되지 않습니다.
Products – Product Discount와 Product % Discount 쿠폰의 대상이되는 제품을 선택함. 해당란에 3글자 이상을 입력하면 제품 이름을 보여주는데 이때 하나씩 선택 하시면 됩니다.
Exclude products –세일 제외 제품을 등록합니다.
Product categories – 제품 카테고리 전체를 쿠폰으로 지정 할 수 있습니다
Exclude categories – 제품 카테고리 전체를 세일 제외로 지정 할 수 있습니다
Email restrictions – 선택된 고객들에게만 쿠폰을 지급할 경우, 이메일 리스트를 등록 할 수 있습니다. ‘,’로 구분해서 이메일을 등록 합니다. 쿠폰을 지급할 고객들의 이메일을 입력 합니다. 즉, 여기에 등록되지 않은 이메일을 Billing Address에 입력하면 자동으로 쿠폰이 삭제 됩니다. (Billing Address의 등록 된 이메일을 확인 합니다)
USER LIMITS 탭 설명
Usage limit per coupon – 쿠폰이 전부 몇개 사용 가능한지를 결정. 예) 만약 Unlimited Usgae를 선택하면 크폰이 만기일까지는 무한대로 사용 가능합니다.
Limit usage to X items – Product Discount 이나 Product % Discount 쿠폰의 경우 해당 쿠폰을 몇개까지 허용할 것인지 결정 합니다.
Usage limit per user – 한 고객에게 몇번까지 같은 쿠폰 사용을 하가할 것인지 결정 합니다. 일반적인 경우에 1번인 경우가 많습니다.
위와 같이 쿠폰을 본인의 비지니스 환경에 맞추어서 사용이 가능 합니다.
쿠폰은 보통 결제처리(Checkout)을 할때 보여지게 됩니다.
만약, 만드신 쿠폰을 고객들에게 보내기를 원하시면 이메일에 쿠폰의 제목(코드)를 입력해서 마케팅 문구와 함께 보내시면 됩니다. 고객은 결제처리시 해당 쿠폰을 Copy 한 후 쿠폰 입력란에 Paste하면 쿠폰의 설정에 따라서 Discount가 자동 계산 됩니다.
고객이 주문을 완료하면 워드프레스 관리자 메뉴 WooCommerce(우커머스) > Orders(주문)에서 고객의 주문을 확인하실 수 있습니다. 또한, 관리자에게 주문이 접수됬다는 이메일이 전송됩니다.
고객의 주문 확인을 위해서는 사용중인 워드프레스 아이디에 Administrator 혹은 Shop Manager 권한이 있어야 합니다.
주문리스트(ORDERS) 화면 설명
[fusion_fontawesome icon=”fa-play-circle” size=”” flip=”” rotate=”” spin=”no” alignment=”” hide_on_mobile=”small-visibility,medium-visibility,large-visibility” class=”” id=”” circle=”yes” iconcolor=”” circlecolor=”” circlebordercolor=”” animation_type=”” animation_direction=”down” animation_speed=”0.1″ animation_offset=””][/fusion_fontawesome] WooCommerce > Orders 화면으로 이동 합니다.
주문이 접수되면 관리자 혹은 담당자가 주문에 대한 후속 처리를 해주게 됩니다.
결제처리가 완료 됬는지, 그렇지 않으면 결제처리를 기다려야 하는지 등을 확인 후 상품을 배송할 것인지를 결정 합니다.
일반적으로 온라인결제 처리만을 허용하는 경우는 바로 상품을 배송하면 됩니다.
그러나 무통장 입금, COD(Cash on Delivery), BACS(Bank Transfer)등의 Off-line 결제방법을 사용하는 경우는 결제처리가 모두 완료된 후 배송을 하셔야 합니다.
화면설명 (위)
주문 페이지는 위와 같이 가장 최근에 주문된 데이터 순으로 보여지게 됩니다. 주문의 내용을 수정 하시기 위해서는 주문번호를 클릭하시면 됩니다. 주문의 수정은 ORDER STATUS가 On-Hold 나 Pending Payment인 경우에만 수정이 가능 합니다. 아래에 위 주문 리스트 화면의 항목 하나하나를 상세히 설명했습니다.
(메인화면 상단의 Order Detail, 우측 Order Action, Order Note, Add Note 부분 설명)
주문상태(order status)를 변경할 수 있습니다
주문수정 – 제품, 가격, TAX등을 변경 가능 합니다.
재고 – 재고를 더하거나 뺄수 있습니다.
주문단계별처리(Order Actions) – 주문단계별처리를 변경하면 고객에게 해당 주문단계별처리 이메일이 다시 전송됩니다. (New Order, Processing Order, Completed Order or Customer Invoice 이메일) – 수동으로 관리자가 주문을 입력하는 경우 아주 유용합니다.
주문노트(Order Notes) : 고객에게 메세지를 보낼때는 ‘Note to Customer‘를 선택 합니다. 내부적으로 참고 할 때는 ‘Private‘을 선택 합니다. 주문처리를 할 때 자동으로 만들어지는 주문노트는 보라색으로 나타 납니다. 아래 주문노트별 Color를 참조하세요.
시작하기 전에 상품 카테고리(Category), 태그(Tag), 속성(Attribute) 과 상품타입(Product Types)을 먼저 알아보고 상품등록을 자세히 설명 드리겠습니다.
상품 카테고리(Category), 태그(Tag), 속성(Attribute)
상품을 등록하기 전에 상품 카테고리(Category), 태그(Tag), 속성(Attribute)에 대해서 먼저 알아보는것이 좋습니다.
카테고리(Category), 태그(Tag), 속성(Attribute)는 상품을 그룹으로 묶거나, 옵션을 줄때 사용합니다.
상품을 등록할 때 지정해 줄 수 있습니다.
카테고리(Category)와 태그(Tag) : 카테고리(Category)와 태그(Tag)는 상품을 그룹으로 묶을때 사용합니다. 차이점은 카테고리의 경우는 계층구조(하위카테고리를 갖을 수 있음)를 갖을수 있는 반면, 태그는 계층구조를 갖지 못한다는 것입니다.
속성(Attributes) : 상품의 옵션을 주는것을 말합니다. 예) Color, Size, …등. 개별 상품별로 옵션을 주기도 하고, 비슷한 유형의 카테고리나 태그별로 쇼핑몰 전체적으로 지정 할 수 있습니다.
SKU : Barcode #, Part #, Serial #등 상품식별을 하기위해서 쓰는 숫자와 코드의 조합을 입력합니다 일련번호는 중복이 되지 않도록 합니다.
‘Manage stock?’ : 체크를 해주어야만 재고관리 기능이 작동 합니다. (화면이 위와 같이 변경 됩니다.) Stock quantity : 재고 수량을 입력 합니다. Allow backorders? : 재고 수량이 없어도 주문이 가능 하도록 합니다. Sold Individually : ‘In stock’ – 재고있음 / ‘Out of stock’ – 재고없음. Sold Individually : 하나의 주문(Order)에서 한개씩만 판매 가능 하도록 합니다.
위 선택박스에서 속성을 선택한 후 “Add” 버튼을 클릭하세요. 아래 화면과 같이 선택한 속성이 선택박스 아래에 나타날 것입니다. Color라는 속성에 미리 등록된 값들은 ‘Black’, ‘White’, ‘Yellow’입니다. 만약, 해당 상품에는 ‘Green’이라는 색상이 필요하면 아래 화면과 같이 ‘Add new‘를 클릭해서 값을 추가 해줍니다. 모든 설정이 완료되면 ‘Save attributes‘를 클릭 합니다.
위와같이 속성을 추가한 후에는 ‘Variations Tab’을 클릭 합니다. 아래 화면과 같이 Variations Tab이 오픈되면 선택박스의 값을 ‘Create variations from all attributes’를 선택 한 후 ‘Go’를 클릭 하세요. 그러면 아래 화면과 같이 4개의 Color가 만드어진 것을 알수 있습니다. 지금 만들어진 Variation들은 모두 개별 상품 처럼 재고, 이름, 이미지, 가격등을 별도로 줄 수 있습니다. 아래 화면에서 Black Variation위에 마우스를 가져갑니다. 그러면 아래 화면과 같이 아래방향 화살표가 나타 납니다. 그것을 클릭 하세요. 그러면 아래 화면과 같이 Black이라는 Variation의 가격, SKU#, 상품사진, 재고, 배송방법등 상세한 정보를 입력하게 됩니다.
Enable Reviews – 이 상품에 대해서 고객의 Review를 사용/비사용을 결정 합니다.[fusion_separator style_type=”single|dotted” hide_on_mobile=”small-visibility,medium-visibility,large-visibility” class=”” id=”” sep_color=”#000000″ top_margin=”20″ bottom_margin=”20″ border_size=”” icon=”” icon_circle=”” icon_circle_color=”” width=”” alignment=”center”][/fusion_separator]
Product Category 와 Product Tag를 선택 합니다.
새로운 Category와 Tag를 입력 할 수 도 있습니다.
보다 자세한 설명은 우커머스(WooCommerce) 상품카테고리, 태그, 속성 를 참고하세요.[fusion_separator style_type=”single|dotted” hide_on_mobile=”small-visibility,medium-visibility,large-visibility” class=”” id=”” sep_color=”#000000″ top_margin=”20″ bottom_margin=”20″ border_size=”” icon=”” icon_circle=”” icon_circle_color=”” width=”” alignment=”center”][/fusion_separator]
Product Images 및 Product Gallery 를 업로드 합니다.
보다 자세한 설명은 우커머스(WooCommerce) 상품 이미지를 참고하세요.[fusion_separator style_type=”single|dotted” hide_on_mobile=”small-visibility,medium-visibility,large-visibility” class=”” id=”” sep_color=”#000000″ top_margin=”20″ bottom_margin=”20″ border_size=”” icon=”” icon_circle=”” icon_circle_color=”” width=”” alignment=”center”][/fusion_separator]
Publish panel 에 있는 “Catalog Visibility” 를 이용해서 상품을 어떻게 보여줄 것인지 설정 할 수 있습니다.
이상과 같이 우커머스 상품등록에 대해서 알아보았습니다.
디자인테마(주로유료테마) 와 플러그인들을 통해서 상품의 정보를 보다 다양한 형태로 보여줄 수도 있습니다.
예를들어 Flatsome이라는 디자인테마를 사용하시면 아래 화면과 같이 별도의 Extra Tab을 제공합니다.
[fusion_fontawesome icon=”fa-play-circle” size=”” flip=”” rotate=”” spin=”no” alignment=”” hide_on_mobile=”small-visibility,medium-visibility,large-visibility” class=”” id=”” circle=”yes” iconcolor=”” circlecolor=”” circlebordercolor=”” animation_type=”” animation_direction=”down” animation_speed=”0.1″ animation_offset=””][/fusion_fontawesome] Faltsome 디자인테마를 적용하면 나타나는 Extra Tab입니다.
아래와 같이 상품 이미지에 왼쪽이나 오른쪽에 보여지는 ‘New’, ‘Popular’등의 Bubble을 지정 할수도 있고, 일반적인 상품 설명 Tab옆에 새로운 Tab을 추가 할 수 도 있습니다. 또한, 상품 이미지를 클릭하면 동영상을 볼 수 있도록 설정도 가능 합니다.
[fusion_fontawesome icon=”fa-share-square-o” size=”” flip=”” rotate=”” spin=”no” alignment=”” hide_on_mobile=”small-visibility,medium-visibility,large-visibility” class=”” id=”” circle=”yes” iconcolor=”” circlecolor=”” circlebordercolor=”” animation_type=”” animation_direction=”down” animation_speed=”0.1″ animation_offset=””][/fusion_fontawesome]DIY 쇼핑몰 따라하기를 참조하시면 보다 자세한 내용을 확인 하실 수 있습니다.
B2B (Business-to-Business), B2C (Business-to-Consumer)인지 결정 합니다 : 사업체를 대상으로 할것인지 제품을 사용할 최종 소비자를 대상으로 할 것인지 결정합니다.
온라인 쇼핑몰의 언어를 한국어로 할것인지 영어혹은다른 언어로 할 것인지도 정합니다.
어떤 지역에 판매 할 것인지?
(2)어떤 타입의 제품을 판매할 것인지?
Physical Goods : 우리가 일반적으로 알고있는 모든 제품들을 말합니다. (예) 의류, 신발, 건강식품, 핸드폰 악세서리, TV등. 일반적으로 배송이 필요한 제품들이라고 볼수 있습니다.
Digital Goods : 배송이 필요없고 디운로드 받거나 이메일로 제품을 Delivery 할수 있는 제품들을 말합니다. (예) Ebook, 음원화일, Software, Game 등.
Services :제품이 아닌 서비스 혹은 가치를 판매하는 제품형식 입니다. (예) 컨설팅, 웹사이트 제작, 구매대행, 배송대행, 배달서비스 등.
(3)어떻게 판매할 제품을 조달할것인지?
Make ( 수작업제작 ) : 취미 혹은 전문 예술 작품등과같이 세상에 없는 유일한 제품을 만드는 방식 입니다. Physical Goods은 물론 Ebook 과 같은 Digital Goods도 해당 됩니다. 만약 자신이 특별한 무언가를 만드는 재능이 있다면 큰 부가 가치를 창출할수 있는 방식 입니다.
Manufacture ( 제조 ) : 자신의 제품 (브랜드)을 생산해줄 제조업체를 찾아서 제품을 생산해서 조달받는 방식입니다. 보다 자세한 방법은 여기를 클릭하세요.
Wholesale ( 리세일 ) : 이미 잘 알려진 브랜드 제품들을 도매가격 혹은 디스카운트된 가격에 구입해서 판매할 제품을 조달하는 방식입니다. 위험요소가 가장적은 방식으로 볼 수 있습니다.
Dropship : 실제 제품은 Dropship 파트너가 가지고 있으며 손님에게 물건을 배송하는것도 Dropship 파트너 입니다. 즉, 고객에게 주문을받고 결제처리는 본인의 웹사이트에서 발생하고 배송은 Dropshop 파트너가 하는 방식입니다.
Affiliate 제품 (제휴마케팅제품): 실제 물건을 판매하는 것이 아니고 제조회사들이 제공하는 Affiliate 제품을 내 쇼핑몰에 진열하는 방식의 제품조달 방법입니다. 대기업 혹은 꽤 큰 기업들 ,심지어 이제 시작하는 Start up들조차 자신들의 Affiliate 시스템을 운영하는 경우가 많습니다. 여러분이 블로그를 운영하고 있다면 좋은 선택이 될 수 있습니다.
(4)어떻게 경쟁자들로 부터 우위를 유지하고 고객을 유치할것인지?
Price ( 가격 ) : 경쟁자들에 비해서 저렴한 가격으로 판매하는 방법을 선택하실수 있습니다. 그러나, 일반적인 경우 큰회사들과 경쟁해서는 승산이 없습니다. 본인만의 특별한 제품을 가지고 있다면 효과를 볼수 있는 방법 입니다.
Quality ( 품질 ) : 자신만의 브랜드를 가지고 있는경우 품질은 판매의 가장 중요한요소 입니다. 잘 타게팅된 마케팅 채널과 훌륭한 품질을 함께 갖추고 있다면 판매에 결정적인 도움이 될것 입니다.
2.자신만의 쇼핑몰을 가질 것인가 ? 마켓플레이스를 활용 할 것인가?
당연히 본인의 쇼핑몰을 가지고 제품을 판매하는 것이 좋습니다.
그러나 처음에는 마케팅에 어려움을 겪을 수 있습니다. 그래서 보통 2가지를 동시에 운영하는 경우가 많습니다. 마켓플레이스에서 발생하는 오더로 인연을 맺은 손님을 다양한 방법으로 본인의 쇼핑몰로 재 방문하게 하는 것입니다
3.자신만의 쇼핑몰을 만든다면, 임대형 솔루션? or 독립형 솔루션?
4.결론, 임대형인가? or 독립형인가?
어떤 방식이 좋다, 나쁘다 라고 단정 하기는 어렵습니다.
위에서 확인한 것과 같이 각자의 방식에는 장점 및 단점이 있습니다.
여러분의 상황에 맞게 선택을 하시면 됩니다.
그러나, 아래 내용을 참조하시면 선택에 조금 도움이 되실 것이라 생각됩니다.
수수료와 커스터마이징 관련 제한 사항을 감수 하더라도 쇼핑몰 운영관련 된 부분을 크게 신경쓰지 않고 쉽고, 빨리사업을 운영하려면 Hosted Solution을 선택.
커스터마이징이 많이 필요하고 온라인 비지니스를 점차적으로 확장할 계획인 경우 Self-hosted Solution을 선택.
임대형과 독립형을 시작하기 위해서 아래 2가지 링크 중 하나를 클릭하신 후 시작하 실 수 있습니다. 🙂
페이지 만들기
페이지를 메뉴에 연결하기
Flatsome UX Builder로 페이지 꾸미기
UX Builder 를 이용한 FAQ 페이지 만들기
UX Builder 를 이용한 Contact us 페이지 만들기
Contact Form 만들기
