display product categories in shop page

/*category list*/
.categories-scroll-container {
    display: flex;
    overflow-x: auto;
    white-space: nowrap;
    padding-bottom: 10px;
    gap: 10px;
	overflow: visible;
}

.category-item {
    display: inline-block;
    text-align: center;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    background: #fff;
    transition: transform 0.2s;
}

.category-item img {
    width: 100px;
    height: 100px;
    display: block;
    margin: 0 auto 10px;
    border-radius: 50%;
    border: 1px solid #eee;
    object-fit: cover;
}

.category-item h3 {
    font-size: 16px;
}

.category-item .product-count {
    font-size: 12px;
    color: #666;
}

.category-item.current-category {
    border-color: #0073aa;
    background-color: #eaf5fc;
}

.category-item:hover {
    transform: scale(1.05);
}

.categories-scroll-container::-webkit-scrollbar {
    height: 8px;
}

.categories-scroll-container::-webkit-scrollbar-thumb {
    background: #ccc;
    border-radius: 4px;
}

    

      Copy
      
    
    
      function display_product_categories_scroll() {
    // Get non-empty product categories
    $categories = get_terms(array(
        'taxonomy'   => 'product_cat',
        'hide_empty' => true, // Exclude empty categories
    ));

    // Start the scroll container
    echo '<div class="categories-scroll-container">';

    // Add the "All" link at the beginning
    $is_current = is_shop() ? 'current-category' : ''; // Highlight "All" if on the shop page
    echo '<div class="category-item ' . esc_attr($is_current) . '">';
    echo '<a href="' . esc_url(get_permalink(wc_get_page_id('shop'))) . '">'; // Link to the shop page
    echo '<img src="https://wellen.gr/wp-content/uploads/2025/01/granolabowl.png" alt="All Products">'; // Placeholder image for "All"
    echo '<h3>All</h3>';
    echo '<span class="product-count">All Products</span>'; // Optional: Add a custom text for product count
    echo '</a>';
    echo '</div>';

    // Loop through categories
    if (!empty($categories)) {
        foreach ($categories as $category) {
            // Get the category image ID and URL
            $thumbnail_id = get_term_meta($category->term_id, 'thumbnail_id', true);
            $image_url = $thumbnail_id ? wp_get_attachment_url($thumbnail_id) : wc_placeholder_img_src();

            // Check if the current category matches the current archive
            $is_current = (get_queried_object_id() == $category->term_id) ? 'current-category' : '';

            // Display category details
            echo '<div class="category-item ' . esc_attr($is_current) . '">';
            echo '<a href="' . esc_url(get_term_link($category)) . '">';
            echo '<img src="' . esc_url($image_url) . '" alt="' . esc_attr($category->name) . '">';
            echo '<h3>' . esc_html($category->name) . '</h3>';
            echo '<span class="product-count">(' . esc_html($category->count) . ' products)</span>';
            echo '</a>';
            echo '</div>';
        }
    }

    // End the scroll container
    echo '</div>';
}

// Hook into WooCommerce archive pages
add_action('woocommerce_before_shop_loop', 'display_product_categories_scroll');
    
    

	
How to use this
	
      Copy