Chưa có sản phẩm trong giỏ hàng.
Website
Code thu gọn nội dung mô tả sản phẩm trong wordpress
Bài viết này sẽ giúp website WordPress của cả nhà hiển thị phần nội dung bộc lộ khía cạnh sản phẩm Woocommerce trông gọn ghẽ hơn, tối ưu ko gian hiển thị trên mobile.
Khi nội dung của bạn quá dài thì việc hiển thị tất cả nội dung biểu lộ đôi tự nhiên thực thụ thiết yếu. chẳng hạn trong 1 số lĩnh vực đặc biệt như đồ gỗ nội thất, khách hàng chỉ cần xem ảnh, giá sản phẩm và 1 số thông tin cơ bản là đủ để họ đưa ra quyết định liên hệ hoặc đặt hàng.
Ý tưởng ở đây là chúng ta sẽ chỉ cho hiển thị 1 phần nội dung và bên dưới có nút xem thêm. Nếu người mua đích thực muốn xem, họ sẽ phải click vào nút xem thêm, khi đó toàn bộ nội dung sẽ hiện ra.
Việc biểu đạt như vậy giúp website trông gọn ghẽ hơn và kích thích người tiêu dùng tạo ra một hành động tương tác với trang web – đó là click xem thêm.
Code rút gọn nội dung thể hiện khía cạnh sản phẩm Woocommerce
Trước khi sửa code, các bạn cần đọc kỹ để ý này:
- Code chỉ làm việc với kiểu hiển thị nội dung mô tả sản phẩm chi tiết dưới dạng Tabs (là kiểu hiển thị mặc định của Woocommerce). Trên một số theme (ví dụ Flatsome) có tùy chọn hiển thị Product Tabs theo nhiều kiểu khác (chẳng hạn Sections hoặc Accordion) thì code này sẽ không hoạt động.
- Copy chính xác code bên dưới và paste vào file
functions.phptrong thư mục theme của bạn. - Nên dùng child theme để cập nhật main theme thoải mái mà không sợ bị lỗi.
Code:
/*
* Code rút gọn nội dung mô tả chi tiết sản phẩm Woocommerce
*/
function dvp_readmore_button_woo($content){
if (is_product()){
$content .= '<div class="dvp_readmore_woo"><span title="Xem thêm">Xem thêm</span></div>';
}
return $content;
}
add_filter( 'the_content', 'dvp_readmore_button_woo', 100 );
add_action('wp_footer','dvp_readmore_woocommerce');
function dvp_readmore_woocommerce(){
if (is_product()){
?>
<style>
.single-product div#tab-description {
overflow: hidden;
position: relative;
max-height: 600px;
}
.dvp_readmore_woo {
text-align: center;
cursor: pointer;
position: absolute;
z-index: 9999;
bottom: 0;
width: 100%;
background: #fff;
}
.dvp_readmore_woo:before {
height: 55px;
margin-top: -45px;
content: "";
background: -moz-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%);
background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%);
background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff00', endColorstr='#ffffff', GradientType=0);
display: block;
}
.dvp_readmore_woo span {
color: #6c6d70;
display: block;
border: 1px solid;
margin-left: auto;
display: flex;
width: 130px;
margin-right: auto;
text-transform: uppercase;
text-align: center;
justify-content: center;
}
</style>
<script>
let xemThemButtonMore = document.querySelector(".dvp_readmore_woo");
let xemThemNoiDung = document.getElementById("tab-description");
const divInnerContentHeight = document.querySelector('.woocommerce-Tabs-panel--description').scrollHeight;
let your_height = 599;
if (divInnerContentHeight > your_height) {
xemThemButtonMore.addEventListener("click", () => {
xemThemNoiDung.style.maxHeight = "none";
xemThemButtonMore.style.display = "none";
})
} else {
xemThemNoiDung.style.maxHeight = "none";
xemThemButtonMore.style.display = "none";
};
</script>
<?php
}
}Có một số đoạn các bạn có thể tùy chỉnh theo ý mình nhé:
Dòng 21, đoạn max-height: 600px là kích thước phần nội dung được hiển thị tính từ trên xuống. Bạn có thể sửa 600px thành một con số khác.
Dòng 62, đoạn let your_height = 599 là kích thước chiều dài nội dung dùng để so sánh. Nếu nội dung mô tả sản phẩm Woocommerce của bạn dài hơn con số này thì phần nội dung thừa ra sẽ bị ẩn đi và thay bằng nút Xem thêm. Bạn chỉnh con số này nhỏ hơn 1px so với dòng 21 ở trên.
Bạn nào làm chưa được có thể để lại bình luận dưới website mình sẽ hỗ trợ nhé.
Leave feedback about this