Woocommerce, Bài Viết, Thủ thuật wordpress

Sharecode chức năng hiển thị top 10 sản phẩm bán chạy wordpress

Đăng vào Tháng 11 21, 2024 bởi Quản trị viên

Quản trị viên

21/11/2024

4 Phút đọc

751 Lượt xem

Đánh giá

5/5 - (1 bình chọn)

Bạn đang tìm kiếm một giải pháp để hiển thị top 10 sản phẩm bán chạy trên website WordPress? Dưới đây, mình sẽ chia sẻ code hoàn chỉnh 100% để bạn có thể tạo một slider đẹp mắt, chuyên nghiệp, và tối ưu hiệu suất cho website bán hàng của mình. Đặc biệt, code này được thiết kế chuẩn SEO, tương thích với WooCommerce, và tối ưu giao diện để mang lại trải nghiệm người dùng tốt nhất.

Sharecode chức năng hiển thị top 10 sản phẩm bán chạy wordpress

Vì sao cần chức năng hiển thị Top 10 sản phẩm bán chạy?

Tăng doanh thu: Hiển thị các sản phẩm bán chạy giúp thu hút khách hàng mới, tạo niềm tin và khuyến khích mua sắm.
Tối ưu trải nghiệm người dùng: Khách hàng dễ dàng nhận biết các sản phẩm phổ biến nhất mà không cần tìm kiếm.
Nâng cao uy tín thương hiệu: Sản phẩm bán chạy thường là những sản phẩm chất lượng, được nhiều người lựa chọn.

Tính năng nổi bật của code hiển thị top 10 sản phẩm bán chạy

Hiển thị top 10 sản phẩm dựa trên số lượng bán ra trong WooCommerce.
Thiết kế chuyên nghiệp:
- Slider tự động trượt sau mỗi 10 giây.
- Nhãn phân biệt TOP 1, 2, 3: Độc đáo với hiệu ứng gradient, màu vàng (TOP 1), bạc (TOP 2), đồng (TOP 3).
- Sản phẩm 4-10: Nhãn hiện đại, màu xanh gradient.
Tích hợp nút điều khiển: Người dùng có thể tự điều hướng giữa các sản phẩm bằng nút Next/Prev.
Responsive: Giao diện hiển thị đẹp trên mọi thiết bị, từ PC đến smartphone.
Dễ sử dụng: Chỉ cần sử dụng shortcode là có thể hiển thị ở bất kỳ đâu trên website.

Hướng dẫn sử dụng code

1. Thêm code vào theme WordPress

Sao chép toàn bộ đoạn code PHP dưới đây và dán vào file functions.php trong theme WordPress của bạn:

2. Sử dụng shortcode

Sau khi thêm code vào functions.php, sử dụng shortcode sau trong bài viết, trang hoặc widget: [muathemewpgiare_top_slider]

Ưu điểm của code

1. Chuẩn SEO

Tối ưu HTML Semantic: Các phần tử HTML được cấu trúc hợp lý, từ div, h3,đến các thành phần liên kết.
Tốc độ tải nhanh: Code tối ưu với CSS và JavaScript tích hợp, không yêu cầu plugin bên ngoài.
Thẻ tiêu đề và nội dung rõ ràng: Hỗ trợ WooCommerce hiển thị tên sản phẩm, giá cả chuẩn SEO.

2. Tăng chuyển đổi

Nhãn xếp hạng TOP: Giúp sản phẩm nổi bật hơn, tăng sự chú ý của khách hàng.
Hiệu ứng hover: Khi di chuột vào sản phẩm, hình ảnh phóng to, tạo cảm giác chuyên nghiệp.
Trượt mượt mà: Trải nghiệm người dùng được nâng cao nhờ slider tự động trượt hoặc điều khiển thủ công.

Mẹo tối ưu cho chuẩn SEO Google

