Thiết kế website chuyên nghiệp
Thiết kế nhận diện thương hiệu
Thiết kế landing page
Quản trị và sáng tạo nội dung
Dịch vụ seo tổng thể
Em chào các Anh/Chị nhá ! Hôm nay em lại Share code, cũng khá nhiều anh chị em cần.
1 Đoạn code, hôm này em hỗ trợ 1 bạn trong groups. Nên em share luôn. Anh chị em nào coppy ghi nguồn giúp em.
code hiển thị mô tả sản phẩm dạng hover ra ngoài trang chủ trên woocommerce
Bước 1:
Coppy đoạn code này vào (function.php) trong mục (sửa giao diện).
|
1 |
function cong_minh_web(){echo '<div class="box-excerpt">';echo '<div class="excerpt">';the_excerpt();echo '</div>';echo '<p class="link">';_e( 'Xem thêm +', 'flatsome' );echo '</p>';echo '</div>';}add_action( 'flatsome_woocommerce_shop_loop_images', 'cong_minh_web', 11 );?> |
Bước 2:
Css, Tiếp tục vào mục tùy biến, chọn css bổ sung coppy đoạn code này vào.
|
1 2 3 4 5 6 7 |
/*css hover text san pham*/ .product-small.box .box-excerpt {background-color: rgba(0,0,0,.7);z-index: 1;padding: 15px;transition: all .3s linear;opacity: 0;pointer-events: none;position: absolute;width: 100%;height: 100%;top: 0;left: 0; }.product-small.box .box-excerpt p {color: #fff;font-size: 12px; }.product-small.box:hover .box-excerpt{opacity: 1; }.product-small.box .box-excerpt .excerpt {max-height: 115px;overflow: hidden;-webkit-line-clamp: 2;position: relative;text-overflow: ellipsis;white-space: normal;word-wrap: break-word;-webkit-box-orient: vertical; }.product-small.box .box-excerpt .link {color: #bbb;margin: 10px 0 0; } |
Link demo: https://muathemegiare.xyz/
Hoặc các bạn có thể vào mục (Sửa giao diện để thêm css vào nha).
Chúc các bạn thành công !
Lưu ý: mình làm trên flatsome,
Có thể bạn chưa biết ?
