How to Add a ‘Read More/Read Less’ Toggle to WooCommerce Product Descriptions

1. Install & activate WPCode

2. Go to Code Snippets => Header & Footer => and paste the below code in the Footer Field

3. Click Save Changes

<script type="text/javascript">
/**
 * Added By @DiviStation
 */
jQuery(document).ready(function ($) {
  var description = $('.woocommerce-Tabs-panel--description');

  if (description.length && description.text().length > 300) {
    description.wrapInner('<div class="ds-read-more-content"></div>');
    description.append('<span class="ds-read-more-toggle">Read More</span>');
  }

  $('.ds-read-more-toggle').click(function () {
    var content = $(this).prev('.ds-read-more-content');
    if (content.hasClass('expanded')) {
      content.removeClass('expanded');
      $(this).text('Read More');
    } else {
      content.addClass('expanded');
      $(this).text('Read Less');
    }
  });

  $('.ds-read-more-content').css({ maxHeight: '100px', overflow: 'hidden' });
});
</script>

<style type="text/css">
/**
 * Added By @DiviStation
 */
.woocommerce-Tabs-panel--description .ds-read-more-content {
  max-height: 100px;
  overflow: hidden;
  transition: max-height 0.3s ease;
  display: block !important;
  position: relative;
}

.woocommerce-Tabs-panel--description .ds-read-more-content.expanded {
  max-height: none !important;
}
.ds-read-more-toggle {
  display: inline-block;
  margin-top: 10px;
  color: #0073aa;
  cursor: pointer;
  text-decoration: underline;
}
.woocommerce-Tabs-panel--description .ds-read-more-content::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 30px;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%);
  pointer-events: none;
  z-index: 1;
}
.woocommerce-Tabs-panel--description .ds-read-more-content.expanded::after {
  display: none;
}
</style>