Hiệu ứng Placeholder Loading Cho Sản Phẩm WooCommerce

Để thêm hiệu ứng Placeholder loading cho sản phẩm trong WooCommerce, bạn có thể sử dụng các bước dưới đây để cải thiện trải nghiệm người dùng khi sản phẩm đang tải.

Hiệu ứng Placeholder loading cho sản phẩm WooCommerce

Hiệu ứng Placeholder bằng CSS

Trước tiên, tạo hiệu ứng Placeholder loading bằng cách thêm CSS và sử dụng mã HTML tạm thời trong danh sách sản phẩm.

Hiệu ứng Placeholder loading - Khi f5 lại — Hiệu ứng Placeholder loading – Khi f5 lại

Hiệu ứng Placeholder loading - sau khi load xong — Hiệu ứng Placeholder loading – sau khi load xong

CSS (Shimmer Placeholder)

Thêm đoạn mã CSS vào Appearance > Customize > Additional CSS hoặc file CSS chính của theme.

/* CSS Placeholder */
.product-placeholder .placeholder {
  background: linear-gradient(90deg, #e0e0e0 25%, #f5f5f5 50%, #e0e0e0 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite linear;
  border-radius: 4px;
  margin-bottom: 10px;
}

.product-placeholder .image {
  width: 100%;
  height: 150px;
}

.product-placeholder .text {
  width: 80%;
  height: 20px;
  margin: 10px 0;
}

.product-placeholder .price {
  width: 40%;
  height: 20px;
}

/* Hiệu ứng shimmer */
@keyframes shimmer {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}

/* CSS Placeholder */

.product-placeholder .placeholder {

background: linear-gradient(90deg, #e0e0e0 25%, #f5f5f5 50%, #e0e0e0 75%);

background-size: 200% 100%;

animation: shimmer 1.5s infinite linear;

border-radius: 4px;

margin-bottom: 10px;

}

.product-placeholder .image {

width: 100%;

height: 150px;

}

.product-placeholder .text {

width: 80%;

height: 20px;

margin: 10px 0;

}

.product-placeholder .price {

width: 40%;

height: 20px;

}

/* Hiệu ứng shimmer */

@keyframes shimmer {

0% {

background-position: -200% 0;

}

100% {

background-position: 200% 0;

}

Thêm HTML Placeholder

Chèn mã HTML Placeholder tạm thời để hiển thị khi sản phẩm đang tải.

Sử dụng Hook WooCommerce

Thêm đoạn mã sau vào file functions.php của theme con (Child Theme) để chèn Placeholder trước khi sản phẩm được hiển thị:

add_action('woocommerce_before_shop_loop_item', 'add_product_placeholder');

function add_product_placeholder() {
    echo '<div class="product-placeholder">
            <div class="placeholder image"></div>
            <div class="placeholder text"></div>
            <div class="placeholder price"></div>
          </div>';
}

add_action('woocommerce_before_shop_loop_item', 'add_product_placeholder');

function add_product_placeholder() {

echo '<div class="product-placeholder">

</div>';

}

Hiển thị dữ liệu thực tế

Khi sản phẩm được tải, thay thế Placeholder bằng nội dung thực tế.

Sử dụng JavaScript

Thêm đoạn JavaScript để thay thế Placeholder bằng dữ liệu thật.

Xem thêm bài viết khác

Bước 1: Tạo file JavaScript

Tạo file placeholder.js trong thư mục js của theme con, sau đó thêm đoạn mã sau:

jQuery(document).ready(function ($) {
  // Ẩn Placeholder và hiển thị sản phẩm sau khi dữ liệu được tải
  setTimeout(() => {
    $('.product-placeholder').fadeOut(300, function () {
      $(this).closest('.product').find('.woocommerce-loop-product__link').fadeIn();
    });
  }, 2000); // Thời gian tải giả lập (2 giây)
});

jQuery(document).ready(function ($) {

// Ẩn Placeholder và hiển thị sản phẩm sau khi dữ liệu được tải

setTimeout(() => {

$('.product-placeholder').fadeOut(300, function () {

$(this).closest('.product').find('.woocommerce-loop-product__link').fadeIn();

});

}, 2000); // Thời gian tải giả lập (2 giây)

});

Bước 2: Thêm Script vào Theme

Nhúng file JavaScript vào WooCommerce bằng cách thêm đoạn mã này vào functions.php:

function enqueue_placeholder_script() {
    wp_enqueue_script('product-placeholder', get_stylesheet_directory_uri() . '/js/placeholder.js', array('jquery'), null, true);
}
add_action('wp_enqueue_scripts', 'enqueue_placeholder_script');

function enqueue_placeholder_script() {

wp_enqueue_script('product-placeholder', get_stylesheet_directory_uri() . '/js/placeholder.js', array('jquery'), null, true);

}

add_action('wp_enqueue_scripts', 'enqueue_placeholder_script');

Sử dụng Plugin Lazy Load

Nếu không muốn làm thủ công, bạn có thể sử dụng plugin để tạo Placeholder:

WooCommerce Lazy Load: Plugin này hỗ trợ hiệu ứng Lazy Loading và Placeholder loading.
WP Skeleton Loader: Một plugin mạnh mẽ cho hiệu ứng Skeleton.