Người Viết : ViKiMi Editor

Thực hiện tuỳ chỉnh mô tả ngắn của sản phẩm WooCommerce/ customize short description
Bạn từng thấy một vài Website buôn bán có giao diện hiển thị rất tốt. Website đó được chăm chút từng chi tiết nhỏ và nó hiệu quả không tin được. Sự thành công nhờ việc chăm sóc cho Website đến từng chi tiết nhỏ nhất & các chức năng nhỏ nhất nhằm đem lại sự tiện ích khi sử dụng. Hoặc các chi tiết tuỳ chỉnh nhỏ nhất khiến cho mọi chú ý đều đến với các thiết kế được đặt trọng tâm. Nhờ vậy Website luôn có một thị tường hướng tới khi hoàn thiện chức năng giao diện thiết kế.
Một Website buôn bán Online cũng vậy. Nó cần được chăm chút từ tất cả các chi tiết, yêu cầu hiển thị Chi tiết mô tả ngắn của Sản Phẩm luôn được quan tâm, vì nó là thứ mà khách hàng sẽ nhận biết đầu tiên. Sự nhận biết đầu tiên có hoàn hảo thì mới đem lại cơ hội giao dịch được thành công. Không có một Website buôn bán nào mà không chú ý tới việc hiển thị mô tả ngắn thành công.
Khi tuỳ chỉnh hiển thị mô tả ngắn của sản phẩm / Single Product Short Description, chúng ta đem lại sự hài lòng về khả năng nhận biết và lựa chọn sản phẩm cho khách hàng. Điều này thật quan trọng.
+ Khách hàng biết họ tìm gì từ sản phẩm quan tâm
+ Khách hàng có thể nắm rõ những thứ tóm gọn của Sản Phẩm
+ Khách hàng tiếp cận Sản Phẩm nhanh chóng nhờ giao diện thân thiện
+ Tiết kiệm thời gian mua sắm và ra quyết định mua sản phẩm
Tuỳ chỉnh là cách dễ dàng + thuận tiện khi bạn muốn có hiển thị Mô tả ngắn của Sản Phẩm hiệu quả & tăng khả năng mua sản phẩm.
Nội dung dưới đây sẽ giúp bạn thực hiện tuỳ chỉnh thông tin mô tả ngắn của Sản Phẩm / Single Product Short Description :
Chúng ta có trang hiển thị sản phẩm được thiết kế tại File :
wp-content\ 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_excerpt & Mức ưu tiên là 20
Vậy chúng ta có thể có những Cách nào để tuỳ chỉnh Mô tả Ngắn của Sản Phẩm / Single Product Short Description 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 Mô Tả Ngắn của Sản Phẩm/ Single Product Short Description 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 : Tuỳ chỉnh giao diện hiển thị Mô tả ngắn của sản phẩm thuận tiện cho khách hàng.
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_excerpt', 20 ); add_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_excerpt_custom', 20); function woocommerce_template_single_excerpt_custom() { global $product; echo "<div class=\"woocommerce-loop-product-description\" style=\"margin-top: 18px;padding-top: 9px;border-top: 3px #d1c5c5 solid;border-top-left-radius: 2px;border-top-right-radius: 2px;\">"; echo apply_filters( 'woocommerce_short_description', '<strong>Let\'s Go. </strong>'. $product->get_short_description() ); echo "<img src=\"Like-product.jpg\">"; echo "</div>"; }
Hình Ảnh Kết Quả :

CÁCH 2 : Thực hiện Ghi đè File thiết kế hiển thị Single Product Short Description.
File mặc định của WooCommerce là :
wp-content/ plugins /woocommerce /templates /single-product /short-description.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 Tạo File : Yourtheme / woocommerce / single-product / short-description.php
Nếu bạn muốn biết các thông tin chi tiết 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 short-description.php như sau :
<?php
if ( ! defined( 'ABSPATH' ) ) {
exit; // Exit if accessed directly.
}
global $product;
$short_description = apply_filters( 'woocommerce_short_description', $product->get_short_description() );
if ( ! $short_description ) {
return;
}
?>
<div class="woocommerce-loop-product-description" style="margin-top: 18px;padding-top: 9px;border-top: 3px #d1c5c5 solid;border-top-left-radius: 2px;border-top-right-radius: 2px;">
<?php echo apply_filters( 'woocommerce_short_description', '<strong>Let\'s Go. </strong>'. $short_description ); ?>
<img src="Like-product.jpg">
</div>
+ Kết quả công việc chúng ta tạo ra cũng tương tự như trên.
+ Như vậy, Chúng ta đã có thể có 2 cách dễ dàng để tuỳ chỉnh thông tin Single Product Short Description
Cách Customize thông tin Single Product Short Description (Mô tả ngắn của Sản Phẩm) của WooCommerce thật dễ dàng thực hiện. Cách tuỳ chỉnh cho phép chúng ta tạo một cách hiển thị ấn tượng hơn và giúp Khách hàng có thể dễ tiếp cận sản phẩm cũng như mua sản phẩm. Khi thực hiện Customize thông tin Single Product Short Description chúng ta có giao diện không còn đơn điệu như mặc định.
+ 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 tốt có thể thực hiện đượ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.
+ Tuỳ chỉnh Mô tả ngắn của Sản Phẩm tạo ra giao diện bắt mắt hơn. Bạn có nhiều cơ hội hiện thị những thiết kế tốt cho sản phẩm bằng cách tuỳ chỉnh bởi các kiểu font chữ đặc biệt tạo nhấn mạnh cho sản phẩm ( VD : font awesome ). Các thiết kế khiến cho Khách hàng chú ý và chọn một Sản Phẩm.