WooCommerce 장바구니에 추가 버튼을 사용자 정의하고 교체하는 방법은 무엇입니까?

게시 됨: 2022-09-15
목차 숨기기
1. 기본 WooCommerce 장바구니에 추가 버튼/URL
2. 사용자 정의 장바구니에 추가 URL을 만드는 방법은 무엇입니까?
2.1. 간단한 제품의 장바구니 URL에 추가
2.1.1. 장바구니에 추가하고 결제로 리디렉션
2.2. 가변 제품의 장바구니 URL에 추가
3. 기본 WooCommerce 장바구니에 추가 버튼을 사용자 지정하는 이유는 무엇입니까?
4. 장바구니에 추가 버튼을 사용자 정의하는 방법은 무엇입니까?
4.1. WooCommerce 장바구니에 추가 버튼 텍스트 변경
4.2. WooCommerce 장바구니에 담기 버튼 색상 변경
4.2.1. 사이트 전체에서 장바구니에 추가 버튼 색상 변경
4.2.2. 페이지마다 장바구니에 추가 버튼 색상을 다르게 변경
4.2.3. CSS 코드를 사용하여 장바구니에 추가 버튼 색상 변경
4.3. 단축 코드를 사용하여 웹 사이트 페이지에 장바구니에 추가 버튼 배치
4.4. 단일 제품 페이지의 장바구니에 추가 버튼 앞/뒤에 텍스트 추가
4.4.1. 장바구니에 추가 버튼 앞에 텍스트 추가
4.4.2. 장바구니에 추가 버튼 뒤에 텍스트 추가
4.5. 아이콘이 있는 장바구니에 추가 버튼 사용자 지정
5. WooCommerce 장바구니에 추가 버튼 플러그인
5.1. WooCommerce를 위한 궁극적인 사용자 정의 장바구니에 추가 버튼
5.2. WooCommerce 사용자 정의 장바구니에 추가 버튼
6. 장바구니에 추가를 지금 구매 버튼으로 교체하는 방법은 무엇입니까?
7. 결론

오늘날 모든 전자 상거래 웹사이트는 고객이 버튼 클릭으로 원하는 상품을 구매할 수 있는 유연성을 제공합니다. WooCommerce를 사용하면 제품 페이지/제품 목록 페이지 또는 다른 페이지에 장바구니에 추가 버튼을 표시할 수 있습니다.

이러한 WooCommerce 장바구니에 추가 버튼은 시각적으로 매력적이며 판매에 직접적인 영향을 미치기 때문에 온라인 상점의 성공에 크게 기여합니다.

이 블로그에서는 맞춤형 WooCommerce 장바구니 URL/버튼에 추가 설정, 코드 및 플러그인을 사용하여 장바구니에 추가 버튼 사용자 지정 및 직접 체크아웃을 위해 장바구니에 추가 버튼을 지금 구매 버튼으로 교체하는 방법에 대해 알아봅니다.

시작하자.

기본 WooCommerce 장바구니에 추가 버튼/URL

WooCommerce 쇼핑 페이지의 장바구니에 추가 버튼

기본 WooCommerce 장바구니에 추가 버튼은 다른 소스에 속한 외부/제휴 제품을 제외한 모든 단일 제품 페이지에 항상 나타납니다.

또한 모든 제품이 표시되는 쇼핑 페이지, 카테고리 페이지, 태그 페이지 또는 제품 필터 페이지의 제품 아래에 있는 장바구니에 추가 버튼을 볼 수 있습니다.

버튼의 문구는 제품의 종류에 따라 다를 수 있습니다. 예를 들어 더 빠른 체크아웃을 위해 장바구니에 추가 대신 지금 구매 버튼이 있습니다(나중에 자세히 설명).

사용자 정의 장바구니에 추가 URL을 만드는 방법은 무엇입니까?

여기에서 버튼의 기본 URL을 교체하기만 하면 나머지는 알아서 처리됩니다. 이 방법은 사용자 지정 방문 페이지, 가격표, 블로그 게시물 등에 장바구니에 추가 버튼을 배치하려는 경우에 유용합니다.

단순하고 다양한 제품을 위한 맞춤형 WooCommerce 장바구니에 추가 HTML 링크/버튼을 만드는 방법을 살펴보겠습니다.

간단한 제품의 장바구니 URL에 추가

사용자 정의 URL을 통해 간단한 제품을 장바구니에 쉽게 추가할 수 있습니다.

WooCommerce > Products 으로 이동합니다. 제품 제목 아래에 커서를 놓고 제품 ID를 찾고 다음 링크를 사용합니다.
https://yourdomain.com/?add-to-cart=X&quantity=Y .

