Divi Shop 페이지에서 장바구니에 추가 버튼을 추가하는 방법

게시 됨: 2020-06-21

Divi를 사용하고 상점 페이지를 사용자 정의하고 싶습니까? 이 튜토리얼에서는 Divi 쇼핑 페이지에 장바구니에 추가 버튼을 포함하는 방법을 배웁니다.

온라인 상점을 시작할 계획이라면 WooCommerce가 가장 쉽고 빠른 방법입니다. 개발자가 아니더라도 일부 우수한 WooCommerce 테마는 시작하고 스토어 기능을 향상하는 데 도움이 될 수 있습니다. 최고의 옵션 중 하나는 Divi입니다.

쇼핑 페이지에 장바구니에 추가 버튼을 포함하는 이유는 무엇입니까?

Divi 테마는 WooCommerce 상점에서 가장 인기 있는 옵션 중 하나입니다. 강력한 기능이 많이 제공되는 매우 유연한 테마입니다. 그러나 한 가지 단점은 쇼핑 페이지의 제품에 장바구니에 추가 버튼이 없다는 것입니다. 이렇게 하면 구매 유입경로에 단계가 추가되고 전환에 영향을 줄 수 있습니다. 좋은 소식은 이 문제를 해결할 수 있는 방법이 있다는 것입니다.

이 가이드에서는 Divi 쇼핑 페이지에 장바구니에 추가 버튼을 쉽게 추가하는 방법 을 보여 드리겠습니다.

Divi에서 장바구니에 추가 버튼을 추가하는 방법은 무엇입니까?

여기에서는 Divi에 Add to Cart 버튼을 포함하는 가장 간단하고 효과적인 방법을 보여 드리겠습니다. 테마의 핵심 파일을 약간 변경하더라도 이러한 방법은 초보자도 쉽게 따라할 수 있습니다.

쇼핑 페이지에서 장바구니에 추가 버튼을 추가하는 두 가지 주요 방법은 다음과 같습니다.

  1. functions.php 파일 수정
  2. 코드 조각 플러그인 사용

두 가지 방법 모두 초보자에게 친숙하며 즉시 장바구니에 추가 버튼을 추가할 수 있습니다.

시작하기 전에

시작하기 전에 다음을 권장합니다.

  • 문제가 발생할 경우에 대비하여 완전한 백업을 생성하십시오.
  • 하위 테마 만들기: 테마의 파일을 직접 수정하지 않는 것이 좋습니다. 대신 하위 테마를 만들고 변경할 수 있습니다. 다른 방법이 있습니다. 이 튜토리얼에서는 플러그인을 사용합니다.

1) functions.php의 장바구니에 추가 버튼 포함

하위 테마 만들기

Divi에 Add to Cart 버튼을 추가하기 전에 자식 테마를 만들어야 합니다. 이를 위해 Child Themify라는 무료 WordPress 플러그인을 사용합니다. 따라서 먼저 사이트에 Child Themify를 설치해야 합니다.

그런 다음 활성화하십시오.

그런 다음 Appearance 섹션 아래에 플러그인 설정이 표시됩니다.

드롭다운에서 상위 테마를 선택해야 합니다. 우리의 경우 Divi용 하위 테마를 만들 것입니다. 그런 다음 새 하위 테마의 이름을 지정합니다.

일부 고급 옵션도 있지만 이를 위해 사용할 필요는 없습니다.

상위 테마를 선택하고 하위 테마의 이름을 지정한 후 하위 테마 만들기 버튼을 누릅니다.

그런 다음 모양 > 테마 섹션으로 이동하면 새 하위 테마가 표시됩니다. 활성화합니다.

이제 매장의 샵 페이지를 확인하세요. 우리의 경우 몇 가지 샘플 제품을 사용하여 데모 샵을 만들었습니다.

위의 스크린샷에서 볼 수 있듯이 장바구니에 추가 버튼이 없습니다. 따라서 사용자가 장바구니에 제품을 추가하려고 할 때 쇼핑 페이지에서 직접 수행할 수 없습니다. 대신 특정 제품 페이지로 이동하여 거기에서 장바구니에 항목을 추가해야 합니다.

좋은 소식은 쇼핑 페이지에 장바구니에 추가 버튼을 포함하는 쉬운 방법이 있다는 것입니다. 이렇게 하려면 자식 테마에 몇 줄의 코드를 추가해야 합니다.

functions.php 파일 변경

Divi의 쇼핑 페이지에 장바구니에 추가 버튼을 포함하려면 테마 편집기로 이동하여 functions.php 파일을 선택하십시오. 아래 코드를 복사하여 functions.php 파일에 붙여넣으세요.

 // 이 코드는 쇼핑 루프를 표시하는 페이지에 "장바구니에 추가" 버튼을 추가합니다.
add_action( 'woocommerce_after_shop_loop_item', 'woocommerce_template_loop_add_to_cart', 20 );

Divi의 장바구니에 추가 버튼 - PHP 스크립트

코드를 붙여넣은 후 파일 업데이트 를 클릭합니다. 그리고 샵 페이지 프론트엔드를 확인하시면 변경 사항을 보실 수 있습니다.

PHP로 Divi의 장바구니에 추가 버튼

장바구니에 추가 버튼을 쇼핑 페이지에 추가했습니다 !

2) 코드 조각 플러그인

