Người Viết : ViKiMi Editor

Tuỳ chỉnh Dữ Liệu Meta của sản phẩm / Product Meta đem lại thành công giao diện mua bán
Bạn muốn hiển thị dữ liệu Meta của sản phẩm tốt hơn, chắc chắn bạn không tốn thời gian vì WooCommerce luôn cho phép bạn thực hiện một cách dễ dàng. Tuỳ chỉnh Single Product Meta giúp bạn có một cách hiển thị thông tin: Mã Sản Phẩm, Danh Mục, Nhóm Sản phẩm… một cách hữu hiệu. Công việc này không hề khó và cũng đơn giản.
Việc thực hiện tuỳ chỉnh Single Product Meta thật sự cũng tương tự các tuỳ chỉnh khác. Nhưng hiệu quả đem lại khiến cho chúng ta thấy khá là thú vị khi làm việc với WooCommerce, chúng ta có một giao diện đúng phong cách so với thị hiếu hiện tại.
+ Chúng ta sẽ có một phong cách khác so với các Website khác
+ Chúng ta có cách hiển thị dữ liệu Meta của Sản phẩm tốt hơn
+ Giúp Website có thiết kế tốt hơn nhờ tuỳ chỉnh
+ Giúp khách hàng có thể dễ dàng chọn được sản phẩm ưng ý nhờ dễ dàng tìm được thông tin cần thiết. Tăng giao dịch mua bán.
Tuỳ chỉnh là cách dễ dàng + thuận tiện khi bạn muốn có hiển thị Single Product Meta của Sản Phẩm đẹp mắt & giúp khách hang lựa chọn mặt hàng.
Nội dung dưới đây sẽ giúp bạn thực hiện tuỳ chỉnh thông tin Single Product Meta:
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_meta & Mức ưu tiên là 40
Vậy chúng ta có thể có những Cách nào để tuỳ chỉnh Single Product Meta 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 thông tin Product Meta 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ị giao diện được thiết kế mới, 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_meta', 40 ); add_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_meta_custom', 40); function woocommerce_template_single_meta_custom() { if ( ! defined( 'ABSPATH' ) ) { exit; } global $product; echo "<div class=\"product_meta\">"; do_action( 'woocommerce_product_meta_start' ); if ( wc_product_sku_enabled() && ( $product->get_sku() || $product->is_type( 'variable' ) ) ) { echo "<p><span class=\"sku_wrapper\">". esc_html_e( '+ Mã SP:', 'woocommerce' ) . "<span class=\"sku\">". ( $sku = $product->get_sku() ) ? $sku : esc_html__( 'N/A', 'woocommerce' ) ."</span></span></p>"; } echo "<p>". wc_get_product_category_list( $product->get_id(), ', ', '<span class="posted_in">' . _n( '+ Danh Mục:', 'Các Danh Mục :', count( $product->get_category_ids() ), 'woocommerce' ) . ' ', '</span>' ) ."</p>"; echo "<p>". wc_get_product_tag_list( $product->get_id(), ', ', '<span class="tagged_as">' . _n( '+ Nhóm SP:', 'Các Nhóm SP:', count( $product->get_tag_ids() ), 'woocommerce' ) . ' ', '</span>' ) ."</p>"; do_action( 'woocommerce_product_meta_end' ); 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 Meta.
File mặc định của WooCommerce là :
wp-content/ plugins /woocommerce /templates /single-product /meta.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 / meta.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 meta.php như sau :
<?php
/**
* Single Product Meta
*
* This template can be overridden by copying it to yourtheme/woocommerce/single-product/meta.php.
**/
if ( ! defined( 'ABSPATH' ) ) {
exit;
}
global $product;
?>
<div class="product_meta">
<?php do_action( 'woocommerce_product_meta_start' ); ?>
<?php if ( wc_product_sku_enabled() && ( $product->get_sku() || $product->is_type( 'variable' ) ) ) : ?>
<p> <span class="sku_wrapper"><?php esc_html_e( '+ Mã SP:', 'woocommerce' ); ?> <span class="sku"><?php echo ( $sku = $product->get_sku() ) ? $sku : esc_html__( 'N/A', 'woocommerce' ); ?></span></span> </p>
<?php endif; ?>
<p> <?php echo wc_get_product_category_list( $product->get_id(), ', ', '<span class="posted_in">' . _n( '+ Categorie:', 'Categories:', count( $product->get_category_ids() ), 'woocommerce' ) . ' ', '</span>' ); ?> </p>
<p> <?php echo wc_get_product_tag_list( $product->get_id(), ', ', '<span class="tagged_as">' . _n( '+ Tag:', 'Tags:', count( $product->get_tag_ids() ), 'woocommerce' ) . ' ', '</span>' ); ?> </p>
<?php do_action( 'woocommerce_product_meta_end' ); ?>
</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 Meta
Cách Customize thông tin Single Product Meta của WooCommerce thật dễ dàng thực hiện. Chúng ta sẽ có một cách hiển thị mới tốt hơn cho Sản Phẩm trên Shop Online, với cách hiển thị hiệu quả sẽ tăng khả năng mua sản phẩm và buộc lòng khách hàng phải dừng chân lại xem SP họ đang tìm kiếm.
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 Single Product Meta luôn mang lại cách nhìn tốt hơn sơ với mặc định ban đầu của WooCommerce.
Mẹo : Nếu bạn muốn thực hiện di chuyển vị trí hiển thị của Single Product Meta trên Trang Sản Phẩm, bạn có thể thực hiện đoạn Code sau tại Function.php, Đoạn Code giúp bạn đặt Product Meta tại những nơi bạn muốn dựa vào thứ tự ưu tiên
remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_meta', 40);
add_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_meta', 15);
Như vậy, bạn sẽ có thể đặt Single Product Meta tại những vị trí bạn muốn tại Trang Sản Phẩm. Nhằm tạo bố cục chung cho hiển thị được tốt nhất. Nếu bạn muốn di chuyển các vị trí khác nhau với các thành phần khác nhau thì điều đó vẫn cho phép.