간단한 제품의 경우 장바구니에 추가 제품 ID

분명히 도메인 이름과 제품 ID를 각각 자신의 도메인과 원하는 제품 ID로 바꾸십시오.

장바구니에 단일 제품이 추가됩니다. 동일한 제품을 더 많은 수량으로 추가하려면 다음 URL을 사용하십시오.
https://yourdomain.com/?add-to-cart=1168&quantity=5 .

장바구니에 추가하고 결제로 리디렉션

제품이 장바구니에 추가되면 가장 좋은 방법은 고객을 결제 페이지로 리디렉션하는 것입니다.

따라서 이 경우 URL은 다음과 같습니다.
https://yourdomain.com/checkout/?add-to-cart=1168&quantity=1 .

이것이 작동하려면 WooCommerce > Settings > Products > General 에서 "아카이브에서 AJAX 추가 장바구니 버튼 활성화" 옵션을 선택하고 "성공적인 추가 후 장바구니 페이지로 리디렉션"도 비활성화해야 합니다.

장바구니에 추가 동작 설정

사용자를 체크아웃 페이지가 아닌 다른 페이지로 리디렉션하려는 경우 체크아웃 대신 URL은 다음과 같습니다.
https://yourdomain.com/your_custom_page/?add-to-cart=1168&quantity=1 .

가변 제품의 장바구니 URL에 추가

이 또한 매우 쉽습니다. 단순 제품과 마찬가지로 제품 ID를 제품 변형 ID로 바꿔야 합니다.

WooCommerce > Products 으로 이동합니다. 가변 제품을 선택합니다. Variations 탭을 클릭합니다. 표시된 대로 제품 ID를 찾을 수 있습니다. ID가 있으면 URL을 만드는 것은 공원에서 산책하는 것입니다.

제품 변형에 대한 장바구니 ID에 추가

수량 1의 제품 변형을 추가하려면 URL은 다음과 같습니다.
https://yourdomain.com/?add-to-cart=1089&quantity=1 .

수량 5인 제품 변형을 추가하려면 URL은 다음과 같습니다.
https://yourdomain.com/?add-to-cart=1089&quantity=5 .

수량 1인 제품 변형을 장바구니에 추가하고 결제 페이지로 리디렉션하려면 URL은 다음과 같습니다.
https://yourdomain.com/checkout/?add-to-cart=1089&quantity=1 .

수량 1인 제품 변형을 장바구니에 추가하고 결제 페이지가 아닌 다른 페이지로 리디렉션하려면 URL은 다음과 같습니다.
https://yourdomain.com/your_custom_page/?add-to-cart=1089&quantity=1 .

충분히 간단합니까? 커스터마이징 장바구니에 담기 버튼으로 이동해 보겠습니다.

기본 WooCommerce 장바구니에 추가 버튼을 사용자 지정하는 이유는 무엇입니까?

식료품을 구매하기 위해 WooCommerce 매장을 방문하고 각 품목에 대해 개별적으로 비용을 지불해야 한다고 상상해 보십시오. 구매자가 구매를 하는 것이 불편하지 않을까요? 또한 구매를 위해 여러 트랜잭션을 시작하는 것은 의심할 여지 없이 시간 소모적입니다.

이것은 WooCommerce의 장바구니에 추가 기능이 온라인 쇼핑객에게 유익한 것으로 입증되는 곳입니다. 쇼핑객은 원하는 상품을 선택하여 장바구니에 담을 수 있습니다. 모든 품목이 장바구니에 담기면 쇼핑객은 결제로 이동할 수 있습니다. 이는 훌륭한 고객 경험을 위한 것입니다.

기본 설정은 작업을 수행할 수 있습니다. 그러나 제품 유형 및 제품 포트폴리오에 따라 사용자 정의가 필요합니다. 모든 접근 방식에 맞는 하나의 크기는 없습니다.

. 이 방법은 하나의 제품만 판매하는 매장이나 고객이 여러 제품 매장에서 단일 제품을 구매하려는 경우에 특히 효과적입니다.

반면에 장바구니에 담기 버튼은 상품을 많이 판매하는 매장에 매우 유용합니다. 방문자는 상점에서 여러 제품을 탐색하고 체크아웃 페이지로 이동하기 전에 장바구니에서 제품을 계속 추가/제거합니다.

따라서 요구 사항에 따라 브랜드 모양에 따라 맞춤화된 버튼(텍스트, 색상, 아이콘, 배치)이 더 나은 전환을 제공합니다.

장바구니에 추가 버튼을 사용자 정의하는 방법은 무엇입니까?

