[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.

Để 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ó thể nhận được sự trợ giúp trên Twitter và Facebook