[WooCommerce] – Sửa liên kết ảnh đại diện cho trang sản phẩm chi tiết

Quảng cáo
Ads_ngang
Website dinhthuanit.com có bài [WooCommerce] – Sửa liên kết ảnh đại diện cho trang sản phẩm chi tiết

Hi! mọi người trong bài hôm này mình lại tiếp tục hướng dẫn sử dụng plugin woocommerce. WooCommerce có hàng trăm API có ích cho bạn tùy biến tính năng và giao diện theme 1 cách linh hoạt. Và hình ảnh đại diện của sản phẩm là một trong các tính năng bạn cũng có thể có thể can thiệp.

Như mặc định mỗi ảnh đại diện hay ảnh ban đầu của bài viết được liên kết tới Attachment URL. Người dùng mắc cỡ khi nhấn vào ảnh , trình duyệt nhảy đến ảnh với kích thước gốc. Bạn có thể thay đổi link và thẻ img của ảnh trong trang mặt hàng chi tiết bằng cách sử dụng hook woocommerce_single_product_image_html .
Ví dụ sau mình sẽ đổi liên kết img cho ảnh đại diện trong page mặt hàng chi tiết tới link của sản phẩm đó tức URL hiện tại.

  <?php add_filter('woocommerce_single_product_image_html', 'custom_links', 10, 2); function custom_links($link, $post_id) { $pattern = '/(?  ID); return preg_replace($pattern, $replacement, $link); } ?>   

Filter trên được dùng để làm hiển thị ảnh đại diện trong trang mặt hàng chi tiết, bạn có thể tìm thấy trong template single-product/product-image.php . Xem cách vận dụng hook woocommerce_single_product_image_html trong bài: Thêm tính năng cloud zoom ảnh cho gallery mặt hàng với WooCommerce.
Tham số $link chứa HTML cho ảnh trước mắt của sản phẩm. Ví dụ:

   

Sử dụng regular expression chúng ta cũng có thể có thể sửa tính chất href của thẻ A tạo liên kết như trên.
Nếu bạn tạo tính năng cloudzoom với những ảnh gallery của sản phẩm, thì bỏ qua đoạn code trên.

Bài viết [WooCommerce] – Sửa liên kết ảnh đại diện cho trang sản phẩm chi tiết đượ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