때로는 기본 장바구니에 추가 버튼이 웹사이트에서 보기에 좋지 않을 수 있습니다. 브랜드 색상과 일치시킬 수 있습니다. 또는 잘못된 배치가 전환을 방해할 수 있습니다.

이러한 경우 WooCommerce는 모든 수준에서 장바구니에 추가 버튼을 사용자 지정할 수 있는 뛰어난 유연성을 제공합니다. 최소한의 노력으로 버튼을 사용자 정의할 수 있습니다.

이러한 장바구니에 추가 버튼을 사용자 정의하는 몇 가지 기술적인 방법, 플러그인 및 대체 방법을 살펴보겠습니다. 기술적 인 방법은 약간 까다로울 수 있습니다. 따라서 코드 조각을 안전하게 추가하려면 이 문서를 참조하세요.

WooCommerce 장바구니에 추가 버튼 텍스트 변경

WooCommerce 장바구니에 추가 버튼 텍스트를 변경하여 고객에게 더 매력적이고 매력적으로 만들 수 있습니다. 다음은 구매 버튼에 사용할 수 있는 몇 가지 버튼 텍스트 아이디어입니다.

  • 쇼핑백에 추가
  • 장바구니에 항목 추가
  • 내 장바구니에 추가
  • 내 쇼핑백에 추가

기본 장바구니에 추가 버튼 텍스트를 변경하려면 다음 단계를 따르세요.

  1. WordPress Admin panel > Appearance > Theme Editor 로 이동합니다.
  2. 테마 함수/functions.php 파일을 엽니다.
  3. function.php 파일 하단에 다음 코드를 추가합니다.
// 단일 제품 페이지에서 장바구니에 추가 텍스트를 변경하려면
add_filter( 'woocommerce_product_single_add_to_cart_text', 'storeapps_custom_single_add_to_cart_text' );
함수 storeapps_custom_single_add_to_cart_text() {
    return __( '장바구니에 담기', '우커머스' );
}
// 쇼핑 페이지에서 장바구니에 추가 텍스트를 변경하려면
add_filter( 'woocommerce_product_add_to_cart_text', 'storeapps_custom_product_add_to_cart_text' );
함수 storeapps_custom_product_add_to_cart_text() {
    return __( '장바구니에 담기', '우커머스' );
}

보시다시피 이 코드는 단일 제품 및 컬렉션 페이지용입니다. 텍스트를 Add To Bag 으로 변경할 수 있습니다. 그러나 코드의 모든 "Add To Bag" 문구를 원하는 텍스트로 교체하여 원하는 다른 사용자 정의 텍스트로 변경할 수 있습니다.

'파일 업데이트' 버튼을 클릭하여 변경 사항을 저장하고 프런트엔드로 이동하여 WooCommerce 장바구니에 추가 버튼 맞춤 텍스트가 스토어에 어떻게 표시되는지 확인합니다.

장바구니에 추가 버튼 텍스트 사용자 정의

WooCommerce 장바구니에 담기 버튼 색상 변경

장바구니에 담기 버튼의 색상은 고객이 제품을 구매하는 데 중요한 역할을 합니다. 버튼 색상이 웹사이트의 색상 구성표와 일치하는지 확인하십시오.

대부분의 WooCommerce 테마는 웹사이트 전체에 걸쳐 모든 유형의 버튼에 기본 색상을 제공하지만 스토어 디자인과 일치하는지 확인하고 WooCommerce 장바구니에 추가 버튼 색상을 변경하여 눈에 띄게 해야 합니다.

WooCommerce 장바구니에 추가 버튼 색상을 변경하려면 테마의 스타일시트(대부분 style.css 파일이라고 함)에 CSS 코드 스니펫을 추가해야 합니다. WordPress Admin panel > Appearance > Customizer 로 이동하여 액세스할 수 있습니다.

그런 다음 옵션 목록이 있는 새 창으로 이동합니다. 여기에서 장바구니에 담기 버튼의 색상을 변경하는 세 가지 방법이 있습니다.

사이트 전체에서 장바구니에 추가 버튼 색상 변경

첫 번째 방법은 Buttons > Background Color 섹션으로 이동하는 것입니다.

여기에서 장바구니에 추가 버튼의 배경색과 텍스트 색상을 변경할 수 있습니다. 그러나 이 옵션을 사용하면 모든 페이지의 모든 버튼 색상을 변경할 수 있습니다.

페이지마다 장바구니에 추가 버튼 색상을 다르게 변경

두 번째 방법은 Shop Archive/Product Single로 이동하는 것입니다. Shop Archive 옵션을 사용하면 색상 배경과 텍스트를 변경할 수 있을 뿐만 아니라 WooCommerce 상점 아카이브 페이지에 표시되는 장바구니에 추가 버튼의 위치를 ​​사용자 지정할 수 있습니다.

단일 제품 페이지에서 장바구니에 담기 버튼의 배경 및 텍스트 색상 및 호버 효과도 변경할 수 있습니다.

CSS 코드를 사용하여 장바구니에 추가 버튼 색상 변경

세 번째는 WooCommerce 장바구니에 추가 버튼 색상을 변경하는 사용자 정의 코드를 추가하는 추가 CSS 섹션입니다.

아래 코드를 복사하여 WordPress admin > Customizer > Additional CSS 섹션 또는 'style.css' 파일에 붙여넣고 원하는 색상으로 변경하세요.

/* 단일 제품 페이지의 장바구니에 추가 버튼 */
.single-product .product .single_add_to_cart_button.button {
    배경색: #0c7815;
    색상: #FFFFFF;
}
/* 아카이브의 장바구니에 추가 버튼(예: 상점, 카테고리 페이지) */
.woocommerce .product .add_to_cart_button.button {
    배경색: #0c7815;
    색상: #FFFFFF;
}

이미지에서 볼 수 있듯이 장바구니에 담기 버튼 색상을 파란색에서 녹색으로 변경했습니다.

사용자 정의 장바구니에 추가 버튼 색상

단축 코드를 사용하여 웹 사이트 페이지에 장바구니에 추가 버튼 배치

단축 코드를 사용하여 번거로움 없이 모든 웹사이트 페이지에 장바구니에 추가 버튼을 표시할 수 있습니다. 예를 들어 옷 스타일링에 대한 블로그를 작성한 경우 이 단축 코드를 배치하여 블로그 콘텐츠에서 직접 구매 버튼을 생성할 수 있습니다.

WooCommerce에는 온라인 상점의 어느 곳에서나 특정 제품의 버튼을 삽입할 수 있는 [add_to_cart] 단축 코드가 내장되어 있습니다. 장바구니에 추가 버튼을 표시하려는 제품의 ID 및/또는 SKU를 추가하기만 하면 됩니다.

장바구니에 추가 버튼 단축 코드

또한 제품 가격을 포함할 수 있습니다. [add_to_cart sku="woo-vneck-tee" show_price="true"] .

단순 상품의 경우 장바구니에 담기 버튼이 표시됩니다. 그러나 가변 제품의 경우 Select options 버튼이 표시됩니다.

장바구니에 추가 옵션 선택

단일 제품 페이지의 장바구니에 추가 버튼 앞/뒤에 텍스트 추가

WooCommerce에서 장바구니에 추가 버튼을 사용자 지정하는 또 다른 방법은 단일 제품 페이지에서 장바구니에 추가 버튼 앞이나 뒤에 텍스트를 추가하는 것입니다.

장바구니에 추가 버튼 앞에 텍스트 추가

일반적으로 장바구니에 추가 버튼 위에 제품에 대한 간단한 설명이 있습니다. 단, 장바구니 담기 옵션 이전에 공지, 보증, 무료 배송, 반품 정책 등을 언급할 수 있습니다.

예를 들어 echo 문을 사용하여 "무료 배송" 텍스트를 추가할 수 있습니다.

add_filter( 'woocommerce_loop_add_to_cart_link', 'storeapps_before_after_btn', 10, 3 );
add_action( 'woocommerce_before_add_to_cart_button', 'storeapps_before_add_to_cart_btn' );
함수 storeapp_before_add_to_cart_btn(){
     echo '무료 배송';
 }

위의 코드를 복사하여 파일 테마의 functions.php 파일에 붙여넣은 다음 파일 업데이트를 클릭하여 모든 것을 저장합니다.

장바구니에 담기 버튼 전의 텍스트

장바구니에 추가 버튼 뒤에 텍스트 추가

장바구니에 추가 버튼 뒤에 사용자 정의 텍스트를 추가할 수도 있습니다. 이는 대량 구매에 대한 할인이 있을 수 있음을 고객에게 알리는 데 유용할 수 있습니다. 아래 예에서는 자식 테마의 function.php 파일 맨 아래에 이 코드 조각을 추가하여 장바구니에 추가 버튼 아래에 대량 구매 문의 텍스트를 포함합니다.

add_action( 'woocommerce_after_add_to_cart_button', 'storeapps_after_add_to_cart_btn' );
기능 content_after_addtocart_button_func() {
 // 에코 콘텐츠.
 에코 '
(*대량구매는 문의주세요)
';
 }

이 코드를 복사하여 파일에 붙여넣은 다음 저장하십시오.

장바구니에 담기 버튼 후의 텍스트

아이콘이 있는 장바구니에 추가 버튼 사용자 지정

텍스트를 변경하는 것 외에도 텍스트를 아이콘으로 바꾸거나 버튼 텍스트 옆에 아이콘을 추가할 수 있습니다. 이것은 아래에 언급된 일부 플러그인을 사용하여 가능합니다.

이 플러그인은 또한 코드 없이 버튼을 사용자 정의하는 데 도움이 됩니다.

WooCommerce 장바구니에 추가 버튼 플러그인

코드 작성은 장바구니에 추가 버튼을 만드는 한 가지 방법입니다. 그러나 코딩에 대한 지식이 없는 사람이라면 바로 사용할 수 있는 플러그인을 활용하여 버튼을 사용자 정의하는 것이 이상적입니다. 다음은 가장 널리 사용되는 두 가지 플러그인입니다.

WooCommerce를 위한 궁극적인 사용자 정의 장바구니에 추가 버튼

이 플러그인은 확실히 고객의 관심을 끌 버튼을 디자인하기 위해 추가 사용자 정의를 제공합니다.

특징:

  • 단순 제품, 가변 제품 및 그룹화된 제품에 대한 버튼 텍스트 사용자 지정
  • 버튼의 배경색 사용자 지정
  • 고객이 버튼 위로 마우스를 가져갈 때 색상 설정
  • 버튼의 색상, 크기 및 테두리 반경 사용자 지정
  • 버튼에 장바구니 아이콘 추가
  • 고객이 버튼 위로 마우스를 가져가면 그라데이션을 배경으로 설정
  • 이미지를 버튼으로 사용
  • 추가 및 빼기 아이콘으로 항목 수량 상자 사용자 정의
  • 웹사이트 전체에서 고유한 버튼 스타일 만들기
  • 이 플러그인은 모든 WordPress 테마와도 호환됩니다.

일부 기능은 Pro 버전에서만 사용할 수 있습니다.

지금 다운로드

WooCommerce 사용자 정의 장바구니에 추가 버튼

이름에서 알 수 있듯이 이 플러그인을 사용하여 장바구니에 추가 버튼을 사용자 지정하여 고객에게 더 매력적으로 만들 수 있습니다.

특징 :

  • 장바구니에 추가 버튼의 텍스트를 사용자 지정합니다.
  • 버튼의 텍스트 옆에 아이콘을 배치합니다.
  • 전체 텍스트 대신 장바구니 아이콘을 표시합니다.
  • 대부분의 WordPress 테마와 호환됩니다.

지금 다운로드

장바구니에 추가를 지금 구매 버튼으로 교체하는 방법은 무엇입니까?

장바구니에 담기 버튼을 지금 구매 버튼으로 교체하면 고객이 버튼 클릭으로 긴 구매 프로세스와 체크아웃을 건너뛸 수 있습니다. 이는 사용자 경험을 개선하는 데 크게 기여합니다.

StoreApps의 Cashier는 클릭 몇 번으로 지금 구매 버튼을 생성하도록 도와줍니다.

계산원 지금 구매 버튼

WooCommerce 결제 프로세스를 최적화하기 위한 훌륭한 플러그인입니다. 다음을 위해 전자 상거래 상점을 사용자 정의할 수 있습니다.

  • 빠른 구매 버튼을 사용하여 직접 결제합니다(장바구니 건너뛰기 및 결제로 이동).
  • 빠른 구매 버튼을 통한 원클릭 체크아웃(장바구니 없음, 체크아웃, 결제 화면).
  • 한 페이지에 주문, 지불 및 배송에 대한 모든 정보가 있는 한 페이지 결제.

이 외에도 이 플러그인을 사용하면 장바구니 페이지를 방문하지 않고도 장바구니에 있는 모든 제품을 표시하는 측면 장바구니 패널을 활성화할 수 있습니다.

또한 장바구니 알림 기능 및 제품 추천을 통해 고객이 더 많은 제품을 구매하도록 유도할 수도 있습니다.

Cashier 플러그인은 WooCommerce 구독과도 호환됩니다.

캐셔 플러그인 받기

결론

장바구니에 추가 버튼 최적화는 쇼핑 경험을 향상시키는 데 중요한 역할을 합니다.

여기에 언급된 코드와 플러그인을 사용하면 요구 사항에 따라 WooCommerce 장바구니에 추가 버튼을 쉽게 사용자 정의하고 전환을 높일 수 있습니다.

이 블로그가 유용하셨기를 바랍니다. 질문이나 제안 사항은 댓글 상자를 통해 공유하세요.