Home › Forums › WoodMart support forum › Adding “Read more” button to categories description
Adding “Read more” button to categories description
- This topic has 1 reply, 2 voices, and was last updated 1 year, 9 months ago by Luke Nielsen.
-
AuthorPosts
-
January 17, 2023 at 1:01 pm #435757
justas404ParticipantHello,
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?
January 17, 2023 at 4:28 pm #435831
Luke NielsenKeymasterHello,
We have such functionality for the sections/rows, more detail in the below documentation.
https://xtemos.com/docs-topic/read-more-button-for-text-or-section-row/
In your case, you can create such a section with the “Read More” button and define it in the HTML Block that will be shown in some category.
https://monosnap.com/file/n0IpNxUMqSYp9wFMT8hYI7LJbJFYFj
https://monosnap.com/file/jNVqtvvp7CRzfaiQTjxvLoRxiu0dRY
Kind Regards
-
AuthorPosts
- You must be logged in to create new topics. Login / Register