Happy Addons를 사용하여 WooCommerce 상점을 사용자 정의하는 방법
게시 됨: 2021-02-26전자 상거래 비즈니스는 기술의 급속한 성장과 함께 나날이 발전하고 있습니다. 일반적으로 이미 오프라인 상점이 있든 없든 온라인 상점을 구축하는 것은 비교적 쉽고 저렴하며 위험이 적습니다.
하지만 상점 페이지의 디자인을 최우선 순위로 유지해야 하는 이유는 무엇입니까?
귀하의 제품은 고유합니다. 이를 보여주는 제품 페이지도 고유해야 합니다.
우커머스
잘 설계된 것은 사용자가 구매 프로세스를 쉽게 만듭니다. 그렇기 때문에 전자 상거래 사이트를 적절한 방식으로 사용자 지정해야 합니다.
다행히도 이 작업을 수행하기 위해 전문가나 개발자가 될 필요는 없습니다. 오히려 편리하고 편리한 페이지 빌더 도구를 사용하여 상점을 사용자 정의할 수 있습니다. 확실히 인상적이고 경쟁력 있게 서서 더 많은 매출과 수익을 창출하는 데 도움이 될 것입니다!
따라서 오늘 게시물에서는 WooCommerce 스토어를 쉽게 사용자 정의하고 Happy Addons를 사용하여 멋진 기능을 추가하는 방법을 보여드리겠습니다. 기본적인 질문부터 시작하겠습니다.
좋은 제품 페이지는 무엇입니까?
제품 페이지는 조직적인 방식으로 고객에게 온라인 제품을 선보이는 곳입니다. 따라서 제품을 쉽게 검색하고 선택하고 구매할 수 있습니다.
![WooCommerce 상점 페이지 사용자 정의](/uploads/article/47500/YKCHfUnF9hASi4Kn.png)
요즘 사람들은 오프라인 쇼핑보다 온라인 쇼핑을 더 선호합니다. 전 세계적인 유행병으로 인해 전체 쇼핑 시나리오는 실제 매장에서 온라인 매장으로 전환되었으며, 이는 전체 구매의 95% 이상입니다. 그렇기 때문에 고객을 유지하는 것이 더 중요하고 경쟁력이 있습니다.
당신이 물건( 휴대폰 )을 사기 위해 온라인 상점에 들어간다고 가정해 보자. 첫 번째 요구 사항은 무엇입니까?
쉬운 쇼핑 경험. 오른쪽?
예, 간단한 체크아웃 프로세스를 통한 손쉬운 쇼핑 경험이 상점 또는 제품 페이지의 구성 방식을 결정합니다. 또한 고객이 원하는 것을 정확하게 찾을 수 있도록 도와줍니다. 잘 맞춤화 된 상점 페이지가 작동하는 곳입니다.
WooCommerce 스토어 커스터마이징이 다음에 중요한 이유를 확인해 봅시다.
- 훌륭한 브랜드 아이덴티티 구축
- 더 많은 고객 참여
- 사용자 경험 향상
- 다른 경쟁자와 차별화
당신은 또한 좋아할지도 모릅니다: 멀티벤더 마켓플레이스를 위한 벤더를 찾고 설득하는 방법
Happy Addons를 사용하여 WooCommerce 제품/상점 페이지를 사용자 정의하는 방법
![WooCommerce 상점 페이지 사용자 정의](/uploads/article/47500/hKoj3oM2zmsZared.png)
이제 WooCommerce 상점 페이지를 사용자 정의하는 과정을 시연할 차례입니다. 단계를 주의 깊게 따르고 WordPress 기반 WooCommerce 사이트에 적용하십시오.
WooCommerce 스토어 페이지를 사용자 지정하기 전의 전제 조건
- 워드프레스
- 우커머스 (무료)
- 엘리멘터 (무료)
- 해피 애드온( 무료 및 프로 )
먼저, 웹 사이트에 이러한 모든 전제 조건을 성공적으로 설치하고 활성화했는지 확인하십시오.
Happy Addons를 사용하여 WooCommerce 상점 페이지를 사용자 지정하는 방법을 보여드리겠습니다.
1단계: 상점 페이지 열기
WordPress 대시보드에서 WooCommerce Shop 페이지로 이동합니다. 그런 다음 Elementor로 편집을 클릭합니다.
![WooCommerce 상점 페이지 사용자 정의](/uploads/article/47500/ZO04P7eBeUfumgA5.png)
그런 다음 기본 WooCommerce 페이지가 열립니다. 그리고 여기에서 스토어 커스터마이제이션 여정이 시작됩니다.
![엘리멘터 캔버스](/uploads/article/47500/hsdUZGlfowpSckP1.png)
2단계: HappyAddons WooCommerce 위젯 활용
맞춤화를 더 쉽게 하기 위해 4개의 놀라운 Happy Add-ons WooCommerce 위젯을 사용할 것입니다.
- 제품 그리드:- HappyAddons Pro 제품 그리드 위젯을 사용하여 그리드 보기에 유리하게 제품을 표시할 수 있습니다.
- 제품 캐러셀:- 고객의 관심을 끌 수 있는 완벽한 WooCommerce 제품 캐러셀 위젯
- 제품 카테고리 그리드:- WooCommerce 제품 카테고리를 표시하는 데 가장 적합합니다.
- 제품 카테고리 캐러셀:- 제품 카테고리 캐러셀 위젯을 사용하여 특정 카테고리를 기반으로 캐러셀에서 제품을 홍보하여 더욱 유익하게 만들 수 있습니다.
NB: 이들은 모두 Happy Addons의 프로 기능입니다. 따라서 사이트에서 사용하려면 프리미엄 버전으로 무료 업그레이드해야 합니다.
제품 캐러셀 위젯 사용
WooCommerce 사이트에서 Product Carousel 위젯을 활용하는 방법을 살펴보겠습니다. 위젯을 사용하려면 위젯을 선택하고 화면에 드래그 앤 드롭해야 합니다.
![](/uploads/article/47500/kUd3mAHR5FbkOxVu.png)
따라서 위젯을 추가하면 다음과 같은 인터페이스가 표시됩니다.
![제품 캐러셀](/uploads/article/47500/uoKHd7vUVjrLGEcF.gif)
여기에 네 가지 옵션이 있습니다.
- 공들여 나열한 것
- 질문
- 캐러셀 설정
- 래퍼 링크
레이아웃에서 두 가지 다른 스킨을 선택할 수 있습니다. 클래식과 모던. 원하는 경우 옵션을 켜거나 끕니다. 그리고 디자인에 따라 이미지 콘텐츠를 정렬합니다.
![제품 캐러셀 위젯 사용](/uploads/article/47500/GKuCvc30GsAq2Ial.png)
이제 쿼리 옵션을 클릭하여 더 많은 것을 사용자 정의하십시오. 여기에서 카테고리에 따라 제품을 선보일 수 있습니다.
![WooCommerce 상점 페이지 사용자 정의](/uploads/article/47500/hN2OtJxZe4OE2SdH.png)
또한 일부 애니메이션 기능을 디자인에 추가할 수 있습니다. 그렇게 하려면 캐러셀 설정 을 클릭해야 합니다. 예를 들어 애니메이션 속도, 슬라이드, 슬라이드 화살표 등을 설정합니다.
![제품 캐러셀 위젯 적용](/uploads/article/47500/t04L7qrIIYUSu2B5.gif)
결국 디자인에 래퍼 링크를 추가할 수 있습니다.
그러나 스타일 버튼을 클릭하여 디자인 스타일을 지정할 수 있습니다.
![WooCommerce 상점 페이지 사용자 정의](/uploads/article/47500/SBWHwcSPHfOx9hj1.png)
제품 캐러셀 위젯에 대해 자세히 알아보려면 공식 문서를 확인하세요.
제품 범주 그리드 사용
마찬가지로 상품 카테고리 그리드 위젯을 선택하여 화면에 붙여넣습니다.
![제품 카테고리 위젯](/uploads/article/47500/l8dg3Zrm625Tlx1o.png)
위젯을 추가하면 카테고리 미리보기가 표시됩니다. 또한 화면 왼쪽에 있는 유용한 옵션을 사용할 수 있습니다.
![상품 카테고리 설정](/uploads/article/47500/5Xb6umjpStHHfAC2.png)
다음으로 쿼리 섹션을 사용자 지정하여 디자인에 더 많은 기능을 추가합니다. 예를 들어 열, 스킨 스타일, 이미지 크기, 이미지 오버레이 추가 등을 설정할 수 있습니다.
![WooCommerce 상점 페이지 사용자 지정](/uploads/article/47500/YfAMThMJqD6RBLv4.png)
그러나 여기에 모든 범주를 표시하지 않으려면 해당 범주를 제외하거나 포함할 수도 있습니다. 사용자에게 올바른 카테고리를 표시하고 있는지 확인하세요.
![](https://s.stat888.com/img/bg.png)
![공들여 나열한 것](/uploads/article/47500/5drtghln53dPHUVY.png)
디자인 스타일을 지정하려면 스타일 버튼을 클릭합니다. 여기에서 네 가지 옵션을 사용할 수 있습니다.
- 레이아웃 :- 레이아웃 디자인, 높이, 무게, 행 간격 변경
- 항목 상자 :- 이미지의 높이, 무게, 색상 등을 변경할 수 있습니다.
- 콘텐츠 :- 콘텐츠 색상, 배경, 높이, 두께, 간격 등을 변경합니다.
- 더 많은 버튼 로드 :- 여기에서 더 많은 카테고리 버튼 로드 , 글꼴 색상, 타이포그래피, 배경 색상 등을 사용자 정의할 수 있습니다.
![](/uploads/article/47500/WDTguAvLb6aofpnH.png)
그러나 WordPress 사이트에서 이 위젯을 더 많이 활용하려면 여기에서 공식 문서를 확인할 수 있습니다.
제품 카테고리 캐러셀 위젯
위젯을 선택하고 선택한 영역으로 드래그합니다.
![WooCommerce 상점 페이지 사용자 정의](/uploads/article/47500/h0YZRLBwAj0JWBHt.png)
그 후에 모든 옵션을 사용할 수 있습니다. 이 위젯은 제품 캐러셀 위젯과 거의 동일합니다. 제품 카테고리는 카테고리를 표시하고 제품 캐러셀은 제품을 표시합니다.
![제품 캐러셀 위젯 설정](/uploads/article/47500/zV45bMsIm0wrzUJ9.gif)
레이아웃 버튼을 클릭한 후 스킨, 이미지 크기, 카운트 수를 설정하고 이미지 오버레이를 정의할 수 있습니다. 따라서 이를 올바르게 구현할 수 있다면 더 아름답고 매력적으로 보일 것입니다.
![캐러셀 설정](/uploads/article/47500/6vKgkjy8TNM8EeJr.png)
캐러셀에서 카테고리를 제외하거나 포함하려면 검색어를 클릭하세요. 또한 순서에 따라 캐러셀을 설정할 수 있습니다.
![WooCommerce 상점 페이지 사용자 정의](/uploads/article/47500/aOOKstQf6CiQQn2a.png)
그런 다음 회전판 설정을 클릭하여 애니메이션 속도, 자동 재생 옵션, 탐색 스타일 및 슬라이드를 변경합니다. 그러면 WooCommerce 상점 페이지를 사용자 지정하여 가장 선호하는 제품 카테고리를 사용자에게 보여줄 수 있습니다.
![WooCommerce 상점 페이지 사용자 정의](/uploads/article/47500/Oq3F3UnSwz6fGk7L.png)
어쨌든 제품 카테고리 캐러셀에 대한 자세한 가이드라인을 얻으려면 언제든지 공식 문서를 확인할 수 있습니다.
제품 그리드 위젯
WooCommerce 상점 페이지에서 완벽한 그리드 위치에 제품을 표시하는 데 문제가 있다면? 예, Product Grid 위젯을 사용하여 수행할 수 있습니다.
그렇게 하려면 위젯을 클릭하고 선택한 영역으로 드래그하여 위젯 사용을 시작하십시오. 따라서 위젯을 추가하면 모든 제품이 그리드 보기로 추가됩니다.
그리고 사용자 정의할 수 있는 레이아웃 옵션이 있습니다. 모든 제품이 화면에 자동으로 추가됩니다. 여기에서 가격 페이지, 등급, 배지, 카트 버튼 및 빠른 보기 버튼을 표시할 수 있습니다.
![제품 그리드 위젯](/uploads/article/47500/1uthA0nGiqutJLLX.png)
원하는 상품을 보여주고 원하는 상품을 추가하거나 제외할 수 있습니다.
![제품 그리드 쿼리](/uploads/article/47500/NpxQE2qo93DkuB8O.png)
이 위젯의 사전 설정에서 장바구니에 추가 버튼, 빠른 제품 보기 버튼을 사용자 정의하고 링크를 첨부할 수 있습니다.
![제품 그리드 고급 설정](/uploads/article/47500/fUyRjIiZkNPIU58Y.png)
마지막으로 스타일 버튼을 사용하여 디자인에 스타일을 부여할 수 있습니다. 여기에서 배지, 콘텐츠, 이미지, 카트 및 빠른 보기 등을 사용자 지정할 수 있습니다.
![WooCommerce 상점 페이지 사용자 정의](/uploads/article/47500/3mi1Hybv2N9otd8V.gif)
이것이 바로 Happy Add-ons WooCommerce 위젯이 상점 페이지를 사용자 정의하는 데 도움이 되는 방법입니다. 그러니 시간을 갖고 신중하게 단계를 따라 WooCommerce 상점 페이지에 이 모든 것을 구현하세요.
![해피 엘리멘터 애드온](/uploads/article/47500/KNF2CoOPyn1HdTQ3.png)
WooCommerce Store의 최종 프리뷰
![](/uploads/article/47500/rcnVOUDn2emFsic8.gif)
위에서 보여드린 프로세스는 단일 공급업체 상점 페이지에 대한 것입니다. 그러나 Dokan을 사용하여 본격적인 멀티벤더 웹사이트를 디자인하고 싶다면 다음 기사를 확인하십시오.
Dokan을 사용하여 뷰티 케어 아이템을 위한 나만의 마켓플레이스 웹사이트 구축
WooCommerce 제품 페이지를 사용자 지정하는 동안 피해야 할 실수
![전자상거래 실수](/uploads/article/47500/K9E3UCilzz93C92z.png)
귀하만이 귀하의 사이트 성능을 귀하가 원하는 만큼 강력하게 또는 낮게 보장할 수 있습니다. 일반적으로 우리 모두는 우리의 웹사이트가 전문적이고 보기 좋고 매력적으로 보이기를 원합니다. 그러나 이것은 그렇게 쉽게 일어나지 않을 수 있습니다.
이것이 우리 모두 웹사이트를 변경하기 전에 올바른 결정을 내려야 하는 이유입니다.
그러나 웹 사이트에 변경 사항을 추가하는 것에 대해 생각하는 동안 우리 중 많은 사람들이 전자 상거래 시장 실수 와 같은 어리석은 실수를 합니다. 우리는 모두 바쁘거나 적절한 구조, 특히 전자 상거래 상점을 사용자 지정하는 것을 잊고 있기 때문입니다.
귀하를 돕기 위해 귀하가 알아야 할 몇 가지 중요한 시장 실수가 있습니다. 그리고 이것은 의심할 여지 없이 모든 노력을 망치고 비즈니스 성장을 방해할 수 있습니다.
이제 WooCommerce 상점 페이지를 사용자 정의하기 전에 피해야 할 일반적인 실수를 확인하십시오.
- 제 시간에 WordPress를 업데이트하지 않음
- 이전 버전의 WooCommerce 사용
- 오래된 플러그인 유지
- SSL 인증서를 사용하지 않음
- 사용자 이름으로 "관리자"
- "무료" WordPress 테마 사용
- 관련 없는 카테고리 및 태그가 너무 많습니다.
- 사용자 경험에 초점을 맞추지 않음
- 모바일 대응에 최적화되지 않은 스토어
- Google 애널리틱스를 잊어버림
WooCommerce 상점 페이지를 사용자 정의하기 전에 피해야 할 실수입니다. 따라서 비용이 많이 드는 실수를 피하고 싶거나 전자 상거래 비즈니스를 흔들고 싶다면 이러한 실수가 확실히 도움이 될 수 있습니다.
마지막 말
자, 포스팅이 끝났습니다. WooCommerce 상점 페이지를 사용자 지정하는 가장 쉬운 방법을 보여드리기 위해 최선을 다했습니다. 그리고 Happy Addons의 WooCommerce 위젯은 의심할 여지 없이 사용하기 쉽습니다.
따라서 기존 제품 페이지 모양이 마음에 들지 않고 제품 페이지에 약간의 변형을 원하는 경우 사이트에서 이러한 기능을 시도하고 표시된 단계를 따를 수 있습니다.