< Category Slide show

function display_category_slideshow() {
    // Check if it's the search result page
    if (is_search()) {
        return;
    }

    $categories = get_terms(array(
        'taxonomy'   => 'product_cat',
        'parent'     => 0,
        'hide_empty' => false,
    ));

    if ($categories) {
        $current_category = get_queried_object();

        // Separate active category from the rest
        $active_category = null;
        $inactive_categories = array();

        foreach ($categories as $category) {
            if ($current_category && $current_category->term_id == $category->term_id) {
                $active_category = $category;
            } else {
                $inactive_categories[] = $category;
            }
        }

        // Echo the CSS styles
        echo '<style>';
        echo '.category-slideshow {';
        echo 'width: 100%;';
        echo 'overflow-x: auto;';
        echo 'white-space: nowrap;';
        echo 'margin-bottom: 20px;'; // Add margin-bottom for space below the slideshow
        echo '}';
        echo '.category-slide {';
        echo 'display: inline-block;';
        echo 'width: 18%;';
        echo 'box-sizing: border-box;';
        echo 'padding: 0 5px;';
        echo 'text-align: center;';
        echo '}';
        echo '.category-slide img {';
        echo 'max-width: 75%;';
        echo 'height: auto;';
        echo '}';
       
        echo '.slides {';
        echo 'display: flex;';
        echo 'list-style: none;';
        echo 'margin: 0;';
        echo 'padding: 0;';
        echo 'transition: transform 0.5s ease-in-out;';
        echo 'white-space: nowrap;';
        echo '}';
        echo '.category-slide {';
        echo 'flex: 0 0 auto;';
        echo 'margin-right: 0px;';
        echo 'transition: transform 0.5s ease-in-out;';
        echo '}';
        echo '.category-image {';
        echo 'border-radius: 50%;';
        echo '}';
        echo '</style>';

        // Echo the HTML for the category slideshow
        echo '<div class="category-slideshow">';
        echo '<ul class="slides">';

        // Display active category first
        if ($active_category) {
            display_category_slide($active_category, true);
        }

        // Display the rest of the categories
        foreach ($inactive_categories as $category) {
            display_category_slide($category);
        }

        echo '</ul>';
        echo '</div>';
    }
}

// Function to display individual category slide
function display_category_slide($category, $is_active = false) {
    $thumbnail_id = get_woocommerce_term_meta($category->term_id, 'thumbnail_id', true);
    $image = $thumbnail_id ? wp_get_attachment_url($thumbnail_id) : 'https://www.hlomart.com/wp-content/uploads/2024/01/out1-2.gif';
    $trimmed_name = strlen($category->name) > 10 ? substr($category->name, 0, 10) . '-' : $category->name;
    $active_class = $is_active ? 'active-category' : '';

    echo '<li class="category-slide ' . $active_class . '">';
    echo '<a href="' . get_term_link($category) . '">';
    
    // Add slightly bold background for active category
    $background_color = $is_active ? '#ffffff' : 'transparent';
    $style = 'style="background-color: ' . $background_color . '; border-radius: 50%;"';
    
    echo '<div class="category-image" ' . $style . '>';
    echo '<img src="' . $image . '" alt="' . $category->name . '" />';
    echo '</div>';
    
    echo '<h3 style="font-size: 80%;' . ($is_active ? 'color: red;' : '') . '">' . $trimmed_name . '</h3>';
    echo '</a>';
    echo '</li>';
}

// Display the slideshow after the breadcrumb
add_action('woocommerce_before_main_content', 'display_category_slideshow', 20);

Leave a Comment

Your email address will not be published. Required fields are marked *

Shopping Cart
🏠 Home 🛍️ Category 🧑🏻‍⚕️ Account 💝 0 Wishlist 🏦 Wallet
Custom Icon
0
0.00
Scroll to Top