WooCommerce 미니 카트를 만드는 방법: 3가지 방법

게시 됨: 2022-02-12

WooCommerce 미니 카트를 쉽게 설정할 수 있는 방법을 찾고 있습니까? 결제 경험이 느리고 반복적이면 고객의 쇼핑 경험에 영향을 줄 수 있습니다. 결제 프로세스의 흐름을 개선하는 것은 리드 전환을 개선하는 데 필수적인 부분이며 미니 카트는 이를 위한 훌륭한 솔루션이 될 수 있습니다.

따라서 웹사이트에 장바구니를 추가하는 데 도움이 되도록 WooCommerce 미니 장바구니를 만드는 방법에 대한 안내가 있습니다. 하지만 먼저 미니 카트가 정확히 무엇인지, 왜 미니 카트를 사용해야 하는지 살펴보겠습니다.

WooCommerce 미니 카트란 무엇입니까?

WooCommerce Mini 장바구니는 실제 WordPress 장바구니 페이지의 작은 형태일 뿐입니다. 여기에는 장바구니에 추가된 제품과 몇 가지 추가 정보가 포함됩니다. 미니 카트의 내용은 활성 WordPress 테마에 따라 다르지만 일반적으로 다음을 포함합니다.

제품 목록
소계
제품 미리보기 이미지
제품 수량

WooCommerce 미니 카트에 표시되는 세부 정보와 상관없이 이는 WooCommerce 스토어를 탐색하는 동안 고객의 사용자 경험에서 중요한 부분입니다. 고객이 웹사이트의 어느 부분에서나 직접 결제 페이지로 이동하는 데 사용할 수 있는 액세스 가능한 도구이며 장바구니 항목을 추적하는 데 도움이 됩니다.

우리도 QuadLayers에서 미니 카트를 사용합니다. 장바구니에 제품을 추가하면 헤더 메뉴의 장바구니 아이콘에 마우스를 가져가면 미니 장바구니를 볼 수 있습니다.

아래 스크린샷을 보시면 WooCommerce Checkout Manager 제품이 장바구니에 추가되었습니다. 이것은 수량 및 소계와 함께 미니 카트에도 표시됩니다.

우커머스 미니 카트 쿼드레이어 생성

WooCommerce 웹사이트를 위한 미니 카트를 만드는 이유는 무엇입니까?

기본적으로 WooCommerce 테마는 자체 WooCommerce 미니 카트와 함께 제공될 수 있습니다. 그리고 그렇게 하는 경우에도 해당 위치와 스타일 자체를 테마 설정에서 완전히 사용자 정의할 수 없을 수 있습니다. 또한 미니 카트를 보관하기에 완벽한 위치에 있지 않을 수도 있습니다.

독자 중 일부는 떠다니는 미니 카트를 추가하는 것을 고려할 수 있지만 다른 독자는 사이드바 또는 바닥글에 추가할 수 있습니다. 사용을 고려할 수 있는 다양한 미니 카트 접근 방식이 있습니다. 또한 배송 가격, 추가 카트 세부 정보, 사용자 정의 메시지 등과 같은 더 많은 콘텐츠를 미니 카트에 추가해야 할 수도 있습니다.

카트를 사용할 때의 편안함은 실제 판매 를 개선하기 위해 귀하와 귀하의 고객에게도 중요할 수 있습니다. 웹사이트 미학에 완벽하게 맞는 맞춤형 판매 준비 체크아웃은 WooCommerce 웹사이트의 판도를 바꿀 수 있습니다. 따라서 맞춤형 미니 카트를 만들고 웹사이트의 다른 페이지에 추가하려면 더 이상 찾지 마십시오!

WordPress에서 WooCommerce 미니 카트를 만드는 방법

WooCommerce Mini 장바구니 를 만들고 추가하려면 3가지 방법 을 사용할 수 있습니다.

장바구니 위젯 추가
WordPress 플러그인 사용
프로그래밍 방식으로

WordPress 위젯을 사용하는 기본 방법부터 시작하여 각 방법과 모든 단계에 대해 살펴보겠습니다.

1. WordPress 위젯을 사용하여 WooCommerce 미니 카트 만들기

기본적으로 WooCommerce 장바구니 위젯을 사용하여 WooCommerce 미니 장바구니를 만들 수 있습니다. 위젯을 사용하고 있으므로 테마의 사용 가능한 위젯 영역에만 배치할 수 있습니다. 가장 일반적인 영역은 다음과 같습니다.

위젯 사이드바
헤더 아래
바닥글

