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

게시 됨: 2021-08-31

제품에 이미지를 추가하는 방법을 찾고 계십니까? 그것이 특집이든 이미지이든 갤러리이든, 항목을 표시하는 방법에 따라 판매 금액이 결정됩니다. 그렇기 때문에 이 가이드 에서는 WooCommerce에서 제품에 이미지를 추가하는 방법을 보여줍니다.

전자 상거래에서 이미지의 중요성

이미지는 제품을 판매할 때 중요한 요소 중 하나입니다. 사진 한 장이 천 마디 말을 하는 것처럼, 매력적인 이미지가 있는 제품은 고객의 시선을 사로잡고 판매를 유발할 가능성이 더 큽니다.

상점 주인은 제품의 기능을 설명하는 데 많은 노력을 기울이는 경향이 있습니다. 그러나 우리가 합리적인 결정을 내리고 있다고 생각하고 싶어도 대부분의 결정은 감정적이라는 것이 사실입니다. 인간은 감정적 결정을 내리고 합리적으로 정당화하는 경향이 있습니다. 제품이 좋아 보이면 관심을 끌기 때문에 구매 가능성이 더 높아집니다.

판매하는 제품의 유형에 관계없이 보기에 좋으면 판매 가능성이 더 높아집니다. 생각해보면 논리적입니다. 누군가가 신발, 옷, 소프트웨어 등 어떤 제품을 사용하거나 착용하려고 하면 좋아 보이기를 원할 것입니다. 그렇기 때문에 제품을 홍보하는 데 사용하는 이미지를 추가 및 최적화하고 판매 제품이 가장 잘 보이도록 하는 것이 중요합니다.

이제 중요성을 이해했으므로 WooCommerce 제품에 이미지를 추가하는 방법을 살펴보겠습니다.

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

WooCommerce에서 제품에 이미지를 추가하는 두 가지 주요 방법이 있습니다.

WooCommerce 대시보드 사용
프로그래밍 방식으로

두 가지 방법을 모두 살펴보겠습니다.

1) WooCommerce 대시보드에서 이미지 추가

제품에 이미지를 추가하는 것은 WooCommerce 스토어에서 매우 간단한 작업입니다. 제품을 만들거나 편집할 때 사이드바에서 이미지 메타 상자를 찾을 수 있습니다. 여기에서 단일 추천 이미지와 여러 이미지가 있는 이미지 갤러리를 설정하여 항목을 선보일 수 있습니다.

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

이 중 하나를 클릭하면 모달이 열리고 새 이미지 파일을 업로드하거나 WP 미디어 라이브러리에서 기존 파일 중 하나를 선택할 수 있습니다.

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

제품 갤러리에 이미지를 추가하는 경우 Ctrl + 왼쪽 클릭을 눌러 여러 이미지를 선택하고 단일 작업으로 추가할 수 있습니다.

또는 제품 콘텐츠 설명에서 이미지를 추가할 수 있습니다. 미디어 추가 버튼을 누르고 추가하려는 이미지를 선택하기만 하면 됩니다. 이 방법을 사용할 경우 전체 상품 페이지의 디자인에 영향을 줄 수 있으므로 텍스트 편집기에서 이미지를 추가하기 전에 올바른 크기와 정렬을 선택했는지 확인하십시오.

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

대시보드에서 이미지를 추가하는 것은 간단합니다. 그러나 코딩 기술이 있는 경우 프로그래밍 방식으로 이미지를 추가하여 유연성을 높일 수도 있습니다. 어떻게 하는지 봅시다.

2) 프로그래밍 방식으로 WooCommerce 제품에 이미지를 추가하는 방법

경우에 따라 프로그래밍 방식으로 이미지를 추가해야 할 수도 있습니다. 이를 통해 더 많은 유연성을 제공하고 이미지에서 단일 제품, 기능 이미지, 갤러리 등에 이르기까지 모든 것을 포함할 수 있습니다.

이 섹션에서는 특정 제품에 이미지를 추가하는 데 도움이 되는 샘플 스크립트를 보여줍니다. 함수의 처음 두 줄에 있는 제품 및 이미지 ID를 제품 및 이미지 ID로 바꿔야 합니다. 그렇지 않고 해당 제품과 이미지 ID가 없으면 오류가 발생합니다.

또한 스크립트는 단일 실행에서 작동한다는 점에 유의하십시오. 즉, 실행한 후 삭제할 수 있습니다.

마지막으로 다음 스크립트를 자식 테마의 functions.php 파일에 붙여넣어야 합니다. 모양 > 테마 편집기로 이동하면 됩니다. 그런 다음 오른쪽 열에서 functions.php 파일을 검색하여 아래와 같이 코드를 붙여넣습니다. 또는 코드 조각과 같은 플러그인을 사용할 수 있습니다.

