Home Forums WoodMart support forum Adding “Read more” button to categories description

Adding “Read more” button to categories description

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #435757

    justas404
    Participant

    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?

    #435831

    Luke Nielsen
    Keymaster

    Hello,

    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

Viewing 2 posts - 1 through 2 (of 2 total)