product attributes on hover

// PHP function to display product attributes

add_action( 'woocommerce_after_shop_loop_item_title', 'display_product_attributes_on_hover', 10 );

function display_product_attributes_on_hover() {

    global $product;

    // Get product attributes

    $attributes = $product->get_attributes();

    if ( ! empty( $attributes ) ) {

        // Output container for product attributes, initially hidden

        echo '<div class="product-attributes">';

        foreach ( $attributes as $attribute ) {

            if ( $attribute->is_taxonomy() ) {

                // Get terms for global attributes (e.g., size, color)

                $terms = wc_get_product_terms( $product->get_id(), $attribute->get_name(), array( 'fields' => 'names' ) );

                echo '<p>' . wc_attribute_label( $attribute->get_name() ) . ': ' . implode( ', ', $terms ) . '</p>';

            } else {

                // Get options for custom product-specific attributes

                echo '<p>' . wc_attribute_label( $attribute->get_name() ) . ': ' . implode( ', ', $attribute->get_options() ) . '</p>';

            }

        }

        echo '</div>';

    } else {

        // Log if no attributes were found (for debugging)

        error_log( 'No attributes found for product ID: ' . $product->get_id() );

    }

}

// CSS styling for product attributes

function add_custom_product_attributes_styles() {

    echo '

    <style>

    /* CSS for product attributes */

    .woocommerce ul.products li.product {

        position: relative; /* Ensure the product item is positioned relative */

        overflow: visible; /* Allow overflow for the expanded attributes */

    }

    /* Initially show a part of the attributes */

    .product-attributes {

        position: absolute; /* Position absolutely within the product item */

        top: 100%; /* Place it directly below the product */

        left: 0; /* Align it to the left */

        width: 100%; /* Make it full width */

        max-height: 30px; /* Show part of the attributes */

        opacity: 1 !important; /* Fully opaque */

        transition: max-height 0.5s ease, opacity 0.5s ease; /* Smooth transition */

        overflow: hidden; /* Hide content that exceeds max height */

        visibility: visible !important; /* Ensure it\'s visible */

        background-color: white; /* Optional: Set a background color */

        z-index: 10; /* Bring it above other elements */

    }

    /* On hover, expand and show attributes */

    .woocommerce ul.products li.product:hover .product-attributes {

        max-height: 200px; /* Set max height for full expansion */

        opacity: 1 !important; /* Fully opaque */

        visibility: visible !important; /* Ensure it\'s visible */

    }

    </style>

    ';

}

add_action('wp_head', 'add_custom_product_attributes_styles');