WooCommerce Checkout에 제품 이미지를 추가하는 방법

고객의 쇼핑 경험을 개선하기 위해 WooCommerce 결제에 제품 이미지를 추가하시겠습니까? 우리는 당신을 덮었습니다. 이 기사에서는 WooCommerce 결제에 제품 이미지를 추가하는 방법을 보여줍니다.

하지만 이에 대해 알아보기 전에 WooCommerce 결제 페이지에 제품 이미지를 추가해야 하는 이유를 명확히 이해하는 것이 중요합니다. 이점과 판매에 미치는 영향을 아는 것도 중요합니다. 그럼 먼저 알아보도록 하겠습니다.

체크아웃에 제품 이미지를 추가해야 하는 이유는 무엇입니까?

체크아웃 페이지는 WooCommerce 스토어의 가장 중요한 페이지에 있습니다. 사용자가 구매를 완료하고 주문을 확인하는 곳입니다. 따라서 체크아웃 페이지는 더 나은 사용자 경험과 쉽게 따라할 수 있도록 최적화되어야 합니다.

기본 체크아웃 페이지를 보면 사용자 경험에 최적화되어 있지 않다는 것을 금방 알 수 있습니다. 예를 들어, 결제의 주문 섹션에는 이미지 없이 제품 제목만 표시됩니다. 이것은 고객이 올바른 제품을 얻었는지 확인하기 어렵게 만듭니다.

본질적으로 우리 인간은 일반 텍스트보다 시각적 개체가 더 좋습니다. 일반 텍스트를 읽는 것보다 이미지를 인식하는 것이 훨씬 쉽습니다. 제목과 함께 제품 이미지를 추가하면 고객이 제품을 훨씬 쉽게 인식하고 결제 시 올바른 제품을 받았는지 확인할 수 있습니다.

반면에 제품 이미지가 없으면 제품의 정확한 제목을 기억하거나 매장으로 돌아가 체크아웃 시 올바른 제품이 있는지 다시 확인해야 합니다. 분명히 이것은 좋은 사용자 경험의 신호가 아닙니다. 고객이 몇 가지 추가 조치를 취하게 만듭니다.

우리의 목표는 단계 수를 줄이고 고객을 위해 구매 프로세스를 더 간단하고 빠르게 만드는 것입니다. 더 나은 사용자 경험은 고객 만족도를 높이고 따라서 더 나은 판매로 이어집니다. 이제 WooCommerce 결제에 제품 이미지를 추가하는 방법을 살펴보겠습니다.

WooCommerce 결제에 제품 이미지를 추가하는 방법

WooCommerce 결제에 제품 이미지를 추가하기 위해 사용자 정의 코드 스니펫을 사용합니다. 걱정하지 마십시오. 이 부분을 수행하기 위해 코딩 경험이 없어도 됩니다. 그것은 매우 간단하고 간단합니다. 따라하시면 ​​정말 간단한지 아실겁니다.

코드 조각 추가

코드 조각으로 이동하기 전에 사이트의 전체 백업을 만들고 하위 테마를 사용하여 functions.php 파일을 편집하는 것이 좋습니다. 참고로 하위 테마를 만드는 방법 또는 이러한 하위 테마 플러그인을 사용하는 방법에 대한 가이드를 확인하세요.

하위 테마가 설정되면 WP 관리자 대시보드 > 모양 > 테마 편집기로 이동합니다. 자식 테마를 선택하고 functions.php 파일로 이동합니다. 여기에서 파일 끝에 사용자 지정 코드 조각을 추가하고 나중에 변경 사항이 적용되도록 업데이트 할 수 있습니다.

또는 핵심 WordPress 파일을 수정하는 것이 마음에 들지 않는 경우 코드 조각 플러그인을 사용할 수도 있습니다. WordPress 저장소에서 플러그인을 설치할 수 있습니다.

플러그인이 설치 및 활성화되면 WordPress 대시보드에서 플러그인 설정으로 이동하여 새 스니펫 추가를 클릭합니다. 이 플러그인을 사용하면 원하는 만큼 스니펫을 추가할 수 있습니다.

코드 조각 플러그인을 사용하면 플러그인이 자체적으로 코드 조각을 처리하므로 하위 테마가 필요하지 않습니다. 그러나 문제가 발생할 경우를 대비하여 항상 가지고 있는 것이 좋습니다.

이제 사이트에 코드 스니펫을 추가하는 방법을 알았으므로 WooCommerce 체크아웃에 제품 이미지를 추가하는 코드 스니펫을 살펴보겠습니다.