테마에 따라 더 많은 위젯 영역이 있을 수 있습니다. 그러나 WooCommerce 호환 테마 중 하나를 사용하고 있는지 확인하십시오.

1.1. 위젯 영역 선택

장바구니 위젯을 추가하려면 먼저 위젯 영역을 선택해야 합니다. 따라서 WP 관리 대시보드를 열고 모양 > 위젯 으로 이동합니다. 그런 다음 미니 카트의 위젯 영역을 선택합니다.

데모에서는 사이드바를 사용할 것입니다. 그러나 가장 편리한 위젯 영역을 사용할 수 있습니다.

우커머스 미니 카트 만들기 - 위젯 페이지

1.2. 위젯 영역에 장바구니 위젯 추가

미니 카트의 위젯 영역을 선택한 후 + 버튼 을 클릭하여 위젯을 추가합니다. 검색 창을 사용하여 장바구니 를 검색하고 클릭 하여 위젯을 추가합니다 .

위젯이 보이지 않으면 웹사이트에서 WooCommerce를 올바르게 설정했는지 확인하세요.

여기에서 장바구니가 비어 있는 경우 숨기기 옵션을 활성화하거나 비활성화할 수도 있습니다. 고객의 장바구니가 비어 있으면 사이드바 장바구니가 숨겨지므로 활성화하는 것이 좋습니다. 이것은 또한 귀하의 웹사이트를 보다 기능적으로 보이게 할 것입니다.

우커머스 미니 카트 생성 - 카트 추가 스크린샷

장바구니 위젯 추가를 마치면 위젯을 업데이트 하여 변경 사항을 저장하십시오. 이제 사이드바 미니 카트가 프런트 엔드에 표시되어야 합니다.

물론 다른 위젯 영역에 미니 카트를 추가할 수도 있습니다. 위젯 페이지 아래에서 위치를 선택하기만 하면 머리글 아래나 바닥글에 위젯을 쉽게 추가할 수 있습니다.

우커머스 미니 카트 만들기 - 헤더 카트

이것이 WooCommerce 미니 카트를 만드는 가장 쉬운 방법 이지만 상당한 제한이 있습니다. 하나는 미니 카트에 대한 사용자 정의가 없습니다 . 미니 카트의 모양과 고객의 접근 방식이 매우 제한적입니다.

미니 카트 위치는 테마에서 제공하는 위젯 영역으로 제한됩니다. 또한 팝업 미니 카트 또는 카트에 대한 사용자 정의 필드와 같은 기능은 고객이나 웹 사이트 소유자도 사용할 수 없습니다. 따라서 더 사용자 정의 가능한 미니 카트를 원한다면 계속 읽고 다음 방법을 대신 고려하는 것이 좋습니다.

2. WordPress 플러그인을 사용하여 WooCommerce 미니 카트 만들기

WordPress 플러그인을 사용하는 것은 장바구니 경험을 선별하는 가장 쉬운 방법 중 하나입니다. 플러그인을 사용하여 고객이 언제든지 쉽게 체크아웃할 수 있도록 할 수 있습니다. 또한 웹사이트의 결제 경험을 단순화할 수 있습니다.

미니 카트 플러그인은 제품 판매를 촉진하고 리드 생성을 향상시키는 멋진 기능을 제공합니다. 예를 들어:

미니 카트에 대해 호버링 카트 아이콘 및 팝업을 활성화할 수 있습니다. 따라서 고객은 상점 콘텐츠의 나머지 부분을 깨끗하고 방해가 없는 상태로 유지하면서 언제든지 액세스할 수 있습니다.
미니 카트 자체에 많은 카트 및 제품 요소를 추가할 수 있습니다. 예를 들어 추가 제품 정보, 수량 변경, 장바구니 소계 및 총계 표시 편집 등이 있습니다.
플러그인을 사용하면 미니 카트에서 직접 쿠폰 추가, 전용 추천 제품 및 추천 제품 제안과 같은 몇 가지 스마트 기능을 추가할 수 있습니다.

따라서 WooCommerce 미니 카트 추가 및 사용자 지정 전용 WordPress 플러그인을 사용하는 것이 좋습니다.

데모에서는 Woocommerce Cart All in One 플러그인을 사용할 것입니다. 웹사이트에 미니 카트를 만드는 데 가장 적합한 플러그인 중 하나입니다. 플러그인은 또한 사용이 매우 간편하며 미니 카트 팝업, 사이드바 카트 또는 메뉴 카트 사용자 정의 옵션과 같이 필요한 모든 기능을 갖추고 있습니다.

