Code nút xem thêm FlatSome

 Thông thường thì Woocommerce chỉ hỗ trợ show mô tả danh mục ở trên danh sách sản phẩm, nhưng Flatsome  thì có hỗ trợ thêm vị trí bên dưới. Bottom content Đây là mã chèn vào html

//LOẠI BỎ ACTION MẶC ĐỊNH CỦA FLATSOME ĐI
add_action( 'init', 'remove_my_action');
function remove_my_action() {
    remove_action('flatsome_products_after','flatsome_products_footer_content',10);
}

//BỔ SUNG ACTION MỚI
add_action('flatsome_products_after','flatsome_products_footer_content1',10,2);

//CALL BACK FUNCTION CHO ACTION MỚI
function flatsome_products_footer_content1(){
    if(is_product_category() || is_product_tag()){
      $queried_object = get_queried_object();
      $content = get_term_meta($queried_object->term_id, 'cat_meta');
        if(!empty($content[0]['cat_footer'])){
            
            echo '<div class="data-des_phongmy">';
                echo '<hr/>';
                echo do_shortcode($content[0]['cat_footer']);
            echo '</div>';
            echo '<p class="text-center"><button class="btn_view_more">Xem Thêm</button></p>';
        }
    }
}
Chèn css 
.data-des {
    text-align: justify;
    padding-bottom: 40px;
    font-size: 1rem;
    line-height: 1.6;
    font-weight: 400;
    overflow: hidden;
    max-height: 300px;
    position: relative;
}
.data-des:after {
    display: block;
    content: "";
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, rgba(255, 255, 255, 0)), to(#fff));
    background-image: linear-gradient(
180deg
, rgba(255, 255, 255, 0) 0, #fff);
    height: 80px;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
}

.data-des.on {
    max-height: 100% !important;
}

.btn_view_more {
    background-color: #000;
    font-weight: 700;
    font-size: 1rem;
    color: #fff;
    width: 200px;
    line-height: 15px;
    padding: 10px 0.75rem;
    letter-spacing: 0.4px;
    background-image: none;
    border: none;
    margin: 20px 0;
    border-radius: 3px;
}
 Chèn js
<script>
jQuery(document).ready(function($) {

      //toggle move less on product.
      $(document).on('click', '.btn_view_more', function (e) {
          e.preventDefault();
          if ($('.data-des').hasClass('on')) {
              $('.data-des').removeClass('on');
              $(this).text('Xem Thêm');
          } else {
              $('.data-des').addClass('on');
              $(this).text('Thu Gọn');
              scrollToElement($('.data-des'));
          }
        });

    });
</script>
Xuống dòng Done

Nhận xét

Bài đăng phổ biến từ blog này

Cách dùng hàm IF trong Excel 2016, 2010, 2019 đơn giản

Cách rút ngắn các title product hiển thị trong woocommerce