WooCommerce Checkout에 제품 이미지를 추가하기 위한 스니펫

여기에 두 가지 사용자 정의 스니펫이 있습니다. 첫 번째는 제품 제목에 맞춰 제품 이미지를 표시합니다. 반면 두 번째는 이미지와 제목을 별도의 줄에 표시합니다. 두 사람의 활약상을 보자.

인라인 스타일로 결제에 제품 이미지 추가

인라인 스타일 의 체크아웃 페이지에 제품 이미지를 추가하려면 다음 코드 스니펫을 사용하십시오.

 add_filter( 'woocommerce_cart_item_name', 'quadlayers_product_image_checkout', 9999, 3 ); 
기능 'quadlayers_product_image_checkout'( $name, $cart_item, $cart_item_key ) {
    if ( ! is_checkout() ) 
        {반환 $name;}
    $product = $cart_item['데이터'];
    $thumbnail = $product->get_image( array( '50', '50' ), array( 'class' => 'alignleft' ) ); 
    /*위에서 array('100', '100')과 같은 배열 값을 변경하여 축소판 크기를 변경할 수 있으며 정렬을 alignright로 변경할 수도 있습니다.*/
    $썸네일을 반환합니다. $이름;
}

귀하 또는 귀하의 고객이 체크아웃 페이지를 미리 보는 즉시 프론트엔드에서 업데이트됩니다.

별도의 줄에 제품 이미지 및 제목 추가

마찬가지로 다음 코드 스니펫을 사용하여 제품 이미지와 제목 을 별도의 줄에 표시할 수 있습니다. 제품 제목이 길고 이미지와 제목을 한 줄에 모두 넣을 수 있는 공간이 충분하지 않은 경우 유용할 수 있습니다.

 add_filter( 'woocommerce_cart_item_name', 'quadlayers_product_image_checkout', 9999, 3 );
기능 quadlayers_product_image_checkout( $name, $cart_item, $cart_item_key ) {
    if ( ! is_checkout() ) 
        {반환 $name;}
    $_product = apply_filters( 'woocommerce_cart_item_product', $cart_item['data'], $cart_item, $cart_item_key );
    $썸네일 = $_product->get_image();
    $이미지 = '<div class="quadlayers_product_image_checkout">'
                . $썸네일 .
            '</div>'; 
    /* 위에서 원하는 대로 이미지의 너비, 높이 및 정렬을 변경할 수 있습니다.*/
    $이미지를 반환합니다. $이름;
}

상품 이미지와 제목은 결제 페이지를 새로고침하면 별도의 줄에 표시됩니다.

그게 다야! 축하합니다! 이제 WooCommerce 결제에 제품 이미지를 성공적으로 추가했습니다. 그러나 더 많은 것이 있습니다. 고객이 주문 하기 버튼을 클릭하면 주문 지불 또는 주문 세부 정보 페이지로 이동하여 지불해야 합니다.

기본적으로 Order-Pay 페이지가 어떻게 보이는지, 그리고 이를 개선할 수 있는 방법을 살펴보겠습니다.

WooCommerce Oder-Pay 페이지에 제품 이미지를 추가하는 스니펫

주문 지불 페이지로 이동하면 고객이 지불하는 곳입니다. Order-Pay 페이지에는 제품 제목, 수량, 가격 및 총 주문 가격을 포함한 모든 주문 세부 정보가 표시됩니다. 다음은 기본적으로 페이지가 어떻게 보이는지입니다.

보시다시피 기본 Checkout 페이지와 마찬가지로 제품 이미지도 여기에 표시되지 않습니다. 수정하겠습니다. 우리의 목표는 주문-지불 페이지에 제품 이미지를 추가하는 것입니다.

주문-지불 페이지에 제품 이미지를 추가하려면 다음 코드 스니펫을 사용할 수 있습니다. 앞에서 설명한 대로 원하는 방법을 사용하여 사이트에 추가하기만 하면 됩니다.

 add_filter( 'woocommerce_order_item_name', 'quadlayers_product_image_orderpay', 9999, 3 );
기능 quadlayers_product_image_orderpay( $name, $item, $extra ) {
    if ( ! is_checkout() ) 
        {반환 $name;}
    $product_id = $item->get_product_id();
    $_product = wc_get_product( $product_id );
    $썸네일 = $_product->get_image();
    $이미지 = '<div class="quadlayers_product_image_orderpay">'
                . $썸네일 .
            '</div>'; 
    /* 위의 이미지 너비, 높이 및 이미지 정렬을 원하는 대로 변경할 수 있습니다.*/
    $이미지를 반환합니다. $이름;
} 

