[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 hữu ích cho bạn tùy biến tính năng và giao diện theme một cách linh hoạt. Và hình ảnh đại diện của sản phẩm là một trong số tính năng bạn 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 sản phẩm 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 sản phẩm 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 = '/(?<=href=")([^"]*)/';
    $replacement = get_permalink($post->ID);
    return preg_replace($pattern, $replacement, $link);
}
?>

Filter trên được sử dụng để hiển thị ảnh đại diện trong trang sản phẩm 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 sản phẩm với WooCommerce.
Tham số $link chứa HTML cho ảnh đầu tiên của sản phẩm. Ví dụ:

<a href="http://localhost/wp2/banhang/wp-content/uploads/sites/3/2014/05/costar-royal-jell-1610-mg-11.jpg" itemprop="image" class="woocommerce-main-image zoom" title="costar-royal-jell-1610-mg-1[1]" data-rel="prettyPhoto[product-gallery]"><img width="300" height="300" src="http://localhost/wp2/banhang/wp-content/uploads/sites/3/2014/05/costar-royal-jell-1610-mg-11-300x300.jpg" class="attachment-shop_single wp-post-image" alt="costar-royal-jell-1610-mg-1[1]" title="costar-royal-jell-1610-mg-1[1]" /></a>

Sử dụng regular expression chúng ta có thể sửa thuộc tính 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 các ảnh gallery của sản phẩm, thì bỏ qua đoạn code trên.

Nếu bạn thích bài viết này, hãy ủng hộ chúng tôi bằng cách đăng ký nhận bài viết mới ở bên dưới và đừng quên chia sẻ kiến thức này với bạn bè của bạn nhé. Bạn cũng có thể theo dõi blog này trên Twitter và Facebook