Cách thêm nội dung vào phần mô tả ngắn sản phẩm WooCommerce

Khi thiết kế website bán hàng WordPress với WooCommerce, chúng ta cần cung cấp nhiều thông tin về sản phẩm. Bài viết này, Môi Trường Số chia sẻ cách thêm nội dung tùy chỉnh vào mô tả ngắn của sản phẩm WooCommerce.

Các thành phần trong mô tả ngắn của sản phẩm WooCommerce

Trang sản phẩm WooCommerce chứa rất nhiều thông tin liên quan đến sản phẩm: tiêu đề, giá cả, mô tả… Nhưng đôi khi chúng ta có thể muốn thêm một số thông tin bổ sung cho sản phẩm của mình. Chẳng hạn như thêm nút nhấn liên hệ để khách hàng có thể gọi ngay đến số hotline.

Ví dụ như hình dưới đây, chúng ta cần thêm hai nút nhấn là Chi tiết cây giống và Gọi tư vấn ngay.

Cách thêm nội dung vào phần mô tả ngắn của sản phẩm WooCommerce

Trong ví dụ trên, chúng ta có thể thực hiện bằng nhiều cách:

(1) Thêm đoạn code HTML (và CSS) vào phần mô tả ngắn của mỗi sản phẩm

(2) Thêm đoạn code HTML vào content-single-product.php

(3) Sử dụng hook woocommerce_single_product_summary

Trong 3 cách trên, cách 1 và cách 2 không khuyến khích. Vì cách 1 phải thêm thủ công vào từng sản phẩm, cách 2 can thiệp vào code, khi cập nhật phiên bản mới sẽ bị ảnh hưởng. Do vậy, chúng ta sẽ thực hiện theo cách thứ 3: sử dụng hook woocommerce_single_product_summary

Các bước thực hiện thêm nội dung vào phần mô tả ngắn của sản phẩm

Bước 1: Tạo 1 Block (theme Flatsome là UX Blocks)

Trong Block này, ta thêm Text vào phần thiết kế, sau đó nhập đoạn HTML tùy chỉnh nội dung và lưu lại. Chú ý, block này sẽ được đặt tên id block theo tên của block. Ví dụ id=”contact_button_sanpham”.

Đây là đoạn mã của 2 nút nhấn phía trên:

<div class="contact-detailt">
    <span class="detailt-product">
        <a href="#tab-description">Chi tiết cây giống</a> 
    </span>
    <span class="contact-product">
        <a href="tel:0945256900">Gọi tư vấn ngay</a>
    </span>
</div>

Đoạn CSS trang trí cho 2 thành phần trên (các bạn thêm vào trong file style.css của child-theme)

.contact-product {
    width: 49%;
    background: #2b982b;
    float: right;
    padding: 8px 15px;
    display: inline-block;
    text-align: center;
    border-radius: 5px;
    line-height: 20px;
}
.detailt-product {
    width: 49%;
    background: #00b0e4;
    padding: 8px 10px;
    display: inline-block;
    text-align: center;
    border-radius: 5px;
    line-height: 20px;
    margin-bottom: 10px;
    margin-right: 5px;
}

Bước 2: Vào Giao diện > Theme File Editor > Chọn Functions.php của child-theme

Tiếp theo, thêm đoạn mã sau đây:

add_action( 'woocommerce_single_product_summary', 'add_contact_btn',20 );

function add_contact_btn(){
	echo do_shortcode('[block id="contact_button_sanpham"]');
}

Lưu ý: Tiêu đề và mô tả ngắn trong content-single-product.php có mức độ ưu tiên khác nhau trong khoảng 5 và 20. Do vậy, nếu muốn đặt nội dung ở phía dưới phần mô tả ngắn, chúng ta chọn 20, ngược lại (ở phía trên) chúng ta chọn 5.

Đến đây, các bạn lưu lại và xem thành quả của mình nhé. Chúc các bạn thành công.