Add expandable read more link to archives product category

Hi @wdorj,

Thank you for reaching out.

I understand you’re trying to add a “Read More” link to your lengthy category descriptions.

Just to clarify, this particular forum is meant for general support with the core functionality of WooCommerce itself. For development and custom coding questions, it’s best to ask for insight related to those on either the?WooCommerce Advanced Facebook group?or the?WooCommerce Community Slack. Many of our developers hang out there and will be able to offer insights into your question.

I wish I could help more, but hopefully, this gets you going in the right direction to get some further insight/information.

Yes that’s what I want, maybe I was thinking that there is a simpler solution that doesn’t need special codes, since the !–more– function is not available for the description. Maybe a simple HTML code

Hi @wdorj,

Just to clarify, this is beyond the scope of support we can offer, however, I’ll leave this topic open a little longer to see if any community member can chime in to help you out.

All the best.

I’ve been going crazy trying to figure out how to do this as well. The read more widgets in page builders only work with post content, not archive descriptions, and I’ve spent 2 days with GPT4o and Gemini Pro trying to figure out how to make it happen with code but none of the J Query, Javascript, PHP or CSS works. I’ve searched the web for an answer and nothing there either, just tons of people with the same question. Would be AMAZING if WooCommerce would be kind enough to help us out with some custom code.

Hey there,

The !-more function in category description doesn’t work because it’s stripped out by WordPress itself (it’s not something that WooCommerce has any direct control over). You can see the same thing happening for “categories” when using regular blog posts.

In terms of possible solutions: A great deal depends on how the category description is displayed on the front end as each theme changes the classnames. On Storefront, I used the following custom CSS:

.term-description {
    /* Set initial fixed height */
    max-height: 200px; /* Adjust this value as needed */
    
    /* Hide overflowing content */
    overflow: hidden;
    
    /* Add a smooth transition effect */
    transition: max-height 0.5s ease;
    
    /* Optional: Add a subtle shadow to indicate more content */
    position: relative;
    margin-bottom: 2em
}

.term-description::after {
    /* Create a gradient overlay at the bottom to indicate more content */
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 50px; /* Height of the gradient */
    background: linear-gradient(to top, white, rgba(255, 255, 255, 0));
    pointer-events: none; /* Allow clicks to pass through */
    transition: opacity 0.5s ease;
}

.term-description:hover {
    /* Expand to show full content */
    max-height: 1000px; /* Set to a value larger than the content height */
}

.term-description:hover::after {
    /* Hide the gradient overlay when expanded */
    opacity: 0;
}

That gives me the following behaviour:

Hope it helps!

If your term description is much longer than better to use this. It worked for my site very well. This was generated using claude ai ??

.term-description {
    /* Set initial fixed height */
    max-height: 200px; /* Adjust this value as needed */
    
    /* Hide overflowing content */
    overflow: hidden;
    
    /* Add a smooth transition effect */
    transition: max-height 0.5s ease;
    
    /* Optional: Add a subtle shadow to indicate more content */
    position: relative;
    margin-bottom: 2em;
}

.term-description::after {
    /* Create a gradient overlay at the bottom to indicate more content */
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 50px; /* Height of the gradient */
    background: linear-gradient(to top, white, rgba(255, 255, 255, 0));
    pointer-events: none; /* Allow clicks to pass through */
    transition: opacity 0.5s ease;
}

.term-description:hover {
    /* Expand to show full content */
    max-height: none; /* Set to none to show full content */
}

.term-description:hover::after {
    /* Hide the gradient overlay when expanded */
    opacity: 0;
}

Glad to hear it @justinbitter.

Thank you for sharing your solution with the community. This should come in handy with any merchant facing a similar issue.