또는 functions.php 파일을 업데이트하는 대신 플러그인을 사용하여 Divi에 Add to Cart 버튼을 포함할 수 있습니다. WordPress 및 사용자 지정에 대한 경험에서 Code Snippets는 이 작업에 가장 적합한 도구 중 하나입니다.

먼저 사이트에 Code Snippets 플러그인을 설치하고 활성화해야 합니다.

Divi에서 장바구니에 추가 버튼을 포함하는 코드 조각 플러그인

그런 다음 웹사이트에 새 스니펫을 추가해야 합니다.

식별 목적으로 스니펫의 이름을 지정하고 아래에서 코드를 복사하여 코드 필드에 붙여넣습니다.

 // 이 코드에는 쇼핑 루프를 표시하는 페이지에 "장바구니에 추가" 버튼이 포함됩니다.
add_action( 'woocommerce_after_shop_loop_item', 'woocommerce_template_loop_add_to_cart', 20 );

그런 다음 스니펫을 저장하고 활성화합니다.

다시 한 번 쇼핑 페이지에 장바구니에 추가 버튼이 표시됩니다.

Divi 쇼핑 페이지의 장바구니에 담기 버튼

보시다시피 두 방법 모두 매우 간단하고 효과적입니다. 초보자라면 코드 조각을 사용하는 것이 좋습니다. 핵심 파일을 쉽게 수정할 수 있는 무료 도구이며 웹사이트가 손상되지 않습니다.

장바구니에 추가 버튼을 사용자 정의하는 방법

Divi 상점 페이지에 장바구니에 추가 버튼을 성공적으로 포함했으므로 이제 버튼을 사용자 정의해야 합니다.

그렇게 하려면 버튼에 대한 사용자 정의 CSS 클래스를 지정해야 합니다. 간단한 PHP 코드가 작업을 수행합니다. 그런 다음 약간의 CSS를 추가하고 버튼을 사용자 정의할 수 있습니다.

따라서 코드 조각 섹션에 아래 PHP 코드를 새 코드로 붙여넣습니다.

 add_action( 'woocommerce_after_shop_loop_item', 'quadlayers_woocommerce_template_loop_add_to_cart', 10 );
add_action( 'woocommerce_after_shop_loop_item_title', 'quadlayers_woocommerce_template_loop_add_to_cart', 10 );

기능 quadlayers_woocommerce_template_loop_add_to_cart(){
   woocommerce_template_loop_add_to_cart(array('class'=>'button product_type_simple add_to_cart_button ajax_add_to_cart my_class_here')); 
}

그런 다음 CSS를 사용하여 버튼을 수정할 수 있습니다. 이 코드에서는 button product_type_simple add_to_cart_button ajax_add_to_cart 와 같은 버튼의 기본 CSS 클래스를 언급했습니다. 또한 my_class_here 를 대체하여 사용자 정의 CSS 클래스를 추가할 수 있습니다.

테마에 CSS를 추가할 때 다음과 같이 사용할 수 있습니다. .my_class { option:value !important; } .my_class { option:value !important; } . my_class 를 CSS 클래스로 대체해야 합니다.

예를 들어 다음과 같은 CSS 코드를 사용할 수 있습니다.

 .woocommerce-LoopProduct-link + a {
    /* 여기에 사용자 정의 CSS */
}

Divi 테마는 사용자 정의 CSS 편집기와 함께 제공되며 여기에 모든 CSS 코드를 붙여넣을 수 있습니다. 반면에 WordPress 사용자 지정 프로그램을 통해 추가 CSS 섹션을 사용할 수 있습니다. 실시간으로 무엇을 하고 있는지 볼 수 있는 커스터마이저를 사용하는 것이 좋습니다.

결론

그래서 Divi 쇼핑 페이지에 Add to Cart 버튼을 쉽게 포함할 수 있는 방법입니다. 이렇게 하면 구매 프로세스를 개선하고 고객에게 더 나은 경험을 제공하며 전환율을 높일 수 있습니다. 또한 상점에서 장바구니 포기를 줄이는 데 도움이 됩니다.

매장에서 전환율을 높이는 또 다른 흥미로운 옵션은 매장에 직접 결제 링크를 포함하는 것입니다. 이렇게 하면 구매 프로세스가 단축되고 사용자가 이탈할 가능성이 줄어듭니다. 이에 대한 자세한 내용은 WooCommerce 직접 결제 링크를 만드는 방법에 대한 가이드를 확인하세요.

또한 상점을 사용자 정의하려면 다음 자습서를 확인하는 것이 좋습니다.

  • WooCommerce Shop 페이지를 사용자 정의하는 방법은 무엇입니까?
  • WooCommerce에서 프로그래밍 방식으로 장바구니에 추가 기능
  • WooCommerce에서 AJAX 장바구니에 추가 버튼을 구현하는 방법은 무엇입니까?
  • WooCommerce 결제 페이지를 사용자 정의하는 방법은 무엇입니까?

마지막으로 Divi 테마를 최대한 활용하려면 다음 가이드를 참조하세요.

  • Divi에서 바닥글을 숨기고 제거하는 방법은 무엇입니까?
  • Divi 문의 양식이 작동하지 않습니까? 해결 방법은 다음과 같습니다.

이 기사가 도움이 되었다면 이 게시물을 소셜 미디어에서 친구들과 공유하는 것을 고려해 보십시오. 다른 사람들이 Divi 상점 페이지를 사용자 정의하는 데 도움이 됩니다.

전환을 개선하는 방법에 대한 자세한 내용은 최고의 WooCommerce 빠른 구매 플러그인을 확인하십시오.