Truncate Woocommerce Product Titles & Expand on Hover

wtpteoh.css

/* Truncate product titles */
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce-page ul.products li.product .woocommerce-loop-product__title {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

/* Expand truncated product titles on hover or focus */
.woocommerce ul.products li.product .woocommerce-loop-product__title:hover,
.woocommerce ul.products li.product .woocommerce-loop-product__title:focus,
.woocommerce-page ul.products li.product .woocommerce-loop-product__title:hover,
.woocommerce-page ul.products li.product .woocommerce-loop-product__title:focus {
    white-space: normal;
    overflow: visible;
    text-overflow: unset;
    max-width: unset;
}