WooCommerce 페이지를 만드는 방법: 2가지 방법
게시 됨: 2021-02-13스토어에 페이지를 추가하고 싶지만 어떻게 해야 할지 잘 모르십니까? 이 가이드에서는 WooCommerce 페이지를 단계별로 만드는 다양한 방법을 보여줍니다(코딩 필요 없음).
WooCommerce는 페이지를 추가하여 온라인 상점을 사용자 지정할 수 있는 유연성을 제공합니다. 모든 기본 WooCommerce 페이지 또는 사용자 정의 페이지를 만들 수 있습니다. 이를 수행하는 방법을 보여주기 전에 페이지를 만들거나 다시 설치할 때의 이점을 더 잘 이해하겠습니다.
WooCommerce 페이지를 생성하거나 다시 설치하는 이유는 무엇입니까?
사용자가 WooCommerce 페이지를 만드는 가장 일반적인 이유 중 하나는 일부가 없기 때문입니다. WooCommerce를 설정하면 대부분의 기본 페이지가 자동으로 생성됩니다. 그러나 일부 단계를 건너뛰면 WooCommerce가 온라인 상점에 필요한 모든 페이지를 생성하지 못할 수 있습니다. 그런 경우에 좋은 소식은 해당 페이지를 쉽게 추가할 수 있다는 것입니다.
상점에 없는 경우 반드시 만들어야 하는 WooCommerce 페이지 중 일부는 다음과 같습니다.
- 쇼핑 페이지: 쇼핑 페이지는 온라인 상점의 모든 제품을 표시하는 곳입니다. 상상할 수 있듯이 이것은 비즈니스에 큰 영향을 미칠 수 있으므로 모든 온라인 상점에서 필수품입니다. 상점 페이지를 사용자 정의하는 방법을 찾고 있다면 이 가이드를 참조하세요.
- 장바구니 페이지: 고객이 쇼핑 페이지에서 상품을 구매하고자 할 때 장바구니 페이지에 저장됩니다. 구매자가 지불하기 전에 주문을 검토할 수 있는 곳입니다. 일부 플러그인은 체크아웃 프로세스를 단순화하고 전환율을 높이기 위해 체크아웃에 장바구니 페이지를 직접 포함합니다.
- 결제 페이지: 사용자가 제품에 대해 비용을 지불하고 판매를 종료하는 곳입니다. 쇼핑 페이지에서 제품을 선택하고 장바구니 페이지에서 주문을 검토한 후 고객은 체크아웃 페이지에서 지불 게이트웨이를 통해 지불합니다. 그런 다음 주문이 완료되고 배송 프로세스가 시작됩니다(실제 제품인 경우). 위에서 언급했듯이 Direct Checkout과 같은 플러그인은 구매 프로세스의 속도를 높이기 위해 체크아웃 페이지에 장바구니 페이지를 포함합니다.
- 내 계정 페이지: 내 계정 페이지는 모든 고객의 개인 정보, 청구서 및 배송 주소를 저장하는 곳입니다. 여기에서 쇼핑객은 주문 및 설정을 관리할 수 있습니다.
WooCommerce 페이지를 만드는 방법
WooCommerce 페이지를 만들 수 있는 몇 가지 다른 방법이 있습니다.
- WordPress 대시보드에서
- 단축 코드 포함
두 가지 방법 모두 페이지를 쉽게 추가할 수 있습니다. 이 가이드에서는 가장 적합한 옵션을 선택할 수 있도록 두 가지를 모두 살펴보겠습니다.
1. WordPress 대시보드에서 WooCommerce 페이지를 만드는 방법
WordPress 대시보드에서 모든 기본 WooCommerce 페이지 또는 Shop 페이지를 만들 수 있습니다. 아래에서 두 시나리오를 모두 설명합니다.
1. 모든 기본 WooCommerce 페이지 생성
WordPress 대시보드에서 기본 WooCommerce 페이지를 만들고 설치하는 것은 매우 쉽고 몇 번의 클릭만 필요합니다.
먼저 WooCommerce > 상태 로 이동합니다. 그런 다음 도구 탭 아래에 기본 WooCommerce 페이지를 만드는 옵션이 표시됩니다. 페이지 만들기 버튼을 클릭하기만 하면 누락된 페이지를 스토어에 추가할 수 있습니다.
참고: 누락된 페이지만 생성하고 스토어에 이미 존재하는 기본 페이지는 교체하지 않는다는 점에 유의하십시오.
예를 들어 Shop, Cart 및 Checkout 페이지가 있는 온라인 상점이 있지만 내 계정 페이지가 없다고 가정해 보겠습니다. 페이지 만들기 를 누르면 내 계정 페이지만 추가되고 다른 모든 페이지는 그대로 유지됩니다. 그게 다야! 상점에서 누락된 WooCommerce 페이지를 방금 만들었습니다 .
2. WordPress 대시보드에서 쇼핑 페이지 만들기
WordPress 대시보드에서 Shop 페이지를 만드는 것도 매우 쉽습니다.
대시보드에서 페이지 > 새로 추가 로 이동하기만 하면 됩니다. 그런 다음 페이지에 Shop 제목을 추가하고 게시 를 누릅니다.
그런 다음 WooCommerce > 설정 으로 이동하여 제품 탭으로 이동합니다. Shop 페이지 옵션을 클릭하고 드롭다운 메뉴에서 방금 생성한 Shop 페이지를 선택한 다음 변경 사항을 저장합니다.
그게 다야! 페이지를 미리 보면 기본 쇼핑 페이지가 표시됩니다. 페이지에는 온라인 상점에 대해 나열한 모든 제품이 자동으로 표시됩니다.
2. 숏코드로 WooCommerce 페이지를 만드는 방법
WordPress 대시보드에서 WooCommerce 페이지를 만드는 것은 쉽지만 스토어에 페이지를 추가하는 또 다른 편리한 방법이 있습니다. 이 방법은 단축 코드를 사용합니다. 단축 코드는 긴 코드 스크립트를 작성하지 않고도 콘텐츠를 표시하거나 기능을 추가하는 데 도움이 되는 작은 조각입니다. 단축 코드에 익숙하지 않은 경우 초보자를 위한 이 전체 가이드를 살펴보는 것이 좋습니다.
WooCommerce에는 이전 방법에 비해 상점에 페이지를 추가할 수 있는 유연성을 제공하는 기본 단축 코드가 포함되어 있습니다.
단축 코드를 사용하여 WooCommerce 페이지를 생성하려면 페이지 > 새로 추가 로 이동하여 생성하려는 페이지의 제목을 추가하고 해당 단축 코드를 사용하기만 하면 됩니다. 몇 가지 예를 살펴보겠습니다.
1. 장바구니 페이지
장바구니 페이지를 추가하려면 새 페이지를 만들고 "장바구니"라고 부르고 다음 단축 코드를 추가하고 게시하십시오.
[ woocommerce_cart
_카트 ]
그런 다음 WooCommerce > 설정 으로 이동하여 고급 탭을 엽니다. 그런 다음 장바구니 페이지 옵션에 대해 방금 생성한 장바구니 페이지를 선택하고 저장합니다.
이제 막 생성한 장바구니 페이지에서 쇼핑객이 장바구니에 담은 제품을 표시할 수 있습니다.
2. 결제 페이지
마찬가지로 기본 WooCommerce 체크아웃 페이지를 만들고 싶다면 새 페이지를 만들고 "Checkout"이라고 부르기만 하면 됩니다. 그런 다음 다음 단축 코드를 추가하고 페이지를 게시합니다.
[ woocommerce_checkout
_체크아웃 ]
다시 한 번 WooCommerce > 설정 으로 이동하여 고급 탭을 엽니다. 그런 다음 방금 생성한 결제 페이지를 결제 페이지의 옵션으로 선택하고 변경 사항을 저장합니다.
기본 체크아웃 페이지는 괜찮지만 눈에 띄고 전환율을 높이려면 사용자 정의해야 합니다. 이 경우 WooCommerce 결제 페이지를 편집하는 방법에 대한 가이드를 확인하세요.
3. 내 계정 페이지
WooCommerce 내 계정 페이지를 만들려면 새 페이지를 만들고 "내 계정"이라고 한 다음 다음 단축 코드를 추가하기만 하면 됩니다.
[ woocommerce_my_account
]
그런 다음 WooCommerce > 설정 으로 이동하여 고급 탭을 엽니다. 마지막으로 방금 생성한 내 계정 페이지를 내 계정 페이지의 옵션으로 선택하고 변경 사항을 저장합니다.
내 계정 페이지를 멋지게 꾸미고 싶다면 맞춤 설정 방법에 대한 단계별 가이드를 확인하세요.
자, 이것이 단축 코드를 사용하여 WooCommerce 페이지를 만드는 방법입니다. 짧고 달콤하지 않습니까?
지금까지 스토어에 페이지를 추가하는 다양한 방법을 살펴보았습니다. 하지만 이는 첫 번째 단계일 뿐입니다. 상점을 한 단계 더 높이려면 페이지를 사용자 정의하고 최대한 활용해야 합니다. 방법을 살펴보겠습니다.
WooCommerce 페이지를 사용자 정의하는 방법
기본 WooCommerce 기능에는 페이지 사용자 정의와 관련하여 매우 제한된 옵션이 있습니다. 버튼 및 필드 옵션과 같은 일부 중요한 요소에 대한 추가 옵션이 부족합니다. 따라서 상점을 최대한 활용하려면 페이지를 약간 변경해야 합니다.
좋은 소식은 WooCommerce 페이지를 사용자 정의하는 것이 페이지를 만드는 것만큼 쉽다는 것입니다. 이 게시물에서는 플러그인을 사용하여 페이지를 편집하는 방법을 보여줍니다.
이 자습서에서는 StoreCustomzier를 사용합니다. WooCommerce 페이지를 편집할 때 매우 사용하기 쉬운 프리미엄 도구입니다. 이 플러그인은 페이지를 편안하게 편집하는 데 도움이 되는 사용자 친화적인 드래그 앤 드롭 인터페이스를 사용합니다.
1. 플러그인 설치
먼저 StoreCustomizer를 설치하고 활성화해야 합니다. WordPress 대시보드에서 플러그인 > 새로 추가 로 이동하고 StoreCustomizer를 검색합니다. 그런 다음 지금 설치 를 클릭하고 플러그인을 활성화합니다.
2. 테마 커스터마이저 열기
이제 모든 페이지를 사용자 정의할 수 있습니다. 모양 > 사용자 정의에서 사용자 정의 프로그램을 열면 테마 사용자 정의 프로그램으로 이동합니다. 이 데모에서는 Storefront를 사용하지만 테마 옵션은 테마마다 다를 수 있습니다. 이제 StoreCustomizer를 눌러 WooCommerce 페이지를 사용자 정의하십시오.
여기에서 온라인 상점의 모든 주요 페이지를 편집할 수 있습니다.
- 가게
- 제품
- 내 계정
- 카트
- 점검
이제 페이지 편집을 시작할 때입니다.
3. WooCommerce 페이지 사용자 정의
많은 사용자 정의 옵션과 함께 여러 WooCommerce 페이지를 변경할 수 있습니다.
나. 쇼핑 페이지
여기에서 행 또는 페이지당 제품 수를 편집할 수 있습니다. 또한 상점 아카이브 및 디자인 요소를 편집하고 페이지의 버튼 텍스트를 사용자 정의할 수 있습니다. 그 외에도 배너, 배지를 추가하고 제품 제목, 가격, 버튼 등을 편집할 수 있습니다.
ii. 제품 페이지
상품 페이지의 이미지 줌, 라이트박스, 이미지 슬라이더 등 다양한 요소를 제거할 수 있습니다. 또한 제품 페이지 탭 및 디자인 요소를 편집하는 추가 옵션과 함께 행당 제품 이미지 축소판 수를 설정할 수도 있습니다. 예를 들어, 제품 페이지 탭을 편집 또는 제거하고, 버튼을 추가 또는 편집하고, 배너를 포함하는 등의 작업을 수행할 수 있습니다.
iii. 계정 페이지
계정 페이지의 경우 여러 계정 탭을 수정할 수 있습니다. 여기에는 대시보드, 다운로드, 주문, 주소, 세부 정보 및 로그아웃이 포함됩니다. 사이드 탭과 가로 스타일로 계정 탭 디자인을 선택할 수도 있습니다.
iv. 장바구니 페이지
장바구니 페이지에도 여러 사용자 정의 가능한 옵션이 있습니다. '쇼핑으로 돌아가기' 버튼을 추가하고, 할인을 표시하고, 추가 제품 정보를 추가하고, 제품 링크를 제거할 수 있습니다. 또한 교차 판매 및 카트 도구, 빈 카트 페이지 및 디자인 요소에 대한 몇 가지 추가 옵션도 있습니다.
v. 결제 페이지
StoreCustomizer를 사용하면 결제 페이지를 사용자 정의할 수도 있습니다. 사용자 정의 이미지를 추가하고, 체크아웃 필드를 편집 또는 제거하고, 디자인 요소를 사용자 정의할 수 있습니다. 한 단계 더 나아가고 싶다면 특정 플러그인을 사용하여 WooCommerce용 Checkout Manager 및 Direct Checkout과 같은 체크아웃 페이지를 사용자 정의할 수 있습니다.
이것들은 이 플러그인으로 WooCommerce 페이지에서 할 수 있는 일들 중 일부일 뿐입니다. 그러나 스토어를 더욱 맞춤화하고 다음 단계로 끌어올리 려면 각 특정 페이지를 편집하는 방법에 대한 가이드를 확인하는 것이 좋습니다.
- WooCommerce Shop 페이지를 사용자 정의하는 방법
- WooCommerce에서 결제 페이지 편집
- WooCommerce 내 계정 페이지를 사용자 정의하는 방법
- WooCommerce 제품 페이지 사용자 지정
결론
대체로 WooCommerce 페이지를 만들고 다시 설치하는 다양한 방법을 보여 드렸습니다. 누락된 페이지가 있으면 추가하거나 다시 설치할 수 있습니다.
이 가이드에서는 두 가지 방법을 설명했습니다.
- WordPress 대시보드에서
- 단축 코드 사용
두 방법 모두 초보자에게도 매우 효과적이고 사용자 친화적입니다. 대시보드에서 페이지를 만드는 것이 가장 빠른 옵션이지만 더 많은 유연성을 원한다면 단축 코드를 사용할 수 있습니다.
또한 WooCommerce에는 기본 페이지에 대한 사용자 정의 옵션이 제한되어 있으므로 StoreCustomizer를 사용하여 페이지를 사용자 정의하는 가장 쉬운 방법 중 하나를 보았습니다. 이 플러그인은 모든 페이지를 편집할 수 있는 뛰어난 만능 도구입니다. 그러나 특정 페이지에서 더 복잡한 사용자 정의를 수행하려면 일부 가이드를 살펴보는 것이 좋습니다.
마지막으로 Divi 및 Elementor를 사용하여 WooCommerce 페이지를 사용자 정의하려면 다음 게시물을 확인하십시오.
- Divi로 제품 페이지를 사용자 정의하는 방법
- Elementor로 제품 페이지 사용자 지정
이 가이드가 유용했습니까? 상점 페이지를 만들 때 어떤 방법을 사용하셨습니까? 다른 방법을 알고 있습니까? 아래 의견 섹션에 알려주십시오.