또한 최고의 WooCommerce 미니 카트 플러그인 목록이 있습니다. 다른 플러그인을 사용하고 싶다면 그것도 볼 수 있습니다.

2.1. 플러그인 설치 및 활성화

플러그인을 설치하고 활성화하는 것부터 시작하겠습니다.

WP 관리 대시보드 를 연 다음 사이드바에서 플러그인 > 새로 추가 로 이동합니다.

woocommerce 미니 카트 만들기 - 플러그인 페이지 설치

그런 다음 오른쪽 상단의 검색 창을 사용하여 WooCommerce용 Cart All In One 을 검색하십시오.

플러그인을 찾은 후 지금 설치 를 클릭하여 플러그인을 설치합니다. 마지막으로 플러그인이 설치되면 활성화 합니다.

woocommerce 미니 카트 만들기 - 플러그인 설치 및 활성화

프리미엄 플러그인을 사용하려면 수동으로 업로드하여 설치해야 합니다. 자세한 내용은 WordPress 플러그인을 수동으로 설치하는 자세한 가이드를 참조하세요.

이제 WooCommerce 미니 카트를 활성화하도록 플러그인을 구성해야 합니다.

2.2. WooCommerce 플러그인에 대해 장바구니 올인원 구성

플러그인의 WooCommerce 미니 카트를 구성하려면 WP 관리 대시보드 에서 카트 올인원 탭 을 클릭하세요. 플러그인의 대시보드 페이지가 열립니다.

우커머스 미니 카트 만들기 - 카트 올인원

플러그인의 무료 버전에서는 사이드바 미니 카트 또는 메뉴 미니 카트 를 활성화할 수 있습니다. AJAX Add to Cart 버튼을 추가하고 구성할 수도 있지만 지금은 미니 카트 옵션에만 집중하겠습니다.

웹사이트에서 미니 카트 팝업을 활성화하려면 사이드바 카트 를 열고 활성화 를 클릭하십시오. 모바일 활성화 옵션을 사용하여 모바일 장치에서 미니 카트 팝업을 활성화/비활성화할 수도 있습니다. 마지막으로 변경 사항을 저장 합니다.

이제 웹 사이트의 프런트 엔드로 이동하여 다시 로드하십시오. 웹 페이지에 새 미니 카트 아이콘이 표시되어야 합니다. 클릭하면 미니 카트를 열 수 있습니다.

또한 모든 메뉴에 메뉴 카트 를 추가할 수도 있습니다. 메뉴 카트 탭을 열고 이전 단계와 마찬가지로 활성화 하십시오. 필요한 경우 모바일 메뉴에서 활성화할 수도 있습니다.

다음으로, 웹사이트에서 메뉴 카트를 표시할 워드프레스 메뉴를 추가해야 합니다. 메뉴 필드에서 WooCommerce 미니 카트에 추가할 메뉴를 선택하기만 하면 됩니다. 그런 다음 저장 을 클릭합니다.

이제 웹사이트에 메뉴 미니 카트가 표시되어야 합니다. 미니 카트로 선택한 메뉴에 추가됩니다.

2.3. 플러그인을 사용하여 WooCommerce 미니 카트 사용자 정의

사용자 정의는 장바구니 올인원 플러그인 의 핵심 기능입니다. 사이드바 카트와 메뉴 카트를 자유롭게 사용자 지정할 수 있습니다. 여기에는 색상, 미니 카트 스타일, 위치, 사용자 정의 애니메이션, 미니 카트 아이콘, 사이드바 메뉴 스타일 등이 포함됩니다.

사용자 정의 옵션에 액세스하려면 WP 관리 대시보드에서 모양 > 사용자 정의 로 이동하십시오. 테마 사용자 지정 도구로 리디렉션됩니다. 여기에서 Cart All in One For WooCommerce를 클릭하면 모든 미니 카트 사용자 정의 옵션이 표시됩니다.

우커머스 미니 카트 만들기 - 카트 커스터마이징

이 데모에서는 사이드바 카트를 사용자 정의합니다. 따라서 Sidecart Cart 를 클릭하면 모든 옵션이 표시됩니다. 지금은 사이드바 콘텐츠 표시 옵션을 사용하여 더 작은 미니 카트를 활성화하고 사이드바 카트 위치를 변경하겠습니다.

그러나 웹 사이트에 적합한 방법에 따라 이러한 옵션을 사용하여 미니 카트를 추가로 사용자화할 수 있습니다. 카트 아이콘 자체와의 상호 작용과 같이 편집할 것이 많이 있으므로 아이콘을 가리키면 미니 카트가 나타나며 로딩 아이콘을 사용자 지정하는 등의 작업이 수행됩니다.

