Woocommerce brand list with Thumbnails

If you’d like to create a WooCommerce custom page template that displays all brands with thumbnails in a slider/carousel, you can use a library like Swiper.js or Slick Slider for the sliding functionality. Here’s how to do it:

Step 1: Create a Custom Page Template

Navigate to your theme directory:
/wp-content/themes/your-theme/.
Create a new file, for example:
page-brand-slider.php.
Add the following code:

<?php
/* Template Name: Brand Slider */

get_header(); ?>

<div class="container brand-slider-template">
    <h1>All Brands</h1>

    <?php
    // Replace 'product_brand' with your actual taxonomy
    $taxonomy = 'product_brand';
    $brands = get_terms(array(
        'taxonomy' => $taxonomy,
        'hide_empty' => false, // Set to true if you only want brands with products
    ));

    if (!empty($brands) && !is_wp_error($brands)) : ?>
        <!-- Slider Container -->
        <div class="swiper-container">
            <div class="swiper-wrapper">
                <?php foreach ($brands as $brand) : 
                    // Get brand thumbnail
                    $thumbnail_id = get_term_meta($brand->term_id, 'thumbnail_id', true);
                    $thumbnail_url = $thumbnail_id ? wp_get_attachment_url($thumbnail_id) : 'https://via.placeholder.com/150'; // Default image
                    ?>
                    <div class="swiper-slide">
                        <a href="<?php echo esc_url(get_term_link($brand)); ?>">
                            <img src="<?php echo esc_url($thumbnail_url); ?>" alt="<?php echo esc_attr($brand->name); ?>" />
                            <p><?php echo esc_html($brand->name); ?></p>
                        </a>
                    </div>
                <?php endforeach; ?>
            </div>

            <!-- Add Navigation -->
            <div class="swiper-button-next"></div>
            <div class="swiper-button-prev"></div>

            <!-- Add Pagination -->
            <div class="swiper-pagination"></div>
        </div>
    <?php else : ?>
        <p>No brands found.</p>
    <?php endif; ?>
</div>

<?php get_footer(); ?>

Step 2: Enqueue Swiper.js Scripts and Styles

Add the following code to your theme’s functions.php to include Swiper.js:

function enqueue_brand_slider_assets() {
    // Swiper.js CSS
    wp_enqueue_style('swiper-css', 'https://unpkg.com/swiper/swiper-bundle.min.css', array(), null);

    // Swiper.js JS
    wp_enqueue_script('swiper-js', 'https://unpkg.com/swiper/swiper-bundle.min.js', array('jquery'), null, true);

    // Custom JS for slider initialization
    wp_enqueue_script('brand-slider-js', get_template_directory_uri() . '/js/brand-slider.js', array('swiper-js'), null, true);
}
add_action('wp_enqueue_scripts', 'enqueue_brand_slider_assets');

Step 3: Initialize Swiper.js

Create a new file named brand-slider.js in your theme’s /js/ directory, and add the following:

document.addEventListener("DOMContentLoaded", function () {
    const swiper = new Swiper(".swiper-container", {
        slidesPerView: 4,
        spaceBetween: 20,
        navigation: {
            nextEl: ".swiper-button-next",
            prevEl: ".swiper-button-prev",
        },
        pagination: {
            el: ".swiper-pagination",
            clickable: true,
        },
        breakpoints: {
            320: {
                slidesPerView: 1,
                spaceBetween: 10,
            },
            768: {
                slidesPerView: 2,
                spaceBetween: 15,
            },
            1024: {
                slidesPerView: 4,
                spaceBetween: 20,
            },
        },
    });
});

Step 4: Style the Brands Slider

Add the following CSS to your theme’s style.css file:

.brand-slider-template {
    text-align: center;
    margin-top: 20px;
}

.swiper-container {
    width: 100%;
    margin: 0 auto;
}

.swiper-slide {
    text-align: center;
}

.swiper-slide img {
    width: 100%;
    height: auto;
    border-radius: 10px;
    transition: transform 0.3s ease;
}

.swiper-slide img:hover {
    transform: scale(1.05);
}

.swiper-slide p {
    margin-top: 10px;
    font-size: 14px;
    font-weight: 600;
}

.swiper-button-next,
.swiper-button-prev {
    color: #000;
}

.swiper-pagination-bullet {
    background: #000;
}

Step 5: Assign the Template to a Page

In the WordPress Admin Dashboard, go to Pages > Add New.
Create a new page (e.g., “Brand Slider”).
In the Page Attributes section on the right-hand side, select the template “Brand Slider” from the Template dropdown.
Publish the page.

Final Output

The page will display all brands in a responsive slider.
You can navigate using the arrows or pagination dots.
It will adapt to screen sizes with the breakpoints defined.

Demo and Downloads