워드프레스 쇼핑몰 테마 Storefront 설치

오늘은 워드프레스 쇼핑몰 테마인 Storefront 설치에 대해서 알아보겠습니다.

Storefront 는 기본적인 쇼핑몰 형태를 갖춘 테마입니다.

이 테마를 설치하면 우커머스 플러그인도 같이 설치할 수 있습니다.

오늘 해 볼것은 Storefront 테마 설치와 우커머스 플러그인 설치 그리고 상품 하나 등록까지 해보겠습니다.

자세한 설정을 한번에 다 하기에는 지면이 너무 길어지는 관계로,

간략하고 빠르게 설치하고 쇼핑몰 페이지 확인까지 한번 해보는 것으로 하겠습니다.

1. 워드프레스 쇼핑몰 테마 Storefront 설치

먼저 워드프레스 관리자 화면에서 외모 > 테마 > 테마추가 화면으로 이동합니다.

검색 화면에 Storefront 라고 입력하고 검색을 합니다.

그럼 아래 화면에서 두번째로 보이는 테마인

Storefront 테마가 검색되고, '설치' 버튼을 눌러서 설치를 해 보겠습니다.

설치가 완료되면, 설치 버튼으 활성화 버튼으로 바뀌는데,

홈페이지에 테마를 적용하기 위해서 활성화 버튼을 눌러 해당 테마를 적용해 보도록 하겠습니다.

2. 우커머스 플러그인 설치

Storefront 테마를 활성화 하면,

아래 화면과 같이 '우커머스' 플러그인을 설치하라는 친절한^^; 안내 메세지가 나옵니다.

'Install WooCommerce' 버튼을 클릭하여 플러그인을 설치해 보겠습니다.

설치가 완료되면,

아래와 같이 활성화 버튼이 나오는데, 활성화 버튼을 눌러 플러그인을 적용해 보도록 하겠습니다.

활성화 과정에서 아래와 같이 몇 단계에 걸처 설정하는 화면이 나옵니다.

대부분의 기능은 나중에 관리자 화면에서 수정이 가능하기 때문에 그냥 패스 하도록 하겠습니다.

일단 아래와 같이 지역정보를 간략하게 입력해 줍니다.

그리고 통화는 '한국 원화'로 선택을 합니다.

개선 사항 부분에 체크박스는 헤제하고 다음으로 넘어 갑니다.

다음은 결제 수단을 선택하는 화면인데,

여기서도 PayPal 부분의 활성화 버튼을 끄고 다음으로 넘어가겠습니다.

다음은 배송관련 내요인데,

여기서도 2개의 활성화 버튼을 끄고 다음으로 넘어 가겠습니다.

MailChimp 부분도 체크를 풀고 다음으로 넘어 가겠습니다.

여기서도 페이지 제일 하단에 있는 '이 단계 건너뛰기'를 누르고 다음으로 넘어 가겠습니다.

설정 화면은 모두 끝이 났으며,

'상품 추가하기' 버튼을 눌러 상품 추가 화면으로 이동해 보겠습니다.

3. 상품 등록

글 쓰기 게시판 형태와 동일한 화면이 열리는데,

먼제 상품 제목과 상품 설명 내용을 임시로 적당히 입력을 합니다.

화면을 아래로 내리면,

가격 설정하는 부분이 있습니다. 정상 가격과 할인 가격을 임의로 입력해 보겠습니다.

그리고 아래 상품 요약 설명은 가격 아래 표시되는 멘트인데,

'오픈 행사 기간입니다.' 라고 입력해 두고 나중에 홈페이지에서 어떻게 보이는지 확인해 보겠습니다.

그리고 우측 하단에 보시면 상품 이미지를 등록하는 영역이 있습니다.

보이시는것 처럼 적당한 상품 이미지를 등록해 줍니다.

그리고 상단에 활성 또는 업데이트 버튼을 클릭하여 저장을 합니다.

그럼 아래 화면처럼 배송 구역을 설정하라는 화면이 나옵니다.

간단히 설정을 하기위해 '배송 구역 설정' 버튼을 누릅니다.

다음은 화면 하단으로 내리시면 '배송 구역 추가하기' 버튼이 있는데, 이것을 클릭합니다.

아래 화면처럼,

구역명에 대한민국을, 구역 포함 지역에도 대한민국을 입력 합니다.

그리고 배송방법은 고정요금으로 설정하고 저장을 합니다.

홈페이지 화면으로 이동해서,

우리가 등록한 상품이 어떻게 나타나는지 살펴보도록 하겠습니다.

기본 쇼핑몰 구조를 하고 있으며, 각각 입력한 내용들을 확인할 수 있습니다.

그런데 가격 부분에 소숫점 2자리가 표시가 되고 있습니다.

이것을 수정해 보도록 하겠습니다.

관리자 화면에서 우커머스 > 설정 부분에 들어가서 일반 탭 화면으로 이동합니다.

화면을 하단으로 스크롤해서 내리면 아래와 같이 소수점기호와 소수 자리수 설정하는 부분이 있습니다.

소수점 기호는 빈값으로 만들고, 소수 자릿수는 0으로 입력하고 저장을 합니다.

다시 홈페이지에 와서 상품 상세페이지를 확인해 보면,

가격 부분에 소숫점 부분이 없어진 것을 확인 할 수 있습니다.

오늘은 Storefront 테마 설치와 우커머스 플러그인 설치를 빠르게 진행해 보았습니다.

다음 시간에는 각각의 설정 부분을 자세히 알아 보도록 하겠습니다.

수고 많으셨습니다. ^^