woocommerce 미니 카트 만들기 - 카트 사용자 정의 스타일

변경 사항이 완료되면 게시 를 클릭하여 저장합니다. 웹사이트에서 미니 카트의 이러한 모든 사용자 정의를 볼 수 있습니다.

이것이 플러그인을 사용하여 미니 카트를 사용자 정의하는 기본 요지입니다. 플러그인에서 제공하는 모든 사용자 지정 옵션에 대해 자세히 알아보려면 해당 설명서를 살펴보는 것이 좋습니다 .

3) 프로그래밍 방식으로 WooCommerce 미니 카트 만들기

웹사이트의 가벼운 프레임워크를 유지하기 위해 플러그인을 사용하여 WooComerce Mini 카트를 추가하지 않고 싶다고 가정해 보겠습니다. 그런 다음 대신 프로그래밍 방식으로 생성하도록 선택할 수도 있습니다.

이렇게 하려면 사용자 정의 함수를 사용하여 사용자 정의 단축 코드 를 만들고 테마의 functions.php 파일에 붙여넣어야 합니다. 그런 다음 웹사이트의 어느 부분에서나 단축 코드를 사용하거나 WordPress 또는 WooCommerce 템플릿 파일에 추가하여 WooCommerce 미니 카트를 직접 추가할 수도 있습니다.

핵심 파일 중 일부를 변경할 것이므로 웹사이트를 백업하고 프로그래밍 방식으로 또는 하위 테마 플러그인 중 하나를 사용하여 하위 테마도 만드는 것이 가장 좋습니다. 이렇게 하면 WordPress 테마를 업데이트할 때 사용자 지정 코드가 손실되지 않습니다.

3.1. 테마 기능에 사용자 정의 단축 코드 추가

테마 파일 편집기에서 웹사이트의 테마 파일에 사용자 정의 코드를 추가합니다. WooCommerce에 코드를 추가하는 것이 완전히 익숙하지 않다면 먼저 이 문서를 살펴보는 것이 좋습니다.

준비가 되면 WP 관리자 대시보드 의 모양 > 테마 파일 편집기 에서 테마 편집기를 엽니다. 오른쪽에 있는 테마 파일 사이드바를 사용하고 functions.php 를 클릭하십시오. 그러면 테마 편집기에서 functions.php 파일이 열립니다.

woocommerce 미니 카트 만들기 - 기능 php

이제 테마 편집기에 다음 코드를 붙여넣습니다.

 기능 custom_mini_cart() {
echo '<a href="#" class="dropdown-back" data-toggle="dropdown"> ';
echo '<i class="fa fa-shopping-cart" aria-hidden="true"></i>';
echo '<div class="basket-item-count">';
echo '<span class="cart-items-count count">';
에코 WC()->장바구니->get_cart_contents_count();
에코 '</span>';
에코 '</div>';
에코 '</a>';
echo '<ul class="dropdown-menu dropdown-menu-mini-cart">';
echo '<li> <div class="widget_shopping_cart_content">';
woocommerce_mini_cart();
에코 '</div></li></ul>';

}
add_shortcode( 'quadlayers-미니 카트', 'custom_mini_cart' );

코드를 추가한 후 파일 업데이트 를 클릭합니다. 이렇게 하면 웹사이트에 대한 '[quadlayers-mini-cart]' 라는 사용자 정의 단축 코드가 생성됩니다. 이제 모든 게시물, 페이지 또는 위젯에서 이 단축 코드를 사용하여 맞춤형 WooCommerce 미니 카트를 추가할 수 있습니다.

3.2. WooCommerce 템플릿에서 단축 코드 사용

다음 코드 스니펫을 사용하여 테마 템플릿 파일이나 WooCommerce 템플릿에 맞춤형 미니 카트를 추가할 수도 있습니다.

 <?php echo do_shortcode('[quadlayers-mini-cart]'); ?>

예를 들어 WooCommerce 제품 아카이브 템플릿 파일에 이 코드를 추가해 보겠습니다. WooCommerce 템플릿 파일을 열려면 WordPress 대시보드에서 플러그인 > 플러그인 파일 편집기 로 이동합니다.

그런 다음 오른쪽 상단의 편집할 플러그인 선택 옵션을 사용하고 WooCommerce 를 선택하고 선택을 클릭합니다 . 플러그인 파일 메뉴를 사용하여 템플릿 > archive-product.php를 클릭합니다.

그런 다음 템플릿의 적절한 부분에 다음 코드 줄을 추가합니다.

 echo do_shortcode('[quadlayers-미니 카트]');

