storefront 로 테스트 데모 사이트를 만든 후 오랜만에 업데이트 테스트를 해 보니, 테마를 2.2.4 최신 버전으로 업데이트 하거나 woocommerce 버전을 2.6.14 버전 업데이트 시도하자 사이트가 다 깨지는 현상 발생. 비슷한 경우 업데이트보다는 사이트를 재구성하여 데이터를 가져오는 것이 더 나은 선택일 수 있을 것 같다는 생각입니다. (기존 구성 : Storefront 1.5.3 + woocommerce 2.5.5 )Storefront 2.2.4 + woocommerce 3.1 조합을 이용하여 새로 사이트를 구성을 해 보니, 더 좋게 변경된 부분들이 있어서 정리를 해 보았습니다.(+ 20180628. storefront 2.3.2 + wc 3.4.3 버전으로 다시 체크 후 내용 수정)
1 . Storefront : 활성화 후 우커머스 설치 안내, 활용 방법에 대한 셑업 과정 보완 됨
▽ 우커머스 플러그인을 설치하도록 진행 유도를 하고, 세팅 과정까지 마치면 우커머스 관련 주요 페이지들 생성(shop, checkout, my-account, cart).
▽ 기능 확장용 익스텐션 및 디자인이 미리 준비된 자식테마형 테마를 소개. 진행 후 기능 보완 플러그인을 바로 설치할 수 있도록 도와줌(2.3.2에선 사라짐).
(※ storefront 2.3.2에서 확인 결과, 환경 세팅을 완료하니 더미 데이터까지 모두 설치됨)
▽ 외모 > 사용자정의 처음 이용 시 사이트 설정을 위한 간단한 가이드 제공
따라하기를 완료하면, 사이트 구성의 기본이 되는 로고, 메뉴구성, 주요 색, 버튼의 컬러까지 세팅 완료.
2 . Storefront : 기능 지원형 플러그인 추가
1) Cart Tab : 장바구니에 상품 추가 시 오른쪽에 슬라이드 되는 장바구니 탭이 표시
2) Sticky Add to Cart : 장바구니 버튼 아래로 화면이 스크롤되면 상단에 고정된 장바구니 추가를 위한 구조가 표시 (storefront 2.3.2 + 에 이미 추가)
3) product pagination : 상품 상세 페이지에서 전 후 상품 이동 버튼 추가 (storefront 2.3.2 + 에 이미 추가 – 단, 표시가 안 되어 추가 확인 필요!)
4) Footer Bar : 기본 푸터 위젯 영역 바로 위에 푸터 바 영역 추가
5) Contact Section (with jetpack) : home 화면에 컨텍트 폼을 추가 (젯팩 연결 시 피드백 폼까지 추가 가능)
디자인은 계속 아쉬움…;
디자인은 계속 아쉬움…;
+ 위 폼에서 작성된 내용은 어드민 > 피드백에서 확인 가능 (단, 어드민에서 답장은 X)
3 . Woocommerce : my-account 페이지 탭 메뉴 구조화 (※ wc 2.6 이후 적용)
4 . woocommerce : 싱글 프로덕트 상품 이미지 표시 기능 개선
1) 전체화면 라이트박스 (돋보기 클릭)
2) 이미지에 마우스 호버 시 돋보기 효과 발생
3) 상품 갤러리 슬라이드화 (클릭 시 상품 이미지가 슬라이드)
5 . Storefront를 코드 수정 없이 디자인 수정이 가능한 Extensions 번들 제공 ($69)
Storefront 디자인 및 우커머스의 각종 페이지의 디자인 구조도 변경 가능토록 해 줌
( ※ Storefront의 디자인 수정이란 대부분 외모 > 사용자 정의하기, 위젯에서 모두 이루어짐 )
( ※ Storefront의 디자인 수정이란 대부분 외모 > 사용자 정의하기, 위젯에서 모두 이루어짐 )
★Storefront Powerpack => Storefront Powerpack is a combination of the previously offered WooCommerce Designer, Storefront Designer, and Storefront Checkout Customizer extensions, plus brand new functionality and features. (스토어프론트를 커스텀하기 쉽게 해 주는 기존의 여러 익스텐션들이 하나의 팩으로 묶임 !!! )
▽ 기존 스토어프론트 테마 주요 커스텀 익스텐션들 구성 (약 $200) > 테마 가격 정도로 낮춘 것으로 보임
6 . 모바일 뷰 편의성 제공
햄버거 메뉴 , 하단 우커머스 바로가기 버튼 제공 (like 앱)
7 . 무료 플러그인들로 최대한 활용할 수 있는 방법들
어드민 > 플러그인 > 플러그인 추가 > ‘storefront’ 키워드로 플러그인 검색 >> 무료storefront 기능 지원 플러그인들 확인 가능
1) Homepage Control : 홈페이지 탬플릿 선택 시 노출이 되는 각 요소들을 on/off하거나 순서 변경 가능하도록 함
2) Storefront Header Picker : 헤더 디자인 구조를 변경할 수 있도록 함
3) Storefront Top Bar : 헤더 위 탑 바를 생성
4) Title Toggle for Storefront Theme : 각 페이지의 타이틀 표시 여부 설정 가능 (편집 메타박스에서 체크)
EX : Shop 페이지에서 ‘Shop’ 타이틀 제거 등
5) [symple_highlight color=”blue”]Storefront Add Slider[/symple_highlight] : 헤더 아래 기타 플러그인르로 제작 가능한 슬라이드 표시 가능 (정적인 전면 페이지 > 쇼트코드로 기재)
△ 레볼루션 슬라이드를 메인 화면에 쇼트코드를 입력하여 추가한 모습
6) Page Builder by SiteOrigin + SiteOrigin Widgets Bundle : 페이지 빌더의 추가로 사이트 소개용 페이지를 디자인에 맞게 적용하는 데 도움을 줌
7) To Top : 화면 아래쪽에서 위로가기 버튼 생성
8) Beomps Korea Postcode Search : 국내 주소 검색 플러그인
워드프레스와 우커머스가 한식구가 되면서 제가 보기엔 길지 않은 기간 내에 많은 변화가 있었던 거 같습니다.
다목적 테마로 상점을 구성하다보면 불필요한 리소스를 많이 잡아먹는 경우도 발생하는데, 상품 구매 시스템의 디자인이나 편의성에 더 중점을 두시고자 하는 경우, Storefront 테마 활용도 참 좋아 보입니다. 물론 woocommerce 자체 제작 테마이니 속도는 기본.
끝.