Trang chủ WordpressWordpress Plugin [Woocommerce] Thay đổi kích thước ảnh sản phẩm

[Woocommerce] Thay đổi kích thước ảnh sản phẩm

bởi Thạch Phạm
22 bình luận 6769 views

Kích thước hình ảnh mặc định của Woocommerce có thể sẽ không giống như ý bạn muốn vì có thể bạn muốn ảnh sản phẩm của mình to hơn hoặc nhỏ hơn. Mặc dù ở bài tìm hiểu thiết lập tổng quan của Woocommerce đã có nói qua về phần thiết lập hình ảnh rồi nhưng có lẽ mình cần viết một bài riêng cho các bạn dễ tìm khi cần, vì thực tế mình đã thấy có rất nhiều bạn mới tìm hiểu cần làm việc này.

Để thiết lập hình ảnh của Woocommerce, bạn truy cập vào phần Woocommerce -> Cài đặt -> Sản phẩm -> Hiển thị và tìm đến mục Hình sản phẩm.

woocommerce-hinh-san-pham-01

Ảnh catalog

Đây là phần thiết lập kích thước ảnh sẽ hiển thị trong trang chi tiết sản phẩm. Mặc định nó sẽ có kích thước là 300×300.

[Woocommerce] Thay đổi kích thước ảnh sản phẩm 197

Ảnh catalog

Ảnh sản phẩm đơn lẻ

Khi vào xem một sản phẩm, ảnh sản phẩm lớn sẽ hiển thị ra bên trái và đó chính là ảnh sản phẩm đơn lẻ.

[Woocommerce] Thay đổi kích thước ảnh sản phẩm 198

Ảnh sản phẩm đơn lẻ

Hình thu nhỏ sản phẩm

Nếu bạn có thiết lập thư viện ảnh sản phẩm thì các ảnh trong thư viện sẽ hiển thị theo hình thu nhỏ phía dưới ảnh đơn lẻ.

[Woocommerce] Thay đổi kích thước ảnh sản phẩm 199

Hình thu nhỏ sản phẩm

Bây giờ mình thử sửa lại giá trị một xíu cho nó khác đi nhé.

woocommerce-hinh-san-pham-02

Và sau khi đổi giá trị kích thước ảnh, có thể ảnh sản phẩm sẽ hiển thị không được đẹp và nét cho lắm, hoặc thậm chí là chưa thấy sự thay đổi.

Để các thay đổi có hiệu lực, chúng ta phải tiến hành tái tạo lại kích thước hình ảnh, nghĩa là cho WordPress tạo lại kích thước hình ảnh theo kích thước mới. Bạn hãy cài plugin Regenerate Thumbnails vào, sau đó truy cập vào Công cụ -> Regen. Thumbnails và click “Regenerate All Thumbnails” để bắt đầu tái tạo.

woocommerce-hinh-san-pham-03

Khi nó chạy xong rồi thì hãy ra ngoài website xem kết quả nhé.

P/S: Nên dùng thêm plugin Image Cleanup để xóa các tập tin theo kích thước ảnh cũ cho đỡ nặng host.

22 bình luận

Có thể bạn quan tâm

0 0 vote
Article Rating
guest
22 Comments
mới nhất
cũ nhất đánh giá nhiều
Inline Feedbacks
View all comments
Hong Nhung

chào anh,
em mới cài Woocommerce phiên bản mới nhưng không thấy tab “Hiển thị” ở đâu hết, bây giờ em muốn chỉnh kích thước ảnh đơn thì có thể vào đâu chỉnh được ạh, cảm ơn anh

Bình

Em cũng thiết lập như trên nhưng sao hình ảnh sản phẩm và hình ảnh thư viện lại bằng nhau vậy anh? Sửa bằng cách nào vậy anh?

Vinh

Hi anh Thạch!
http://remcuachauau.vn/
link trên là mẫu
em muốn làm giống link trên hover vào sản phẩm show lên img size max
nhưng em không biết làm thế nào.
mông anh chỉ giúp em ạ.

Vinh

Hi anh Thạch!
http://remcuachauau.vn/
link trên là mẫu
em muốn làm giống link trên hover vào sản phẩm show lên img size max
nhưng em không biết làm thế nào.
mông anh chỉ giúp em ạ

Vinh

Hi Anh Thạch
Cho em hỏi vê hover View Woocommerce
http://remcuachauau.vn/
link trên là trang mẫu
em muốn làm hover vào sản phẩm thì show lên img size lớn hơn
giống như link web trên nhưng em làm mãi không được
mông anh chỉ giúp em ạ