Thêm tiêu đề hấp dẫn cho slider:
- Đặt tiêu đề trước slider như: “Top 10 sản phẩm bán chạy nhất hiện nay” hoặc “Khách hàng yêu thích nhất”.
- Tiêu đề này giúp Google hiểu rõ nội dung hiển thị và tăng khả năng xếp hạng trên công cụ tìm kiếm.
Thêm mô tả cho từng sản phẩm:
- Mô tả sản phẩm cụ thể trong WooCommerce để cung cấp nội dung phong phú, tăng cơ hội xuất hiện trên Google.
Tối ưu tốc độ tải trang:
- Đảm bảo hình ảnh sản phẩm được tối ưu hóa kích thước.
- Sử dụng plugin cache để cải thiện tốc độ tải slider.

Đoạn code chức năng

Dưới đây là đoạn code hoàn chỉnh, các bạn chỉ cần coppy và bỏ vào funtion.php của child-theme của mọi người là được nhé

[an]

// Shortcode hiển thị slider sản phẩm bán chạy
function muathemewpgiare_top_selling_slider() {
    $args = array(
        'post_type' => 'product',
        'posts_per_page' => 10,
        'meta_key' => 'total_sales',
        'orderby' => 'meta_value_num',
        'order' => 'DESC'
    );

    $query = new WP_Query($args);

    ob_start(); // Bắt đầu buffer để trả nội dung HTML
    if ($query->have_posts()) {
        // HTML slider container
        echo '<div class="muathemewpgiare-top-slider-container">';
        echo '<div class="slider-controls">';
        echo '<button class="slider-button prev">❮</button>';
        echo '<button class="slider-button next">❯</button>';
        echo '</div>';
        echo '<div class="muathemewpgiare-top-slider">';
        $rank = 1;
        while ($query->have_posts()) {
            $query->the_post();
            $product = wc_get_product(get_the_ID());

            // Tạo nhãn theo thứ hạng
            $label = '';
            switch ($rank) {
                case 1:
                    $label = '<div class="label label-top-1">👑 TOP 1</div>';
                    break;
                case 2:
                    $label = '<div class="label label-top-2">🥈 TOP 2</div>';
                    break;
                case 3:
                    $label = '<div class="label label-top-3">🥉 TOP 3</div>';
                    break;
                default:
                    $label = '<div class="label label-top-other">TOP ' . $rank . '</div>';
                    break;
            }

            echo '<div class="product-item muathemewpgiare-top">';
            // Hiển thị nhãn
            echo $label;
            // Hình ảnh sản phẩm
            echo '<a href="' . get_permalink() . '">' . get_the_post_thumbnail(get_the_ID(), 'medium', array('class' => 'product-image')) . '</a>';
            // Tên sản phẩm
            echo '<h3 class="product-title">' . get_the_title() . '</h3>';
            // Giá sản phẩm
            echo '<span class="product-price">' . $product->get_price_html() . '</span>';
            echo '</div>';
            $rank++;
        }
        echo '</div>';
        echo '</div>';
        wp_reset_postdata();
    } else {
        echo '<p>Không tìm thấy sản phẩm bán chạy.</p>';
    }

    return ob_get_clean();
}

// Đăng ký shortcode [muathemewpgiare_top_slider]
add_shortcode('muathemewpgiare_top_slider', 'muathemewpgiare_top_selling_slider');

