WooCommerce 스토어 프론트 썸네일 크기를 설정하는 방법
게시 됨: 2020-09-26
WooCommerce 상점을 운영하고 있다면 이미지가 온라인 상점에서 가장 중요한 부분 중 하나라는 것을 알고 있을 것입니다. 그러나 WooCommerce는 매우 다양한 제품 이미지 크기 유형을 사용합니다. 따라서 특정 요구 사항에 맞게 변경할 수 있는 위치를 파악하기 어렵습니다.
WooCommerce 스토어 프론트 썸네일 크기 설정
이것은 WooCommerce 이미지 사용자 정의가 약간 복잡해질 수 있음을 의미합니다. 이것이 내가 WooCommerce 이미지의 각 측면을 살펴보기 위해 이 가이드를 만든 이유입니다. 따라서 자신에게 맞는 부분으로 건너뛸 수 있습니다. 또한 Storefront 테마를 사용할 것입니다.
제품 이미지 크기를 설정하면 어떤 이점이 있습니까?
'어떻게'에 대해 알아보기 전에 그 이유가 무엇인지 궁금할 것입니다. 다음은 몇 가지 이점입니다.
- 이미지 흐림을 방지합니다. 잘못된 크기의 이미지는 흐리게 표시되어 구매자에게 나쁜 첫인상을 줄 수 있습니다.
- 속도를 최적화합니다. 이미지가 크면 로드 시간이 더 오래 걸립니다. 이렇게 하면 사이트 속도가 느려지고 수익이 줄어들고 사용자가 불행해집니다.
제품 썸네일 이미지 크기 조정 단계
기본적으로 WooCommerce를 사용하면 제품 이미지의 크기를 조정할 수 있습니다. 다음의 간단한 단계를 따르기만 하면 됩니다.
- WordPress 사이트에 로그인하고 관리자로 대시보드 에 액세스합니다.
- 대시보드 메뉴에서 모양 메뉴 > 사용자 정의를 클릭합니다.
- WooCommerce > 제품 이미지를 클릭합니다.
- 썸네일 자르기 필드에서 이미지의 높이를 설정할 수 있습니다.
- 변경 사항에 만족하면 게시 를 클릭합니다.
매장 제품 이미지 높이에 대한 궁극적인 가이드
썸네일 필드에는 상점 또는 카탈로그 이미지의 높이를 설정하는 3가지 옵션이 제공됩니다.
- 1:1: 1:1을 선택하면 이미지가 너비 360픽셀, 높이 360픽셀로 잘립니다. 이것은 Thumbnail Width 필드에서 이미지 너비를 360px로 설정했다고 가정할 때 작동합니다.
- 사용자 정의: 여기에서 이미지의 종횡비를 선택할 수 있습니다. 다음은 인기 있는 종횡비(1:1, 5:4, 4:3, 3:2, 16:9 및 3:1) 중 일부입니다.
- Uncropped: 이 옵션에서 이미지의 높이는 그대로 유지됩니다. 스토어의 이미지는 업로드된 가로 세로 비율을 사용하여 표시됩니다.
자주 묻는 질문
- 테마 개발자가 설정한 경우 이미지 크기를 변경하려면 어떻게 해야 합니까?
테마 functions.php 파일에서 이미지 너비 설정을 제거하거나 변경하여 이에 대한 간단한 해결책이 있습니다. Storefront 테마에는 기본 이미지 또는 축소판 필드에 대한 설정이 없습니다. storefront/inc/class-storefront.php에 미리 선언되어 있기 때문입니다.
// WooCommerce 지원을 선언합니다. add_theme_support( 'woocommerce', apply_filters( 'storefront_woocommerce_args', array( '단일_이미지_너비' => 416, '썸네일_이미지_너비' => 324, 'product_grid' => 배열( 'default_columns' => 3, 'default_rows' => 4, '최소_열' => 1, '최대_열' => 6, '최소 행 수' => 1 ) ) ) );
단일 제품 이미지 크기는 너비 416px, 썸네일 너비 324px로 설정되었습니다. 즉, 이 두 줄을 제거하거나 너비 번호를 원하는 너비로 변경할 수 있습니다. 단, 자식 테마를 생성한 후에는 반드시 변경해야 합니다. 테마를 업데이트하면 이전 설정으로 돌아가기 때문입니다.
- 카탈로그 이미지 크기는 어떻게 설정합니까?
상점 제품 이미지 및 카탈로그 또는 카테고리 이미지의 경우 모양 > 사용자 정의 > WooCommerce > 제품 이미지 > 썸네일 너비 필드의 설정에 따라 크기가 조정됩니다.
- 내 WooCommerce 제품 이미지가 흐릿한 이유는 무엇입니까?
WooCommerce 스토어의 경우 다음과 같은 몇 가지 사항을 확인할 수 있습니다.
- 이미지의 품질을 확인하십시오. 품질이 좋은지 확인하고 WooCommerce 스토어에 추가했을 때 품질이 낮으면 원하는 만큼 선명하고 선명하게 보이지 않습니다.
- 썸네일 설정. 설정을 확인하고 설정이 제품 페이지의 500px 이미지와 카탈로그 페이지의 160px 이미지를 찾고 있지만 160px 이미지만 업로드하면 WooCommerce가 자동으로 이미지를 확대하여 흐릿하게 보이게 합니다.
- 가장 좋은 이미지 크기는 무엇입니까?
온라인 상점의 가장 좋은 이미지 크기는 상점에 사용하는 테마에 따라 다릅니다. 셔츠와 같이 심플한 상품을 판매할 경우 이미지 사이즈는 가로 800~1000px가 적당합니다.
그러나 상세하거나 복잡한 경우 더 큰 이미지를 업로드하면 잠재 고객이 확대하여 해당 세부 사항을 가까이에서 볼 수 있습니다. 권장 크기는 너비가 2000픽셀이며 더 잘 작동합니다.
큰 이미지를 업로드하면 안 된다는 점도 언급할 가치가 있습니다. 이미지가 너무 크면 사이트 속도가 느려지고 결과적으로 판매에 영향을 미칠 수 있습니다.
결론
이 간단한 자습서에서는 몇 번의 클릭으로 WooCommerce Storefront 축소판 크기를 설정하는 방법을 배웠습니다. 또한 제품 및 갤러리 이미지 크기를 변경하는 방법과 썸네일 설정에 대한 궁극적인 가이드를 설명했습니다.
또한 WooCommerce 제품 이미지 크기 설정의 이점을 배웠습니다. 이미지가 너무 크면 사이트 속도가 느려지고 결과적으로 판매에 영향을 미칠 수 있습니다. 또한, 발생할 수 있는 몇 가지 일반적인 문제가 포함된 자주 묻는 질문 섹션을 추가했습니다.
이미지는 온라인 상점에서 판매할 때 매우 중요합니다. 이 튜토리얼에서 제공하는 지침을 따르고 변경 사항이 확실하지 않은 경우 WooCommerce용 WooThumbs와 같은 플러그인 사용을 고려하십시오. 번거로움 없이 WooCommerce 제품 이미지 크기를 변경하고 WooCommerce 제품 갤러리를 개선할 수 있습니다.
유사한 기사
- Storefront WooCommerce에 사이드바를 추가하는 방법
- WooCommerce Storefront 자식 테마를 만드는 방법 [전체 가이드]
- 역할별 등록 후 사용자를 리디렉션하는 방법
- WooCommerce 제품 이미지에서 확대/축소 효과를 제거하는 방법
- 헤더의 WooCommerce Storefront 높이를 조정하는 방법
- WooCommerce 테마의 제품 페이지에서 사이드바를 제거하는 방법
- WooCommerce에서 주문을 자동 승인하는 방법
- WooCommerce에서 사용자 정의 관련 제품을 설정하는 방법
- WooCommerce에서 제품 ID를 빠르게 찾는 방법
- 프론트엔드에서 Woocommerce 제품을 추가하는 방법
- 스토어프론트 설정 후 제품 추가 방법 [초보자 가이드]
- WooCommerce에서 품절 변형을 숨기는 방법
- WooCommerce에서 장바구니에 추가 버튼을 숨기는 방법
- 검색 결과에서 WooCommerce 제품을 숨기는 방법
- 잡히지 않은 TypeError를 수정하는 방법: wp.template은 함수가 아닙니다
- WooCommerce 제품 속성을 단계별로 사용하는 방법 [전체 가이드]
- 카테고리별로 WooCommerce 제품을 표시하는 방법