브라보! 이제 WooCommerce Checkout 및 Order-Pay 페이지에 제품 이미지를 성공적으로 추가할 수 있습니다. 고객은 향상된 사용자 경험에 분명히 기뻐할 것입니다.

지금까지 WooCommerce Checkout 및 Order-Pay 페이지에 제품 이미지를 추가하는 방법을 살펴보았습니다. 체크아웃 페이지를 사용자에게 더 친숙하게 만드는 몇 가지 다른 방법을 살펴보겠습니다. 그 내용에 대해 알아보자.

보너스: Checkout Manager 플러그인을 사용하여 Checkout 페이지 사용자 정의

WooCommerce 결제 페이지를 사용자 정의하는 가장 쉬운 방법은 타사 플러그인을 사용하는 것입니다. 데모를 위해 QuadLayers에서 개발한 WooCommerce 플러그인 용 Checkout Manager를 사용합니다 . 90,000개 이상의 활성 설치로 Checkout 페이지를 사용자 정의하는 최고의 플러그인 중 하나입니다.

WooCommerce용 Checkout Manager는 모든 체크아웃 필드를 관리하여 요구 사항에 따라 사용자 정의할 수 있는 기능이 풍부한 플러그인입니다. 이 도구가 제공하는 모든 유용한 기능을 확인하려면 제품 페이지를 따르십시오.

이제 플러그인을 사용하여 WooCommerce 체크아웃 페이지를 사용자 정의하는 방법을 살펴보겠습니다.

WooCommerce 플러그인용 Checkout Manager 설치

먼저 플러그인을 설치하고 활성화해야 합니다. WordPress 관리 대시보드 로 이동하여 플러그인 > 새로 추가로 이동합니다. QuadLayers에서 WooCommerce 플러그인용 Checkout Manager를 검색하고 지금 설치 버튼을 클릭합니다. 플러그인이 설치되면 활성화 를 누르십시오. 이렇게 하면 사이트에서 플러그인이 활성화됩니다.

이제 플러그인이 설치되어 사용할 준비가 되었습니다. Checkout Manager 플러그인을 사용하여 결제 페이지를 사용자 정의하는 방법으로 넘어갑시다. 프리미엄 버전을 원하면 웹사이트에도 추가할 수 있습니다. 하지만 WooCommerce 웹사이트에 플러그인을 수동으로 설치해야 합니다.

체크아웃 필드 추가, 편집 및 삭제

사이트에서 플러그인을 활성화하면 WordPress 관리 대시보드 로 이동하여 WooCommerce > 체크아웃으로 이동합니다. 거기에서 Checkout Manager에 대한 모든 설정을 찾을 수 있습니다.

체크아웃 탭 아래에는 체크아웃 페이지의 섹션별로 다른 메뉴가 있습니다. 배송, 청구, 주문, 이메일 필드를 관리할 수 있습니다. 또한 사용자 정의 필드를 추가할 수도 있습니다. 각 메뉴 내에서 요구 사항에 따라 관리할 수 있는 관련 필드를 찾을 수 있습니다.

각 필드에는 특정 필드가 작동하는 방식을 제어하는 ​​여러 매개변수가 있습니다. 이러한 매개변수를 수정하여 해당 동작을 변경할 수 있으므로 체크아웃 페이지를 더 잘 제어할 수 있습니다. 다양한 필드 매개변수를 살펴보고 그 매개변수가 수행하는 작업을 살펴보겠습니다.

• 위치 변경: 위쪽 및 아래쪽 화살표를 사용하여 필드를 위 또는 아래로 이동할 수 있습니다. 하나를 클릭하기만 하면 필드가 각각 위 또는 아래로 한 단계 이동합니다. 또는 세 개의 수평선을 클릭하고 끌어 필드를 원하는 위치로 재배치할 수 있습니다.
• 필수: 필수 매개변수를 켜면 필드가 필수가 됩니다. 고객은 필수로 표시된 필드를 건너뛸 수 없습니다.
• 위치: 위치 매개변수를 사용하면 기본적으로 원하는 대로 필드를 정렬할 수 있습니다. 필드를 왼쪽 또는 오른쪽으로 정렬하거나 전체 너비로 만들도록 선택할 수 있습니다.
• 지우기: 지우기 매개변수를 켜면 이 특정 필드와 일치하는 다른 필드가 제한됩니다.
• 비활성화: 이름에서 알 수 있듯이 비활성화 매개변수는 켜져 있을 때 체크아웃에 표시되지 않도록 필드를 비활성화합니다.
• 편집 및 삭제: 해당 버튼을 사용하여 필드를 편집하거나 삭제할 수 있습니다. 삭제 버튼은 사용자 정의 필드에만 나타납니다. 기본 필드는 삭제할 수 없으며 비활성화만 가능합니다.

