Người Viết : ViKiMi Editor
Sử dụng WooCommerce Hooks để tạo tuỳ chỉnh hiển thị cho trang sản phẩm/ single product page
WooCommerce cho phép hiển thị sản phẩm của bất kỳ thiết kế Shop Online. Chúng ta đã biết cách thực hiện tuỳ chỉnh với Product Categories và Product Tags. Điều này cho chúng ta cách hiển thị tốt hơn, Các thiết kế hiển thị cho các nhóm, danh mục sản phẩm đều có thể thực hiện. Vậy chúng ta cũng có thể thực hiện tuỳ chỉnh hiển thị cho một sản phẩm hay không?
Câu trả lời là chúng ta hoàn toàn có thể thực hiện điều này.
Chúng ta sẽ tuỳ chỉnh với WooCommerce Single Product Pages. Thật sự dễ dàng để làm điều này. Chúng ta sẽ thực hiện tuỳ chỉnh sử dụng các Hooks cung cấp bởi WooCommerce.
A ) Thực hiện truy cập vào plugins \ woocommerce \ templates :
Tại file content-single-product.php chúng ta sẽ tuỳ chỉnh để có nội dung hiển thị cho một sản phẩm như mong muốn.
1 ) Nội dung file content-single-product.php như sau
<?php
defined( 'ABSPATH' ) || exit;
global $product;
/**
* Hook: woocommerce_before_single_product.
*
* @hooked woocommerce_output_all_notices - 10
*/
do_action( 'woocommerce_before_single_product' );
if ( post_password_required() ) {
echo get_the_password_form(); // WPCS: XSS ok.
return;
}
?>
<div id="product-<?php the_ID(); ?>" <?php wc_product_class( '', $product ); ?>>
<?php
/**
* Hook: woocommerce_before_single_product_summary.
*
* @hooked woocommerce_show_product_sale_flash - 10
* @hooked woocommerce_show_product_images - 20
*/
do_action( 'woocommerce_before_single_product_summary' );
?>
<div class="summary entry-summary">
<?php
/**
* Hook: woocommerce_single_product_summary.
*
* @hooked woocommerce_template_single_title - 5
* @hooked woocommerce_template_single_rating - 10
* @hooked woocommerce_template_single_price - 10
* @hooked woocommerce_template_single_excerpt - 20
* @hooked woocommerce_template_single_add_to_cart - 30
* @hooked woocommerce_template_single_meta - 40
* @hooked woocommerce_template_single_sharing - 50
* @hooked WC_Structured_Data::generate_product_data() - 60
*/
do_action( 'woocommerce_single_product_summary' );
?>
</div>
<?php
/**
* Hook: woocommerce_after_single_product_summary.
*
* @hooked woocommerce_output_product_data_tabs - 10
* @hooked woocommerce_upsell_display - 15
* @hooked woocommerce_output_related_products - 20
*/
do_action( 'woocommerce_after_single_product_summary' );
?>
</div>
<?php do_action( 'woocommerce_after_single_product' ); ?>
Chúng ta thấy đây là toàn bộ nội dung mã lập trình để hiển thị trang sản phẩm của WooCommerce. Chúng ta có thể sử dụng cách mặc định như vậy để hiển thị trang sản phẩm cũng hoàn toàn được. Nhưng nếu phát sinh rằng liệu có thể hiển thị sản phẩm bằng cách thực hiện các tuỳ chỉnh hay không?
Phát sinh này hoàn toàn có thể thực hiện được.
Chúng ta sẽ thực hiện các tuỳ chỉnh sử dụng Hooks.
2 ) Ở phía trên chúng ta sẽ chỉ quan tâm tới phần Code có màu đỏ. Đó là đoạn code này :
<div class="summary entry-summary">
<?php
/**
* Hook: woocommerce_single_product_summary.
*
* @hooked woocommerce_template_single_title - 5
* @hooked woocommerce_template_single_rating - 10
* @hooked woocommerce_template_single_price - 10
* @hooked woocommerce_template_single_excerpt - 20
* @hooked woocommerce_template_single_add_to_cart - 30
* @hooked woocommerce_template_single_meta - 40
* @hooked woocommerce_template_single_sharing - 50
* @hooked WC_Structured_Data::generate_product_data() - 60
*/
do_action( 'woocommerce_single_product_summary' );
?>
</div>
Chúng ta thấy Hook được sử dụng là ‘woocommerce_single_product_summary’ & chúng ta sẽ thực hiện tuỳ chỉnh sử dụng Hook này để tạo ra cách hiển thị mới hơn.
2.1 Cách sử dụng Hook này :
add_action( ‘woocommerce_single_product_summary’, string $callback_function , int $priority = 10);
+ $callback_function (Yêu cầu): Tên của Callback Function
+ $priority (Tuỳ chọn): Chỉ định thứ tự ưu tiên thực hiện chức năng liên quan đến hành động thực thi. Mặc định là 10.
2.2 Hook này được thực thi khi nào :
+ Hook này thực thi sau: woocommerce_after_single_product_summary hook.
+ Hook này thực thi trước: woocommerce_before_single_product_summary hook.
2.3 Hook này thực thi các chức năng mặc định như sau :
WooCommerce sẽ sử dụng Hook này thực thi các chức năng & thứ tự ưu tiên sau đây :
‘woocommerce_template_single_title’, 5
‘woocommerce_template_single_rating’, 10
‘woocommerce_template_single_price’, 10
‘woocommerce_template_single_excerpt’, 20
‘woocommerce_template_single_add_to_cart’, 30
‘woocommerce_template_single_meta’, 40
‘woocommerce_template_single_sharing’, 50
‘WC_Structured_Data::generate_product_data’, 60
2.4 Thực hiện tuỳ chỉnh sử dụng Hook này :
Lý Thuyết ]
+ Nếu chúng ta không muốn cách thực thi chức năng mặc định ban đầu. Chúng ta có thể Remove chức năng đó đi và sau đó thêm mới chức năng thiết kế.
Example :
// remove the action
remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_title', 5);
// add a custom action
add_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_title_custom', 5);
+ Chúng ta cũng có thể thêm mới một chức năng bằng cách sử dụng add_action(). Và chức năng này sẽ đặt tại function.php của Theme kích hoạt.
// Định nghĩa callback function của bạn
function my_custom_function_name ( $optional_values ) {
// enter your code here...
};
// Thêm chức năng này vào hook
add_action( 'woocommerce_single_product_summary', 'my_custom_function_name', 10);
Example ] VÍ DỤ CỤ THỂ >> Thực hiện cập nhật hiển thị cho trang thông tin sản phẩm.
Chúng ta làm công việc như sau :
+ Tạo hiển thị nhấn mạnh cho tất cả các sản phẩm thuộc Tag “Best Sale”.
+ Chúng ta sẽ thêm đoạn code sau vào function.php để thêm chức năng mới vào Hook ‘woocommerce_single_product_summary’. Chức năng này sẽ tạo nổi bật cho các sản phẩm “Best Sale”, chức năng này có thứ tự ưu tiên là 15, và nó nằm trong số các chức năng được thêm vào Hook ‘woocommerce_single_product_summary’.
// Thứ tự ưu tiên là 15 cho chức năng, Nó thực thi sau chức năng hiển thị giá
add_action( ‘woocommerce_single_product_summary’, ‘set_up_update_of_product_summary’, 15 );
function set_up_update_of_product_summary (){
$slug_str = ‘best-sale’;
$best_sale_html = ‘<span class=”editor-product”><img width=”40″ src=”best-sale.jpg”>Best Choice (30% Off)‘;
// Get product tags
$product_tags_array = get_terms( ‘product_tag’ );
if ( !empty( $product_tags_array ) && !is_wp_error( $product_tags_array ) ) :
foreach ( $product_tags_array as $tag_obj ) :
if ($tag_obj->slug == $slug_str) :
echo $best_sale_html;
endif;
endforeach;
endif;
}
Hình Ảnh : Trước khi thực hiện tuỳ chỉnh hiển thị sản phẩm
Hình Ảnh : Sau khi thực hiện tuỳ chỉnh hiển thị sản phẩm
Như vậy, chúng ta đã tạo một chức năng tuỳ chỉnh sử dụng Hook ‘woocommerce_single_product_summary’ cung cấp bởi WooCommerce. Thật đơn giản khi thực hiện tuỳ chỉnh như vậy. Đây là cách được sử dụng thông thường nhất để có các tuỳ chỉnh dành cho hiển thị của WooCommerce.
Tương tự nếu bạn muốn sử dụng các tuỳ chỉnh khác tương tự với WooCommerce.