// Thêm CSS và JS cho slider
function enqueue_muathemewpgiare_slider_assets() {
    echo '<style>
    /* Slider Container */
    .muathemewpgiare-top-slider-container {
        width: 100%;
        overflow: hidden;
        position: relative;
        margin: 20px auto;
    }

    /* Slider */
    .muathemewpgiare-top-slider {
        display: flex;
        gap: 20px;
        transition: transform 0.5s ease-in-out;
        padding: 20px 0;
    }

    /* Sản phẩm */
    .product-item.muathemewpgiare-top {
        flex: 0 0 calc(20% - 20px); /* 5 cột */
        box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.15);
        border-radius: 12px;
        text-align: center;
        background: #ffffff;
        padding: 20px;
        position: relative;
        overflow: hidden;
        transition: all 0.3s ease;
    }

    .product-item.muathemewpgiare-top:hover {
        transform: scale(1.08);
        box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.3);
    }

    /* Nhãn (Label) */
    .label {
        position: absolute;
        top: 15px;
        left: 15px;
        padding: 8px 12px;
        font-size: 14px;
        font-weight: bold;
        color: #fff;
        border-radius: 5px;
        z-index: 1;
        text-shadow: 1px 1px 5px rgba(0, 0, 0, 0.6);
    }

    .label-top-1 {
        background: linear-gradient(45deg, #ffcc33, #ffaa00);
        color: #fff;
        box-shadow: 0 0 10px rgba(255, 204, 51, 0.8);
    }

    .label-top-2 {
        background: linear-gradient(45deg, #c0c0c0, #a9a9a9);
        color: #fff;
        box-shadow: 0 0 10px rgba(192, 192, 192, 0.8);
    }

    .label-top-3 {
        background: linear-gradient(45deg, #cd7f32, #b87333);
        color: #fff;
        box-shadow: 0 0 10px rgba(205, 127, 50, 0.8);
    }

    .label-top-other {
        background: linear-gradient(45deg, #007bff, #0056b3);
        color: #fff;
        box-shadow: 0 0 10px rgba(0, 123, 255, 0.8);
    }

    /* Hình ảnh */
    .product-image {
        width: 100%;
        height: auto;
        border-radius: 10px;
        margin-bottom: 15px;
    }

    /* Tiêu đề */
    .product-title {
        font-size: 18px;
        color: #333;
        margin: 10px 0;
        font-weight: bold;
    }

    /* Giá */
    .product-price {
        font-size: 16px;
        color: #ff5722;
        font-weight: bold;
    }

    /* Nút điều khiển */
    .slider-controls {
        position: absolute;
        top: 50%;
        width: 100%;
        transform: translateY(-50%);
        display: flex;
        justify-content: space-between;
        z-index: 10;
    }

    .slider-button {
        background: rgba(0, 0, 0, 0.7);
        color: white;
        border: none;
        padding: 12px 18px;
        cursor: pointer;
        border-radius: 50%;
        font-size: 20px;
        transition: background 0.3s ease;
    }

    .slider-button:hover {
        background: rgba(0, 0, 0, 0.9);
    }
    </style>';

    // JS cho slider (tự động trượt + nút điều khiển)
    echo '<script>
    document.addEventListener("DOMContentLoaded", function() {
        const slider = document.querySelector(".muathemewpgiare-top-slider");
        const items = slider.children;
        const itemWidth = items[0].offsetWidth + 20; // Kích thước 1 sản phẩm + khoảng cách
        const visibleItems = 5; // Hiển thị 5 sản phẩm
        const totalItems = items.length;
        let currentIndex = 0;

        const updateSliderPosition = () => {
            slider.style.transform = `translateX(-${currentIndex * itemWidth}px)`;
        };

        const prevButton = document.querySelector(".slider-button.prev");
        const nextButton = document.querySelector(".slider-button.next");

        prevButton.addEventListener("click", () => {
            currentIndex = Math.max(currentIndex - visibleItems, 0);
            updateSliderPosition();
        });

        nextButton.addEventListener("click", () => {
            currentIndex = Math.min(currentIndex + visibleItems, totalItems - visibleItems);
            updateSliderPosition();
        });

        // Tự động trượt mỗi 10 giây
        setInterval(() => {
            currentIndex = (currentIndex + visibleItems) % totalItems;
            updateSliderPosition();
        }, 10000);
    });
    </script>';
}
add_action('wp_footer', 'enqueue_muathemewpgiare_slider_assets');

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

211

212

213

214

215

216

217

218

219

220

221

222

223

224

225

226

227

228

229

// Shortcode hiển thị slider sản phẩm bán chạy

function muathemewpgiare_top_selling_slider() {

$args = array(

'post_type' => 'product',

'posts_per_page' => 10,

'meta_key' => 'total_sales',

'orderby' => 'meta_value_num',

'order' => 'DESC'

);

$query = new WP_Query($args);

ob_start(); // Bắt đầu buffer để trả nội dung HTML

if ($query->have_posts()) {

// HTML slider container

echo '<div class="muathemewpgiare-top-slider-container">';

echo '<div class="slider-controls">';

echo '<button class="slider-button prev">❮</button>';

echo '<button class="slider-button next">❯</button>';

echo '</div>';

echo '<div class="muathemewpgiare-top-slider">';

$rank = 1;

while ($query->have_posts()) {

$query->the_post();

$product = wc_get_product(get_the_ID());

// Tạo nhãn theo thứ hạng

$label = '';

switch ($rank) {

case 1:

$label = '<div class="label label-top-1">👑 TOP 1</div>';

break;

case 2:

$label = '<div class="label label-top-2">🥈 TOP 2</div>';

break;

case 3:

$label = '<div class="label label-top-3">🥉 TOP 3</div>';

break;

default:

$label = '<div class="label label-top-other">TOP ' . $rank . '</div>';

break;

}

echo '<div class="product-item muathemewpgiare-top">';

// Hiển thị nhãn

echo $label;

// Hình ảnh sản phẩm

echo '<a href="' . get_permalink() . '">' . get_the_post_thumbnail(get_the_ID(), 'medium', array('class' => 'product-image')) . '</a>';

// Tên sản phẩm

echo '<h3 class="product-title">' . get_the_title() . '</h3>';

// Giá sản phẩm

echo '<span class="product-price">' . $product->get_price_html() . '</span>';

echo '</div>';

$rank++;

}

echo '</div>';

wp_reset_postdata();

} else {

echo '<p>Không tìm thấy sản phẩm bán chạy.</p>';

}

return ob_get_clean();

}

// Đăng ký shortcode [muathemewpgiare_top_slider]

add_shortcode('muathemewpgiare_top_slider', 'muathemewpgiare_top_selling_slider');

// Thêm CSS và JS cho slider

function enqueue_muathemewpgiare_slider_assets() {

echo '<style>

/* Slider Container */

.muathemewpgiare-top-slider-container {

width: 100%;

overflow: hidden;

position: relative;

margin: 20px auto;

}

/* Slider */

.muathemewpgiare-top-slider {

display: flex;

gap: 20px;

transition: transform 0.5s ease-in-out;

padding: 20px 0;

}

/* Sản phẩm */

.product-item.muathemewpgiare-top {

flex: 0 0 calc(20% - 20px); /* 5 cột */

box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.15);

border-radius: 12px;

text-align: center;

background: #ffffff;

padding: 20px;

position: relative;

overflow: hidden;

transition: all 0.3s ease;

}

.product-item.muathemewpgiare-top:hover {

transform: scale(1.08);

box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.3);

}

/* Nhãn (Label) */

.label {

position: absolute;

top: 15px;

left: 15px;

padding: 8px 12px;

font-size: 14px;

font-weight: bold;

color: #fff;

border-radius: 5px;

z-index: 1;

text-shadow: 1px 1px 5px rgba(0, 0, 0, 0.6);

}

.label-top-1 {

background: linear-gradient(45deg, #ffcc33, #ffaa00);

color: #fff;

box-shadow: 0 0 10px rgba(255, 204, 51, 0.8);

}

.label-top-2 {

background: linear-gradient(45deg, #c0c0c0, #a9a9a9);

color: #fff;

box-shadow: 0 0 10px rgba(192, 192, 192, 0.8);

}

.label-top-3 {

background: linear-gradient(45deg, #cd7f32, #b87333);

color: #fff;

box-shadow: 0 0 10px rgba(205, 127, 50, 0.8);

}

.label-top-other {

background: linear-gradient(45deg, #007bff, #0056b3);

color: #fff;

box-shadow: 0 0 10px rgba(0, 123, 255, 0.8);

}

/* Hình ảnh */

.product-image {

width: 100%;

height: auto;

border-radius: 10px;

margin-bottom: 15px;

}

/* Tiêu đề */

.product-title {

font-size: 18px;

color: #333;

margin: 10px 0;

font-weight: bold;

}

/* Giá */

.product-price {

font-size: 16px;

color: #ff5722;

font-weight: bold;

}

/* Nút điều khiển */

.slider-controls {

position: absolute;

top: 50%;

width: 100%;

transform: translateY(-50%);

display: flex;

justify-content: space-between;

z-index: 10;

}

.slider-button {

background: rgba(0, 0, 0, 0.7);

color: white;

border: none;

padding: 12px 18px;

cursor: pointer;

border-radius: 50%;

font-size: 20px;

transition: background 0.3s ease;

}

.slider-button:hover {

background: rgba(0, 0, 0, 0.9);

}

</style>';

// JS cho slider (tự động trượt + nút điều khiển)

echo '<script>

document.addEventListener("DOMContentLoaded", function() {

const slider = document.querySelector(".muathemewpgiare-top-slider");

const items = slider.children;

const itemWidth = items[0].offsetWidth + 20; // Kích thước 1 sản phẩm + khoảng cách

const visibleItems = 5; // Hiển thị 5 sản phẩm

const totalItems = items.length;

let currentIndex = 0;

const updateSliderPosition = () => {

slider.style.transform = `translateX(-${currentIndex * itemWidth}px)`;

};

const prevButton = document.querySelector(".slider-button.prev");

const nextButton = document.querySelector(".slider-button.next");

prevButton.addEventListener("click", () => {

currentIndex = Math.max(currentIndex - visibleItems, 0);

updateSliderPosition();

});

nextButton.addEventListener("click", () => {

currentIndex = Math.min(currentIndex + visibleItems, totalItems - visibleItems);

updateSliderPosition();

});

// Tự động trượt mỗi 10 giây

setInterval(() => {

currentIndex = (currentIndex + visibleItems) % totalItems;

updateSliderPosition();

}, 10000);

});

</script>';

}

add_action('wp_footer', 'enqueue_muathemewpgiare_slider_assets');

[/an]

Với đoạn code hiển thị top 10 sản phẩm bán chạy trên WordPress này, bạn không chỉ tối ưu giao diện website mà còn tăng khả năng chuyển đổi và thu hút khách hàng. Code đã được thiết kế chuyên nghiệp, dễ sử dụng, và đặc biệt là chuẩn SEO để giúp bạn nổi bật trên Google.

Nếu bạn thấy bài viết hữu ích, đừng quên chia sẻ cho bạn bè và đồng nghiệp nhé. Hãy để lại bình luận nếu bạn cần hỗ trợ thêm hoặc muốn cập nhật những tính năng mới cho slider này! 🌟

Xem thêm:

Thông báo chính thức: Muathemewpgiare chân thành mong muốn được đồng hành và hỗ trợ tốt nhất cho các khách hàng trong quá trình sử dụng giao diện WordPress. Vì vậy, khi mua những theme wordpress tại chúng tôi, chúng tôi cam kết hỗ trợ quý khách hàng hết sức có thể.

Chúng tôi hiểu rằng sự lựa chọn của quý khách là rất quan trọng. Việc mua source code tại chúng tôi không chỉ giúp đảm bảo chất lượng mà còn nhận được sự hỗ trợ tận tâm từ Muathemewpgiare. Chúng tôi rất mong quý khách cân nhắc kỹ, tránh những rủi ro không đáng có khi mua các source code không rõ nguồn gốc. Chúng tôi luôn sẵn sàng hỗ trợ và đồng hành cùng quý khách. Xin chân thành cảm ơn!

12 Lỗ Hổng Bảo Mật PHP Nguy Hiểm: Nguyên Nhân, Rủi Ro Và Cách Phòng Tránh Năm 2026

Một website hoạt động ổn định chưa chắc đã là một website an toàn. Đằng sau giao diện đẹp mắt, tốc độ tải nhanh và...
Tài khoản Claude Code có dùng chung được không? Giải đáp chi tiết

Tài khoản Claude Code có dùng chung được không? Đây là câu hỏi được khá nhiều người quan tâm, đặc biệt khi muốn mua Claude...
Top 10+ đơn vị cung cấp tên miền uy tín tại Việt Nam

Chọn đơn vị cung cấp tên miền uy tín là bước tưởng nhỏ nhưng lại ảnh hưởng trực tiếp đến website, thương hiệu và khả...
Astra Pro Trọn Bộ: Theme Astra, Key Kích Hoạt Nhiều Web

Bạn đang tìm kiếm một giải pháp toàn diện để xây dựng trang web WordPress chuyên nghiệp và hiệu quả? Astra Pro Trọn Bộ chính...
Plugin Thanh Toán WordPress + App Đọc Giao Dịch FREE 1 Năm

MUATHEMEWPGIARE.COM chính thức thông báo chương trình ưu đãi mới từ ngày 20/09/2026: khách hàng có đơn hàng từ 1.500.000đ sẽ được tặng miễn phí...
Top 100 Model AI Mạnh Nhất Thế Giới 2026: Phân Tích Chi Tiết

Thế giới trí tuệ nhân tạo năm 2026 đang bước sang một giai đoạn hoàn toàn khác so với thời kỳ chỉ vài mô hình...
GPT-6 Astra: Thế hệ trí tuệ mới với khả năng suy luận, lập trình vượt trội

GPT-6 Astra đang được OpenAI giới thiệu như một thế hệ mô hình trí tuệ nhân tạo mới, tập trung mạnh vào khả năng suy...
Đại lễ 2/9 – Giảm giá đến 40% tại MuathemeWPgiare.com

Mục LụcVì sao cần chức năng hiển thị Top 10 sản phẩm bán chạy?Tính năng nổi bật của code hiển thị top 10 sản phẩm...
Kinh nghiệm chọn theme WordPress phù hợp cho website của bạn

Mục LụcVì sao cần chức năng hiển thị Top 10 sản phẩm bán chạy?Tính năng nổi bật của code hiển thị top 10 sản phẩm...
Kiểm tra tốc độ load theme: Hướng dẫn đơn giản trước khi mua

Mục LụcVì sao cần chức năng hiển thị Top 10 sản phẩm bán chạy?Tính năng nổi bật của code hiển thị top 10 sản phẩm...
Hướng dẫn chọn theme WordPress chuẩn SEO cho website hiệu quả

Mục LụcVì sao cần chức năng hiển thị Top 10 sản phẩm bán chạy?Tính năng nổi bật của code hiển thị top 10 sản phẩm...
Lý do bạn nên chọn thiết kế website uy tín tại Ninh Bình

Mục LụcVì sao cần chức năng hiển thị Top 10 sản phẩm bán chạy?Tính năng nổi bật của code hiển thị top 10 sản phẩm...
Claude qua GitHub Copilot: so sánh Claude Code và GitHub Copilot trong lập trình

Trong thế giới phát triển phần mềm đang ngày càng tiến bộ, sự xuất hiện của các trợ lý lập trình dựa trên trí tuệ...
Thông Báo Chính Thức: Ngừng Cung Cấp Website Và Theme Cho Lĩnh Vực Tài Khoản Game, Vật Phẩm Ảo

Kính gửi Quý khách hàng và Quý đối tác, Để tuân thủ các quy định của pháp luật hiện hành, đồng thời định hướng phát...
Có nên mua Theme trên ThemeForest? Phân tích ưu, nhược điểm

Mục LụcVì sao cần chức năng hiển thị Top 10 sản phẩm bán chạy?Tính năng nổi bật của code hiển thị top 10 sản phẩm...
Mua Theme WordPress: Hỗ trợ sử dụng theme và plugin

Trong thế giới số hóa ngày nay, việc sở hữu một trang web chuyên nghiệp là điều thiết yếu đối với bất kỳ cá nhân...