Display and Truncate Woocomemrce Short Description On Shop And Archive Loops

wctsdsl.php

/*
 * @snippet       Display and Truncate Woocomemrce Short Description On Shop And Archive Loops
 * @description   This snippet will add a product's short description to the archive and loop pages. The short description will be truncated via pure CSS and expanded on hover.
 * @author        u/acephaliax
 * @source        https://insomniainc.com/resources/
 * @compatibility Last tested on WooCommerce 9.0.1
 * @community     r/wordpress, r/woocommerce
 * @caffeinate    https://buymeacoffee.com/acephaliax
 */

// Display Product Short Description on Shop and Archive Pages. Comment/delete if your shop template already has this feature
add_action('woocommerce_after_shop_loop_item_title', 'display_product_short_description', 15);

function display_product_short_description() {
    // Get global product data
    global $product;
    // Start a div for the short description
    echo '<div class="woocommerce-product-details__short-description">';
    // Get and display the short description
    echo apply_filters('woocommerce_short_description', $product->get_short_description());
    // Close the div
    echo '</div>';
}

// Embed CSS for truncating and expanding product short descriptions based on word/character count
function custom_css_for_product_short_description() {
    // Add custom CSS to the head of the page
    echo '<style>';
    // Start of CSS for the short description
    echo '.woocommerce-product-details__short-description {
        display: -webkit-box;
        -webkit-line-clamp: 2; /* Change this number to adjust the maximum number of lines */
        -webkit-box-orient: vertical;
        overflow: hidden;
        max-height: 4em; /* Adjust this value based on line-clamp */
        transition: max-height 2s ease; /* Smooth transition for expand/collapse */
    }';
        
    // CSS for expanding the short description on hover or focus
    echo '.woocommerce-product-details__short-description:hover,
          .woocommerce-product-details__short-description:focus {
        display: -webkit-box;
        -webkit-line-clamp: unset;
        max-height: 2000px; /* Set to a large value to accommodate full content */
    }';
    echo '</style>';
}
// Hook the custom CSS into the head of the page
add_action('wp_head', 'custom_css_for_product_short_description');

Support the support, caffeine is always appreciated : https://buymeacoffee.com/acephaliax