따라서 필드 매개변수를 조정하여 필드를 관리하는 것이 전부였습니다. 다음으로 WooCommerce Checkout에 사용자 정의 업로드 필드를 추가하는 방법을 살펴보겠습니다.

WooCommerce Checkout에 사용자 정의 업로드 필드 추가

WordPress 관리 대시보드 로 이동하여 WooCommerce > Checkout으로 이동합니다. 결제 탭에서 추가 필드 메뉴를 엽니다.

참고: 사용자 정의 필드 추가는 추가 필드에만 국한되지 않습니다. 청구, 배송 등과 같은 체크아웃 페이지의 다른 섹션에 사용자 정의 필드를 추가할 수 있습니다. 체크아웃 탭 내의 해당 메뉴로 이동하여 원하는 영역에 새 필드를 추가하기만 하면 됩니다.

추가 필드 메뉴에서 새 필드 추가 버튼을 클릭하여 새 필드를 만듭니다. 또한 오른쪽 모서리의 드롭다운 메뉴에서 추가 필드 섹션의 위치를 ​​조정할 수 있습니다. 청구서 양식이나 주문 메모 앞이나 뒤에 둘 수 있습니다.

새 필드를 만들기 위한 양식이 있는 새 페이지로 이동합니다. 파일 업로드 버튼을 추가하는 데 관심이 있으므로 유형을 파일로 설정하고 레이블과 버튼 텍스트를 지정합니다. 저장 을 눌러 새 필드를 저장하십시오.

그게 다야! 그것만큼 간단합니다. 이제 체크아웃 페이지로 이동하여 변경 사항을 확인할 수 있습니다. 파일 업로드 버튼이 작동하는 것을 볼 수 있습니다.

마찬가지로 Checkout 페이지를 사용자 정의하는 여러 가지 방법이 있습니다. 전체 자습서를 보려면 WooCommerce Checkout 페이지를 사용자 지정하는 방법에 대한 전체 가이드를 확인하세요.

결론

대체로 체크아웃은 고객의 구매 프로세스에서 가장 중요한 단계 중 하나입니다. 이때까지 고객은 이미 구매를 완료하기로 결정했습니다. 따라서 좋은 판매를 망치기 위해 여기서 나쁜 일이 일어나는 것을 원하지 않습니다. 그렇기 때문에 더 나은 사용자 경험을 위해 결제 페이지를 최적화해야 합니다. 고객이 구매를 완료하고 주문할 가능성이 더 높아집니다.

기본 체크아웃 페이지는 매우 기본적이며 사용자 경험에 최적화되어 있지 않습니다. 예를 들어, 제품 제목만 표시하고 이미지는 표시하지 않습니다. 고객의 관점에서 제목만으로는 결제 시 올바른 품목을 받았는지 확인하기에 충분하지 않습니다. WooCommerce 결제에 제품 이미지를 표시하면 최종 사용자가 결제 시 올바른 제품을 구매했음을 확인할 수 있으므로 여기에서 매우 유용할 수 있습니다.

이 기사에서는 사용자 정의 코드 스니펫을 사용하여 WooCommerce 결제에 제품 이미지를 추가하는 방법을 살펴보았습니다. 제품 이미지를 표시하는 두 가지 옵션, 즉 체크아웃 페이지에서 줄과 별도의 줄을 보았습니다. 또한 사용자 정의 코드를 사용하여 WooCommerce Order-Pay 페이지에 제품 이미지를 추가하는 방법도 보았습니다. 또한 WooCommerce 플러그인용 Checkout Manager를 사용하여 Checkout 페이지를 사용자 정의하는 다양한 방법을 보았습니다.

이 가이드가 도움이 되었다면 관심을 가질 만한 기사가 더 있습니다.

• WordPress에서 이미지를 압축하는 방법(플러그인 포함 및 미포함)
• 이미지에 ALT 태그를 추가하는 최고의 플러그인(무료 및 유료)
• WooCommerce 이미지 크기 문제를 해결하는 방법

WooCommerce 결제에 제품 이미지를 추가해 본 적이 있습니까? 어떤 솔루션이 도움이 되었나요? 얼마나 차이가 날 것 같습니까? 아래 의견에 알려주십시오.