Hoàng

Em chào anh !
Anh cho em hỏi chút ạ.
E muốn mấy cái hình danh mục sản phẩm to hơn những hình sản phẩm thì làm thế nào ạ.
E cảm ơn

Tuấn

Xin chào anh giúp em trường hợp này với.
Ảnh sản phẩm trên trang con chi tiết thì bình thường nhưng trên danh mục nó phóng to và bị cắt mất và rất xấu.
Xin anh vào xem giúp cách thay đổi với, đã tìm quá trời cách nhưng không được 🙁
ssebsite đang xây dựng logico[.]vn

Hiệp

Bạn cho mình hỏi sau khi nhập cả phần Hàng đơn giản – Giá gốc và giá km thì hiện lên ảnh nó ghi bên góc trái là giảm giá.Vậy liệu có thể thay từ “giảm giá” = giảm 20% được không ? và bằng cách nào. Với lại khi hiển thị hàng hóa vì tiền Việt Nam lên đến trăm nghìn và Triệu nên nó dài để giá gốc và giá khuyến mãi trên 1 dòng nó xấu edit kiểu gì để nó xuống dòng được.

Sơn Trần

Mình muốn thêm nhiều hình ảnh của website thì phài làm sao?!
Bạn vào link này xem giúp mình với: http://trangwebdep.com/du-an-tieu-bieu/

Huỳnh Công Khánh

Bạn vào mục đăng sản phẩm -> kéo đến chỗ thumnail ảnh sản phẩm bên dưới có chỗ add gallery bạn có thể thêm bao nhiêu ảnh sản phẩm cũng được.

caicocxanh2608@gmail.com

ảnh sản phẩm bị mờ quá, mặc dù để đúng kích thước ảnh rồi, cứ như nó zoom lên rồi bị vỡ. có cách nào khăc phục không bạn

nguyễn văn bôn

Thạch Ơi?
Cho mình hỏi xíu thường thì mấy theme khác muốn chỉnh sửa color thì vào css của theme chỉnh sửa sao cái theme này lại ko chỉnh sửa được thạch biết chỉ giúp với?

Khánh

Nút Load Product không hoạt động tại sao vậy anh!

Khang Ngo

Thạch ơi, Cho mình hỏi khi ảnh gốc có nhiều loại kích thước và tỷ lệ khác nhau, thì nếu chọn “hard crop” thì ảnh CATALOG bị mất đầu và chân, còn ko crop thì ảnh Catalog đó khi hiển thị trong Shop lại cao hơn mấy cái khác. Vậy có cách nào hoặc là giữ đồng bộ chiều cao ảnh Catalog khi hiển thị, hoặc là Crop ảnh nhưng chọn vị trí crop từ trên xuống dưới được ko vậy? Mình cũng tìm mãi mà không ra, Thạch giúp mình nha.

Đỗ Trần Quang Phúc

Thạch ơi,
Mình muốn làm cái hiệu ứng srcoll up khi hover vào image của product, cụ thể như trang này https://www.mypage.vn/mau-web/mau-web-gioi-thieu-cong-ty

Mình kiếm mãi mà không ra plugin nào hổ trợ. Thạch tư vấn giúp mình nha.

Tai Bui

Chào bạn

Để làm được như MYPAGE/
Bạn thêm dòng css như thế này là được
img:hover{top:100%;transform:translateY(-100%);-webkit-transform:translateY(-100%);-moz-transform:translateY(-100%);-o-transform:translateY(-100%);-ms-transform:translateY(-100%)}

Thuần

Anh ơi cho em hỏi chút, em muốn xóa bỏ liên kết đến trang chi tiết sản phẩm, nghĩa là chỉ có hình ảnh & giá ở trang catalog product thôi, khách ko thể click vào catalog image để đi đến trang chi tiết của sản phẩm nữa. Thay vào đó em sẽ tạo 1 phần quick view cho sản phẩm đó. Em phải làm như thế nào ạ? Em cảm ơn

abcbody

Thạch ơi,
Mình hỏi cái srcoll khi người ta click vào cụm từ mình chỉ định thì nó sẽ srcoll xuống chỗ bất kỳ mình muốn thì dung plugin gì
http://fujiresidence.vn/du-an-flora-fuji-residence

22
0
Would love your thoughts, please comment.x
()
x