Hello,
I’ve started seo optimisation and I want to add/expand descriptions of product categories. The problem is that descriptions can take large space and you have to scroll to see products/brands (bad ux). Woodmart theme has one setting – to move descriptions to the bottom. However, more user friendly approach would be to add “Read more” button after certain amount of characters/after exceeding certain amount of height. Since your theme currently doesn’t include this feature, I added this code to Woodmart child theme’s functions.php file:
add_action( 'woocommerce_after_main_content', 'woocommerce_after_main_content', 10 );
function woocommerce_after_main_content() {
if ( !is_product_category() ) return;
?>
<script>
jQuery( function( $ ) {
$(document).ready(function() {
//Get current height of the description container
let curHeight = $("header .term-description").height();
//Set heigth of the description container
$("header .term-description").css({
"height": "50px",
"overflow": "hidden",
});
//Add 'Read more' button
$("header .term-description").after( "<button class='read-more' style='margin:15px 0;'>Read more</button>" );
//Set description container back to its original height
$( "header .read-more" ).on( "click", function() {
$("header .term-description").animate({height: curHeight});
});
});
});
</script>
<?php
}
However it doesn’t work. If I add vanilla javascript with the same target !is_product_category() it works. What would be possible fix to add “Read more” button?
.