참고 : 일부 핵심 파일을 편집하므로 시작하기 전에 사이트를 백업하는 것이 좋습니다. 모범 사례가 되는 것 외에도 문제가 발생할 경우에 대비하여 항상 최근 백업을 유지하는 것이 좋습니다. 후크에 익숙하지 않은 경우 WooCommerce 후크 가이드에서 다양한 유형의 후크와 사용 방법을 배울 수 있습니다.

2.1) 단일 제품에 추천 이미지 추가

이 스크립트는 단일 제품에 대한 추천 이미지를 설정합니다. 이를 위해서는 아래와 같이 이미지 ID와 제품 ID를 지정해야 합니다. 예를 들어 이 경우 ID가 48인 이미지를 ID가 195인 제품의 추천 이미지로 설정합니다.

 기능 QuadLayers_add_featured_image() {

    $ 이미지 ID = 48; // 이미지 아이디
    $post_id = 195; //제품 ID

    set_post_thumbnail( $post_id, $imageID );
    
}

add_action('초기화', 'QuadLayers_add_featured_image');

init 후크는 각 페이지가 로드될 때마다 함수가 어디에서나 실행될 수 있도록 합니다. 그 위에 set_post_thumbnail() 함수를 사용하여 추천 이미지를 설정합니다. 이것은 제품과 게시물 모두에서 작동합니다.

2.2) 여러 제품에 추천 이미지 추가

마찬가지로, 단순히 ID를 추가하여 여러 제품에 대해 동일한 작업을 수행할 수 있습니다. 이 스크립트는 ID가 32, 33, 34인 제품에 ID가 53인 이미지를 추가합니다.

 기능 QuadLayers_multiple_featured_image() {

    $ 이미지 ID = 53; // 이미지 아이디
    $post_id = 배열(32,33,34); //제품 ID

    ($ii=0; $ii < count($post_id); $ii++) { 
          
           set_post_thumbnail( $post_id[$ii], $imageID );      
    }
    
}
add_action('초기화', 'QuadLayers_multiple_featured_image');

보시다시피 이것은 이전과 동일한 스크립트이지만 모든 제품 ID를 배열에 넣습니다. 이런 식으로 여러 제품에 동일한 추천 이미지를 동시에 할당할 수 있습니다. 이는 미적 변화를 일으키지 않는 제품 변형에 유용할 수 있습니다. 예를 들어, 메모리 RAM이 다른 동일한 휴대폰의 변형에 동일한 추천 이미지를 사용할 수 있습니다.

2.3) 제품 갤러리에 이미지 추가

WooCommerce에서 제품 갤러리에 이미지를 추가하는 것은 두 가지 기능을 사용해야 하기 때문에 약간 더 복잡합니다. 다음 스크립트를 확인하면 첫 번째 함수( QuadLayers_create_gallery )가 갤러리를 만드는 데 필요한 정보를 준비하는 것을 볼 수 있습니다. 갤러리를 추가할 이미지 목록과 제품 ID입니다.

한편, update_post_met() 은 갤러리 생성을 담당한다. 이를 위해서는 갤러리를 추가하려는 제품의 ID와 배열의 이미지 목록을 사용해야 합니다.

 함수 QuadLayers_create_gallery(){ 
        $imgs_ids=배열(48,53,47); //이미지 ID
        add_img_to_gallery(195,$imgs_ids); // 제품 ID
}
기능 add_img_to_gallery($product_id,$image_id_array){
        update_post_meta($product_id, '_product_image_gallery', implode(',',$image_id_array)); 
  
}
add_action('초기화','QuadLayers_create_gallery');

2.4) 기본 이미지를 추천 이미지가 없는 제품으로 설정

제품의 추천 이미지를 설정하려면 관리 대시보드에서 WooCommerce > 설정 > 제품 으로 이동해야 합니다.

프로그래밍 방식으로 기본 이미지를 설정하려면 다음 스니펫을 사용하세요.

 add_filter('QuadLayers_default_image', 'custom_woocommerce_placeholder_img_src');

기능 QuadLayers_default_image( $src ) {
	$upload_dir = wp_upload_dir();
	$uploads = untrailingslashit( $upload_dir['baseurl'] );
	// 이미지의 경로로 대체
	$src = $업로드 . '/2021/07/album-1.jpg';
	 
	$src 반환;
}

이렇게 하면 추천 이미지가 없는 모든 제품에 기본 이미지가 할당됩니다. 이 경우 ID 대신 이미지 경로를 사용하므로 이미지의 올바른 경로로 대체해야 합니다.

경로를 얻으려면 미디어 라이브러리 로 이동하여 사용하려는 이미지를 찾고 URL 경로를 복사하여 현재 형식을 유지하는 위의 코드에 붙여넣으면 됩니다.

사용자 정의 이미지 크기를 추가하는 방법

WooCommerce 제품에 이미지를 추가하는 것 외에도 항목을 사용자 정의하기 위해 할 수 있는 일이 더 있습니다. 좋은 옵션은 사용자 정의 이미지 크기를 만드는 것입니다. 기본적으로 WordPress에는 썸네일(150 x 150), 중간(300 x 300), 크게(1024 x 1024)의 3가지 이미지 크기가 있습니다. 대시보드에서 이러한 크기를 쉽게 변경할 수 있지만 대신 사용자 지정 기본 크기를 추가하려면 어떻게 해야 합니까? 어떻게 하는지 봅시다.

