Hướng dẫn tạo Slider Thương hiệu cho WooCommerce với Theme Flatsome

Hôm nay, mình sẽ chia sẻ một đoạn code hữu ích giúp tạo một slider hiển thị logo các thương hiệu một cách chuyên nghiệp. Đoạn code này được viết riêng để hoạt động với plugin Perfect Brands for WooCommerce trên theme Flatsome.

Mục chính của bài

Hướng dẫn tạo Slider Thương hiệu cho WooCommerce với Theme Flatsome

Lưu ý quan trọng: Vì code sử dụng các shortcode ([ux_slider1], [logo1]) có sẵn của Flatsome, nó sẽ không hoạt động trên các theme khác nếu không có sự tùy chỉnh.

Yêu cầu chuẩn bị

Trước khi bắt đầu, hãy đảm bảo bạn đã có:

Website WordPress đang sử dụng theme Flatsome.
Đã cài đặt và kích hoạt Flatsome Child Theme. (Đây là bước quan trọng để không mất code khi cập nhật theme gốc).
Đã cài đặt, kích hoạt và thêm các thương hiệu (cùng với logo) bằng plugin Perfect Brands for WooCommerce.

Bước 1: Thêm code vào file `functions.php`

Bạn hãy sao chép toàn bộ đoạn mã PHP dưới đây và dán vào cuối file functions.php của theme con (child theme) đang sử dụng* Tạo shortcode [brands_slider] để hiển thị slider logo các thương hiệu.

function hoidapwp_create_brands_slider($atts) {
// Thiết lập các giá trị mặc định cho shortcode
$atts = shortcode_atts(
array(
‘height’ => ’50px’, // Chiều cao mặc định của logo
‘arrows’ => ‘false’, // Ẩn/hiện mũi tên điều hướng
‘bullets’ => ‘false’, // Ẩn/hiện dấu chấm điều hướng
),
$atts,
‘brands_slider’
);

// Bắt đầu chuỗi shortcode slider của Flatsome
// $slider_shortcode = ‘[ux_slider1 style=”normal” arrows=”‘ . esc_attr($atts[‘arrows’]) . ‘” bullets=”‘ . esc_attr($atts[‘bullets’]) . ‘” freescroll=”true” hide_nav=”true” nav_pos=”outside”]’;

// Lấy danh sách tất cả các thương hiệu
$brands = get_terms([
‘taxonomy’ => ‘pwb-brand’,
‘hide_empty’ => false, // Hiển thị cả những thương hiệu chưa có sản phẩm
]);

$has_brands = false;

// Kiểm tra nếu có thương hiệu tồn tại
if ( !is_wp_error($brands) && !empty($brands) ) {
// Lặp qua từng thương hiệu
foreach ( $brands as $brand ) {
// Lấy URL ảnh logo của thương hiệu
$logo_url = get_term_meta($brand->term_id, ‘pwb_brand_image’, true);

// Nếu thương hiệu có logo
if ( $logo_url ) {
$has_brands = true; // Đánh dấu là có thương hiệu để hiển thị

// Lấy link của trang thương hiệu
$brand_link = get_term_link($brand);

// Thêm shortcode [logo1] của Flatsome vào slider
$slider_shortcode .= ‘[logo1 img=”‘ . esc_url($logo_url) . ‘” link=”‘ . esc_url($brand_link) . ‘” height=”‘ . esc_attr($atts[‘height’]) . ‘” hover=”color” image_size=”original”]’;
}
}
}

// Đóng chuỗi shortcode slider
$slider_shortcode .= ‘[/ux_slider]‘;

// Chỉ trả về chuỗi shortcode để hiển thị nếu có ít nhất một logo
if ( $has_brands ) {
return do_shortcode($slider_shortcode);
}

// Trả về rỗng nếu không có thương hiệu nào
return ”;
}
// Đăng ký shortcode [brands_slider] để có thể sử dụng
add_shortcode(‘brands_slider’, ‘hoidapwp_create_brands_slider’);

Note : Chú ý nhé coppy xong sửa code [logo1 = > thành [logo

sửa ‘[ux_slider1 = > thành ‘[ux_slider

thì code mới hoạt động nhé

Bước 2: Sử dụng Shortcode để hiển thị Slider

Sau khi đã lưu file functions.php, bạn có thể hiển thị slider này ở bất kỳ đâu trên website (trang chủ, trang giới thiệu, footer,…) bằng cách sử dụng shortcode:

Bạn có thể chèn shortcode này vào trình soạn thảo văn bản thông thường hoặc dùng phần tử “Text” hay “Shortcode” trong UX Builder của Flatsome.