데모에서는 do_action( 'woocommerce_before_main_content' ) ; 라인. 그러나 템플릿 파일과 필요한 곳에 스니펫을 추가할 수 있습니다.

마지막으로 플러그인 편집기에서 코드를 추가한 후 파일을 업데이트합니다 . 미니 카트는 지정된 WooCommerce 페이지에 표시됩니다. 우리의 경우 Shop/Product Archive 페이지입니다.

이 접근 방식은 미니 카트를 템플릿에 추가합니다. 그러나 미니 카트 는 원하는 대로 보이지 않을 수 있으며 테마의 파일 스타일시트를 사용하여 추가 스타일 지정이 필요할 수 있습니다. 따라서 이 방법은 코딩에 익숙하고 WordPress에 PHP 및 CSS를 추가할 수 있는 상당한 지식이 있는 경우에만 권장됩니다.

보너스: WooCommerce에서 장바구니 페이지를 건너뛰는 방법

고객이 더 빠른 결제 과정을 거치도록 하려면 장바구니 페이지를 완전히 건너뛰도록 선택할 수도 있습니다. 미니 카트는 이미 고객에게 제공되어 카트 페이지가 많이 필요하지 않습니다. 따라서 고객이 구매를 원할 때 바로 결제 페이지로 리디렉션할 수 있습니다.

전용 플러그인을 사용하거나 사용자 정의 기능을 사용하여 수행할 수 있습니다. 지금은 프로그래밍 방식으로 장바구니 페이지를 건너뛸 수 있는 방법에 대해 설명합니다.

그러나 계속하기 전에 WP 대시보드에서 WooCommerce > 설정 으로 이동하여 제품 탭을 열어야 합니다. 일반 옵션에서 장바구니에 추가 동작 옵션을 모두 비활성화합니다. 이렇게 하면 사용자 지정 기능에 간섭이 발생하지 않습니다.

이제 위와 동일한 단계를 사용하여 하위 테마의 functions.php 파일을 다시 한 번 엽니다. Appearance > Theme File Editor 에서 테마 편집기로 이동하고 functions.php 파일을 클릭하기만 하면 됩니다.

그런 다음 여기에 다음 코드 스니펫을 붙여넣습니다.

 add_filter('add_to_cart_redirect', 'ql_skip_cart_page');
기능 ql_skip_cart_page() {
글로벌 $우커머스;
$redirect_checkout = $woocommerce->cart->get_checkout_url();
$redirect_checkout 반환;
}

이제 고객이 장바구니에 제품을 추가할 때마다 장바구니 페이지가 아닌 결제 페이지로 바로 이동합니다.

이 프로세스를 단순화하기 위해 WooCommerce용 Direct Checkout과 같은 플러그인을 사용할 수도 있습니다. 이에 대해 알아보고 사용을 고려해야 하는 이유는 여기에서 전용 가이드를 확인할 수 있습니다.

결론

이것으로 WooCommerce 미니 카트를 만드는 방법에 대한 가이드를 마칩니다. WooCommerce 미니 카트를 설정하고 사용자 지정하는 것은 지루한 과정이 아니며 다른 방법을 사용하도록 선택할 수 있습니다. 오늘 가이드에서 WooCommerce 미니 카트를 추가하고 사용자 정의하는 데 사용한 방법을 요약해 보겠습니다.

장바구니 위젯 사용
전용 WordPress 플러그인 사용
사용자 정의 단축 코드 및 템플릿 파일을 프로그래밍 방식으로 사용

어떤 프로세스를 사용해야 할지 잘 모르겠다면 플러그인 을 사용하여 WooCommerce 미니 카트를 만드는 것이 좋습니다. 이 방법은 더 안전하고 쉬울 뿐만 아니라 미니 카트를 위한 수많은 전용 사용자 정의 및 개인화 옵션도 제공합니다. WordPress 초보자이고 최소한의 제한으로 WooCommerce 미니 카트를 추가하려는 경우 전용 플러그인을 사용하는 것이 좋습니다.

또한 체크아웃 프로세스를 단축하고 매출을 향상시킬 수 있는 추가 수단을 찾고 있다면 다른 기사를 살펴보십시오.

WooCommerce 장바구니 페이지를 사용자 정의하는 최고의 플러그인
WooCommerce 한 페이지 결제를 만드는 방법
WooCommerce 직접 결제 링크를 만드는 방법

이제 웹사이트에 미니 카트를 추가할 수 있습니까? 아니면 이미 추가했습니까? 우리는 코멘트에서 그것에 대해 알게되어 기쁠 것입니다.