먼저 functions.php 파일을 열고 다음 코드를 붙여넣습니다.

add_theme_support( 'post-thumbnails' );

이렇게 하면 add_image_size 기능이 활성화되고 추가 이미지 크기를 생성할 수 있습니다. 그런 다음 파일을 업데이트합니다. 이제 몇 가지 새로운 이미지 크기를 추가해 보겠습니다. 다음 코드에서는 크기가 다른 4개의 사용자 지정 크기를 추가합니다. 코드를 붙여넣고 필요에 따라 이름과 치수를 조정하기만 하면 됩니다.

 add_image_size( 'post-thumbnail size' , 800, 240 ); add_image_size( 'homepage-thumb size' , 220, 180 ); add_image_size( 'fullpage-thumb size' , 590, 790 );

그게 다야! 이제 사이트에서 더 많은 기본 크기를 선택할 수 있습니다. 이에 대한 자세한 내용은 사용자 지정 이미지 크기를 추가하는 방법에 대한 가이드를 확인하세요.

보너스: WordPress에서 기본 이미지 크기 제거

WordPress에 사진을 업로드할 때마다 방금 본 3가지 기본 이미지 크기(썸네일, 중형 및 대형)로 3개의 사본이 자동으로 생성된다는 사실을 눈치채셨을 것입니다.

이것은 유용하고 시간을 절약하는 데 도움이 될 수 있습니다. 그러나 이러한 크기 중 일부를 사용하지 않으면 이미지는 서버 공간만 차지합니다. 빠른 해결책은 사이트에서 해당 이미지 크기를 제거하고 해당 이미지 사본을 생성하지 않는 것입니다.

좋은 소식은 간단한 스크립트로 이 작업을 수행할 수 있다는 것입니다. 예를 들어 사이트에서 중간 크기를 제거하려고 한다고 가정해 보겠습니다. 하위 테마의 functions.php 파일에 다음 스크립트를 복사하여 붙여넣기만 하면 됩니다.

 add_filter( 'intermediate_image_sizes_advanced', 'prefix_remove_default_images' ); 
// 이것은 기본 중간 이미지 크기를 제거합니다. 
함수 prefix_remove_default_images( $sizes ) { 
unset( $sizes['medium']); // 300픽셀 
$size 반환;
}

다른 크기를 제거하려면 제거하려는 크기의 다른 줄을 추가하십시오. 예를 들어 큰 크기도 제거하려는 경우 코드는 다음과 같습니다.

 add_filter( 'intermediate_image_sizes_advanced', 'prefix_remove_default_images' ); 
// 이것은 기본 중형 및 대형 이미지 크기를 제거합니다. 
함수 prefix_remove_default_images( $sizes ) { 
unset( $sizes['medium']); // 300픽셀
unset( $sizes['large']); // 1024픽셀 
$size 반환;
}

그게 다야! 이미지 크기를 쉽게 제거할 수 있는 방법입니다. 이에 대한 자세한 내용은 단계별 자습서를 확인하십시오.

결론

요약하자면, 사진은 제품을 판매할 때 필수적입니다. 매력적인 그림이 있는 항목은 고객의 관심을 끌고 상점에 대한 판매를 유발할 가능성이 더 큽니다.

이 가이드에서는 WooCommerce 제품에 이미지를 추가하는 두 가지 방법을 보았습니다.

WooCommerce 대시보드에서
프로그래밍 방식으로

이제 어느 것이 더 적합합니까? 대시보드에서 이미지를 추가하는 것은 매우 쉽기 때문에 좋은 옵션입니다. 그러나 코딩 기술이 있고 더 많은 유연성을 원하는 경우 프로그래밍 방식으로 이미지를 추가할 수도 있습니다. 이미지, 추천 이미지 및 갤러리를 제품에 쉽게 추가하는 데 도움이 되는 몇 가지 스크립트를 보여 드렸습니다.

마지막으로 사이트에서 사용자 정의 크기 이미지를 추가하고 기본 이미지 크기를 제거하여 사이트를 사용자 정의하고 제품을 더 매력적으로 만드는 방법도 살펴보았습니다. 제품 페이지를 최대한 활용하는 방법에 대한 자세한 내용은 제품 페이지 사용자 정의 가이드를 참조하십시오.

제품에 이미지를 추가했습니까? 어떤 방법을 사용하셨나요? 아래 의견 섹션에서 알려주십시오!

상점을 사용자 정의하는 더 많은 자습서를 보려면 다음 게시물을 확인하십시오.

WooCommerce에서 쇼핑 페이지를 사용자 정의하는 방법
가이드: 프로그래밍 방식으로 WooCommerce 감사 페이지를 편집하는 방법
결제 최적화를 위한 전체 가이드