Skip to content

Instantly share code, notes, and snippets.

@Acephalia
Last active April 1, 2023 04:26
Show Gist options
  • Save Acephalia/cc8fff0c0b55b4979e2687d104f8e7b3 to your computer and use it in GitHub Desktop.
Save Acephalia/cc8fff0c0b55b4979e2687d104f8e7b3 to your computer and use it in GitHub Desktop.
Truncate Woocommerce Product Titles & Expand on Hover
/* 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;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment