[워드프레스] 우커머스 상품 이미지 크기를 변경하는 방법
우커머스(WooCommerce) 상품 이미지가 너무 작거나, 흐리거나 혹은 너무 큰 경우 업로드한 상품 이미지가 우커머스 상품 이미지 설정과 맞지 않기 때문입니다. 이 경우 아래 절차를 참고로 상품 이미지 크기를 조정하시기 바랍니다.
워드프레스 관리자 페이지(대시보드)의 사이드바에서 우커머스 > 설정을 클릭합니다.
그러면 우커머스 설정 페이지가 표시됩니다. 맨 위에서 두 번째 탭인 "상품" 탭을 누르고 "표시하기"를 선택합니다. 그러면 아래와 같은 화면이 표시됩니다.
그림에서 아래의 "상품 이미지" 부분에서 상품 이미지 크기를 변경할 수 있습니다. 카탈로그 이미지, 단일 상품 이미지, 상품 썸네일 크기를 조정할 수 있습니다.
업로드하는 상품 이미지의 크기가 여기에서 입력하는 값에 따라 크기가 재조정됩니다. 만약 "원본 비율 무시"를 누르면 설정한 크기로 강제로 변경되며 이미지가 왜곡되지 않고 잘리게 될 것입니다.
최소 권장 폭(Width)는 500px이며 높이(Height)는 비워두는 것이 좋습니다. (높이 값을 입력하면 이미지가 잘릴 수 있습니다.)
설정을 변경한 후에 맨 아래의 "변경 사항 저장"을 클릭하면 변경한 값이 저장됩니다. 테스트를 해보니 설정을 변경하고 저장하니 곧바로 상품 그림 크기가 변경되네요. 만약 변경되지 않으면 Regenerate Thumbnails 플러그인을 다운로드하여 설치한 후에 썸네일을 다시 생성하면 상품 썸네일이 다시 생성되어 크기가 변경될 것입니다.
업데이트:
이 글을 작성한 후에 우커머스가 업데이트되면서 일부 메뉴가 사용자 정의하기 페이지 아래로 이동했습니다. 제품 이미지 옵션은 테마 디자인 > 사용자 정의하기 > 우커머스 > 제품 이미지를 클릭하여 접근할 수 있습니다.
안녕하세요 워드님
저도 비슷한 문제를 겪고있습니다.
### Deleted Personal Information ###
상품 메인 이미지가 흐려지는 현상인데, 노트북이나, 테블릿 pc에서 볼 때는
원래의 화질로 표시됩니다. 그러나 데스크탑 pc (조금 큰 모니터)로 볼 때는 상품 이미지가 흐려지는데요.
말씀해주신 방법 중 제품 이미지 옵션은 테마 디자인 > 사용자 정의하기 > 우커머스 > 제품 이미지 이 방법을 사용 해 볼수 있을 것 같은데
사용자 정의하기 탭에 [우커머스] 버튼이 없습니다.
이미지 원본 크기의 문제일까요? 구글에서 여러가지 방법을 찾아보다 안되어 글을 남깁니다.
안녕하세요, janghee님.
최신 우커머스 버전인 4.0.0에서 확인해보니 테마 디자인 > 사용자 정의하기 아래에 "우커머스" 탭이 표시되네요.
사용 중인 우커머스 버전이 어떻게 되나요?
선명한 사진을 업로드해도 이미지가 흐리게 나오는 경우 다음 글도 참고해보세요.
https://www.thewordcracker.com/intermediate/%EA%B8%B0%EB%B3%B8-jpg-%EC%95%95%EC%B6%95-%EB%B3%80%EA%B2%BD-%EB%B0%A9%EB%B2%95/
다음 우커머스 문서도 참고해보세요.
https://docs.woocommerce.com/document/fixing-blurry-product-images/
사이트 주소 정보를 삭제하고 싶은데 방법이 있을까요?
댓글을 삭제가 안되네요.
댓글에 나와 있는 사이트 주소를 삭제해드렸습니다.
ftp로 올려도 똑같은현상이 일어나는거 같습니다.
혹시 워드프레스 갤러리에 올릴때 사이즈 리사이징 되지않고 원본으로 그대로 올릴수있는 방법이 있을까요 ?
이미지가 흐리게 나오는 문제에 대하여 다음 우커머스 문서에서 다루고 있네요.
참고해보시기 바랍니다.
https://docs.woocommerce.com/document/fixing-blurry-product-images/
안녕하세요 표시하기 창이 없는데 어떻게 해야하나요?
안녕하세요, 조성우님.
알려주셔서 감사합니다. 우커머스(WooCommerce)가 업데이트되면서 이전 UI와 약간 달라졌습니다.
글을 업데이트했으니 Ctrl + F5를 눌러 글을 새로 고침해보시기 바랍니다.
안녕하세요 정말 도움이 많이 되고있습니다 감사합니다.
궁금한것이 있는대 혹시
https://www.cosmosfarm.com/threads/document/38771
이 링크 질문도 답변이 가능하신가요 ?
버튼을 이미지로 대체하는 것이라면 다음 Stackoverflow 글을 참고해보세요.
https://stackoverflow.com/questions/11380776/replacing-button-with-image
워드프레스에서 CSS 코드를 추가하는 방법은 다음 글에 설명되어 있습니다.
https://www.thewordcracker.com/basic/how-to-add-css-in-wordpress/
알려주셔서 감사합니다.
위에 방법으로 추가가 되지 않습니다.
우커머스가 업데이트되면서 변화가 있는 것 같네요.
방법이 있으면 추후에 글을 업데이트하도록 하겠습니다.
워드님 혹시 제품 썸내일 말고 제품 상세페이지 이미지가 흐릿한거는 어떻게 조정할수있나요 ?
안녕하세요, 조성우님.
다음 글을 참고해보시겠어요?
https://www.thewordcracker.com/intermediate/%EA%B8%B0%EB%B3%B8-jpg-%EC%95%95%EC%B6%95-%EB%B3%80%EA%B2%BD-%EB%B0%A9%EB%B2%95/
문제가 해결되지 않으면 테마 판매자에게 지원을 요청해보는 것도 한 방법 같습니다.
감사합니다.
혹시 이미지 파일을 해상도가 폭 125짜리를 폭 860으로 전체 다 고정하면서 안 깨지게 할 수도 있을까요 ?
폭 125px짜리 이미지를 폭 860px로 늘리면 이미지가 흐려지지 않나요?
네 흐려집니다...안흐려지게 꽉채울 방법이 있을까요 ..
해상도가 높은 이미지를 업로드해야 하지 않을까요?
폭이 작은 이미지를 늘리면 당연히 흐려지거든요.
그리고 앞서 드린 링크 (https://www.thewordcracker.com/intermediate/%EA%B8%B0%EB%B3%B8-jpg-%EC%95%95%EC%B6%95-%EB%B3%80%EA%B2%BD-%EB%B0%A9%EB%B2%95/ )에서 제시된 코드를 테마 함수 파일에 넣으면 이미지를 업로드할 때 화질이 저하되지 않을 것입니다.
이미지를 가져온 사이트는 멀쩡한대 저가 추가하면 흐려져서 ..혹시 방법이 있을까싶었습니다 ㅎㅎ!!
감사합니다 !
가져온 사이트의 이미지 URL로 이미지를 삽입해도 동일한 현상이 발생하나요?
https://www.screencast.com/t/QIVmzelN80
많은 질문죄송합니다.
위 링크랑 화면이 달라서 ..
url로 이미지 첨부하는 방법을 어떻게 해야하는 건가요 ?
감사합니다 해결 된 거같습니다.
해결되었다니 다행이네요. 즐거운 시간 보내시기 바랍니다.
안녕하세요 url 로 이미지를 첨부하니 해당 웹페이지가 없어지면 작동이안되서
우커머스 상품 페이지에 이미지를 넣을때 그냥 꽉차게 설정하는 방법이 있을까요 ??
해당 이미지를 다운로드하여 ftp를 통해 업로드해보시기 바랍니다.
예를 들어, images 폴더를 만들고 images 폴더 아래에 이미지를 업로드할 수 있을 것입니다.
안녕하세요
원본파일은 900x8210 인대
우커머스 상품이미지를 추가하게 되면
281x2560 사이즈로 넘어가지는대 위에 방버처럼 ftp를통해 업로드 하면 되는건가요 ?
테스트를 해보시고 결과를 알려주시겠어요?
저는 현재 우커머스를 운영하고 있지 않아서 곧바로 확인을 해드릴 수 없는 점 양해바랍니다.ㅎ
(테스트 용도로 간혹 설치하여 확인하는 수준입니다. 시간이 날 때 한 번 테스트해보겠습니다.)
즐거운 주말 보내세요.