Tác giả: https://www.facebook.com/tungducxd
Mình gà công nghệ nhưng có web trên wordpress được vài năm và cũng có 1 chút kinh nghiệm về tối ưu web của mình, ae nào newbie có thể tham khảo cách tối ưu nhé.
Thêm dòng này trong mục Style.ss được sử dụng để thiết lập kiểu font chữ cho toàn bộ trang web, theo mình tìm hiểu thì sau khi khách hàng duyệt web, thì trang web của bạn sẽ thông qua Gg để tìm font và sau đó hiển thị trên website, việc thiết lập font cho theme sẽ giúp của bạn cải thiện được tốc độ.
body{font-family: -apple-system, system-UI, BlinkMacSystemFont, “Segoe UI”, Roboto, “Helvetica Neue”, Arial, sans-serif !important}
Trong mục Funtion.php Nếu bạn để ý web của Thế Giới Di Động sẽ có chữ “Xem thêm” , để mô tả sản phẩm trong trang product page trông gọn và thân thiện hơn thì bạn dùng script này
/*
* Thêm nút Xem thêm vào phần mô tả của danh mục sản phẩm
*/
/*
* Code thu gon mo ta chi tiet san pham trong woocomerce
*/
add_action(‘wp_footer’,’devvn_readmore_flatsome’);
function devvn_readmore_flatsome(){
?>
<style>
.single-product div#tab-description {
overflow: hidden;
position: relative;
padding-bottom: 25px;
}
.single-product .tab-panels div#tab-description.panel:not(.active) {
height: 0 !important;
}
.devvn_readmore_flatsome {
text-align: center;
cursor: pointer;
position: absolute;
z-index: 10;
bottom: 0;
width: 100%;
background: #fff;
}
.devvn_readmore_flatsome: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;
}
.devvn_readmore_flatsome a {
color: #318A00;
display: block;
}
.devvn_readmore_flatsome a:after {
content: ”;
width: 0;
right: 0;
border-top: 6px solid #318A00;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
display: inline-block;
vertical-align: middle;
margin: -2px 0 0 5px;
}
.devvn_readmore_flatsome_less a:after {
border-top: 0;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-bottom: 6px solid #318A00;
}
.devvn_readmore_flatsome_less:before {
display: none;
}
</style>
<script>
(function($){
$(document).ready(function(){
$(window).on(‘load’, function(){
if($(‘.single-product div#tab-description’).length > 0){
var wrap = $(‘.single-product div#tab-description’);
var current_height = wrap.height();
var your_height = 300;
if(current_height > your_height){
wrap.css(‘height’, your_height+’px’);
wrap.append(function(){
return ‘<div class=”devvn_readmore_flatsome devvn_readmore_flatsome_more”><a title=”See More” href=”javascript:void(0);”>See More</a></div>’;
});
wrap.append(function(){
return ‘<div class=”devvn_readmore_flatsome devvn_readmore_flatsome_less” style=”display: none;”><a title=”See More” href=”javascript:void(0);”>See Less</a></div>’;
});
$(‘body’).on(‘click’,’.devvn_readmore_flatsome_more’, function(){
wrap.removeAttr(‘style’);
$(‘body .devvn_readmore_flatsome_more’).hide();
$(‘body .devvn_readmore_flatsome_less’).show();
});
$(‘body’).on(‘click’,’.devvn_readmore_flatsome_less’, function(){
wrap.css(‘height’, your_height+’px’);
$(‘body .devvn_readmore_flatsome_less’).hide();
$(‘body .devvn_readmore_flatsome_more’).show();
});
}
}
});
})
})(jQuery)
</script>
<?php
}
/*
Còn muốn đổi màu nút mua hàng trong product page thì dùng CSS này Theme CSS
.woocommerce-page button.button, .product-image-summary button.single_add_to_cart_button.button.alt {
box-shadow: 0px 0px 0px 0px #ffffff;
background-color:#0864b6;
border-radius:12px;
border:1px solid #ffffff;
display:inline-block;
cursor:pointer;
color:#ffffff;
font-family:Arial;
font-size:19px;
padding: 4px 6px;
text-decoration:none;
text-shadow:0px 0px 0px #000000;
width: 100%;!important
}
.woocommerce-page button.button:hover {
background-color:#0864b6;
}
.widget_price_filter .price_slider_amount .button {
background-color: #000000;
}