Người Viết : ViKiMi Editor

Tuỳ chỉnh Tiêu Đề Sản Phẩm (Single Product Tilte) tại trang sản phẩm của WooCommerce
Thực hiện Customize hiển thị tiêu đề sản phẩm tại trang sản phẩm (Single Product Page) được WooCommerce cho phép. Điều này giúp một Website buôn bán Online có thể có thiết kế nhấn mạnh một cách chuyên nghiệp các sản phẩm muốn buôn bán. Các thiết kế mang tính chuyên nghiệp thay vì cung cấp mặc định ban đầu rất khô cứng mà hệ thống thương mại điện tử WooCommerce đem lại.
Vậy làm việc này có tốt không? Đây là thắc mắc của nhiều người. Chắc chắn nó sẽ đem lại lợi ích nhiều hơn so với mặc định ban đầu.
Cũng dễ dàng thực hiện điều này bằng cách sử dụng những dòng Coding rất đơn giản. Có nhiều cách thuận lợi dễ dàng cho bất kỳ Nhà Phát Triển nào. Chúng ta chỉ cần thực hiện đúng như những gì WooCommerce cho phép.
Chúng ta có trang hiển thị sản phẩm được thiết kế tại File :
plugins\ woocommerce\ templates\ content-single-product.php
+ Tại đây chúng ta cần chú ý đoạn code sau :
<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>
Không khó để nhận ra Hook sử dụng :
– woocommerce_single_product_summary
& Chức năng được thực hiện là :
– woocommerce_template_single_title & Mức ưu tiên là 5
Vậy chúng ta có thể có những Cách nào để tuỳ chỉnh Tiêu đề Sản Phẩm tại trang Sản Phẩm. Chúng có 2 cách cơ bản để thực hiện công việc này. Đây là 2 cách mà chúng ta có thể thực hiện tại thư mục Theme kích hoạt (Bao gồm cả Child Theme)
CÁCH 1 : Thực hiện Customize tiêu đề sản phẩm bằng cách sử dụng Hook được cung cấp bởi WooCommerce.
Chúng ta sẽ xoá Chức năng mặc định đã thêm vào Hook & thực hiện thêm mới chức năng tuỳ chỉnh của chúng ta.
Chức năng mới : Thực hiện hiển thị Tiêu đề Sản Phẩm + Tên Người bán + Email người bán.
Tại Function.php thực hiện đoạn thêm đoạn mã sau :
remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_title', 5 );
add_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_title_custom', 5);
function woocommerce_template_single_title_custom()
{
global $product;
$product_id = $product->get_id();
the_title( '<h3 class="product_title entry-title">',' </h3>' );
echo 'Seller : ' .get_the_author($product->post->post_author);
echo 'Email : ' .get_the_author_meta( 'user_email', $product_id );
}
Hình Ảnh Kết Quả :

CÁCH 2 : Thực hiện Ghi đè File thiết kế hiển thị Tiêu Đề sản phẩm.
File mặc định hiển thị tiêu đề Sản Phẩm là :
wp-content /plugins /woocommerce /templates /single-product /title.php
Chúng ta có thể ghi đè File này bằng cách : Ghi đè tại Folder WooCommerce của Theme đang kích hoạt.
+ Chúng ta cần tạo File : Yourtheme / woocommerce / single-product / title.php , để ghi đè mẫu mặc định của WooCommerce.
Việc thực hiện ghi đè các Template của WooCommerce (Hãy tham khảo tại đây)
Nội dung Code của tilte.php như sau :
<?php
/**
* Single Product title
*
* This template can be overridden by copying it to yourtheme/woocommerce/single-product/title.php.
*
* HOWEVER, on occasion WooCommerce will need to update template files and you
* (the theme developer) will need to copy the new files to your theme to
* maintain compatibility. We try to do this as little as possible, but it does
* happen. When this occurs the version of the template file will be bumped and
* the readme will list any important changes.
*
* @see https://docs.woocommerce.com/document/template-structure/
* @package WooCommerce\Templates
* @version 1.6.4
*/
if ( ! defined( 'ABSPATH' ) ) {
exit; // Exit if accessed directly.
}
global $product; /* Khai báo này chỉ sử dụng khi cần, hiện tại chưa dùng */
the_title( '<h3 class="product_title entry-title">', '</h3>' );
?>
<b><span class="book-author"> Product Seller :<?php echo get_the_author();?>
</span></b>
Như vậy, chúng ta đã có thể tuỳ chỉnh hiển thị Tiêu Đề Sản Phẩm tại Trang Sản Phẩm (Single Product Page) của WooCommerce. Cả 2 cách trên đều mang lại hiệu quả cho Shop Online nhằm tạo thu hút khách hàng và mang lại khách hàng tiềm năng có thể mua sản phẩm. Tạo ra giao diện sản phẩm thân thiện hơn với khách hàng thương mại điện tử.
+ Cách Customize thông tin Tiêu Đề Sản Phẩm của WooCommerce thật dễ dàng thực hiện và nếu bạn muốn tạo điểm nhấn cho thông tin sản phẩm bạn đưa đến khách hàng thì đây là một cách sử dụng khá ấn tương.
+ Nếu bạn muốn thiết kế một Website thương mại điện tử với WooCommerce thì việc bạn phải tạo các tuỳ chỉnh bằng cách sử dụng Hook là điều gần như bắt buộc. Đồng thời bạn ghi đè các Template của WooCommerce cũng là một phương án hiệu quả khác.
+ Với việc tuỳ chỉnh trang hiển thị sản phẩm ( content-single-product.php ) thì bạn luôn cần xem tại File này có thể chỉnh sửa bằng cách sử dụng các Hook nào hoặc có thể ghi đè các Template nào. Chỉ cần tuân thủ những gì WooCommerce cung cấp cho bạn.