Tùy biến Product thumbnail – thay đổi ảnh đại diện của sản phẩm trong woocommerce

Quảng cáo
Ads_ngang
Website dinhthuanit.com có bài Tùy biến Product thumbnail – thay đổi ảnh đại diện của sản phẩm trong woocommerce

Trong bài học trước mình có trình bày các cách tùy biến nội dung với woocommerce và bạn có thể đã nắm được nguyên tắc tùy biến custom woocommerce template. Và trong bài bữa nay chúng ta áp dụng sử dụng một trong số phương thức đó để làm một bài tập nhỏ đó là tạo liên kết đến trang mặt hàng chi tiết, vào hình ảnh đại diện của sản phẩm.

Tạo product thumbnail woocommerce

Hiển thị ảnh đại diện của mặt hàng bởi hàm woocommerce_get_product_thumbnail . Hàm này được gọi trực tiếp trong hàm woocommerce_template_loop_product_thumbnail .
Chúng ta có thể sửa cả 2 hàm này hoặc chỉ cần woocommerce_get_product_thumbnail. Override hàm này trong theme functions.php

 if ( ! function_exists( 'woocommerce_get_product_thumbnail' ) ) { function woocommerce_get_product_thumbnail( $size = 'shop_catalog', $placeholder_width = 0, $placeholder_height = 0 ) { global $post, $woocommerce; if ( ! $placeholder_width ) $placeholder_width = $woocommerce-> get_image_size( 'shop_catalog_image_width' ); if ( ! $placeholder_height ) $placeholder_height = $woocommerce-> get_image_size( 'shop_catalog_image_height' ); $output = ' 
'; if ( has_post_thumbnail() ) { $output.=''; $output .= get_the_post_thumbnail( $post-> ID, $size ); $output.=''; } else { $output .= ''; } $output .= '
'; return $output; } }

Chép thêm đoạn tạo hình ảnh cho từng mặt hàng trong vòng lặp nếu cần sửa thêm.

 if(function_exists('woocommerce_template_loop_product_thumbnail')): function woocommerce_template_loop_product_thumbnail(){ echo '  '; echo woocommerce_get_product_thumbnail(); echo '  '; } endif;  

Product Placeholder image

Nếu mặt hàng không có post thumbnail thì hiển thị ảnh mặc định (placeholder) thay thế ảnh đại diện chưa thiết lập cho sản phẩm. Sử dụng hàm woocommerce_placeholder_img_src() trả về URL tới ảnh thumbnail mặc định của woocommerce, để đổi ảnh khác bạn thêm các dòng sau vào functions.php

 add_filter('woocommerce_placeholder_img_src', 'custom_woocommerce_placeholder_img_src'); function custom_woocommerce_placeholder_img_src( $src ) { $upload_dir = wp_upload_dir(); $uploads = untrailingslashit( $upload_dir['baseurl'] ); $src = $uploads . '/2012/07/thumb1.jpg'; return $src; }  

Kích thước ảnh thumbnail

Các kích thước quy định của woocommerce cho những ảnh sản phẩm trong catelog, ảnh với kích cỡ lớn hơn ở trang sản phẩm chi tiết…tương ứng với tên kích thước được thiết lập bởi hàm add_image_size trong plugin woocommerce. Xem thêm bài thay đổi kích thước featured image hay post thumbnail trong wordpress.

Bạn có thể xem những kích cỡ ảnh, với phương thức get_image_size của đối tượng global $woocommerce . Ví dụ sau trả về kích thước width,height của ảnh mặt hàng hiển thị trong catelog.

 global $woocommerce; $placeholder_width = $woocommerce-> get_image_size( 'shop_catalog_image_width' ); $placeholder_height = $woocommerce-> get_image_size( 'shop_catalog_image_height' );  

Hoặc kích cỡ ‘shop_catalog’ trả về mảng chứa tin tức “width”, “height”, “crop”.

 $woocommerce-> get_image_size('shop_catalog'); /* Return default: Array ( [width] =>  300 [height] =>  300 [crop] =>  1 ) */  

Tham khảo một số kích thước ảnh trong woocommerce.

  • “shop_thumbnail”: Array ( [width] => 90 [height] => 90 [crop] => 1 )
  • “shop_catalog”: Array ( [width] => 300 [height] => 300 [crop] => 1 )
  • “shop_single”: Array ( [width] => 300 [height] => 300 [crop] => 1 )

Thay đổi các kích thước ảnh của mặt hàng trong phần quản trị WooCommerce-> Settings -> tab Products -> Product Image Sizes.
product-image-size-woocommerce
Sửa đổi và nhấn Save Changes để lưu lại. Những ảnh tạo trước kia vẫn giữ kích thước cũ, nếu muốn đổi lại toàn bộ kích cỡ ảnh thì dùng plugin regenerate thumbnails.

Để nhận được bài viết mới vui lòng đăng ký kênh kiến thức WordPress từ A-Z ở Form bên dưới. Bạn cũng cũng có thể có thể thu được sự trợ giúp trên Twitter và Facebook

Bài viết Tùy biến Product thumbnail – thay đổi ảnh đại diện của sản phẩm trong woocommerce được tổng hợp và biên tập bởi: dinhthuanit.com. Mọi ý kiến đóng góp và phản hồi vui lòng gửi Liên Hệ cho dinhthuanit.com để điều chỉnh. dinhthuanit.com xin cảm ơn.

Bài Viết Liên Quan


Bài Viết Khác


Quảng cáo
Ads_ngang