” <\/strong>toggle, ensuring a cleaner and more user-friendly product page.<\/p>\n\n\n\nWhy Truncate?<\/h2>\n\n\n\n
When it comes to showcasing product information, brevity is often key. A concise product description provides a quick overview, enticing potential buyers to explore further. However, for those instances where additional details are necessary, a “Read More” option comes in handy, striking a balance between informativeness and a clutter-free interface.<\/p>\n\n\n\n
Truncate Short Description With \u201cRead More\u201d Toggle in WooCommerce<\/h2>\n\n\n\n
Truncate short description in WooCommerce with ease using a ‘Read More’ toggle. Enhance user experience and maintain a clean product page. Follow our step-by-step guide for seamless customization.<\/p>\n\n\n\n
Step 1:<\/strong> Log in to your WordPress admin panel. Go to “<\/strong>Appearance” <\/strong>-> “<\/strong>Theme Editor.“<\/strong><\/p>\n\n\n\nStep 2:<\/strong> Locate and select the “<\/strong>Theme Functions” <\/strong>file or functions.php<\/code> your child theme.<\/p>\n\n\n\nStep 3: <\/strong>Copy the provided PHP code and paste it at the end of the selected file.<\/p>\n\n\n\n\/*\n Description: Truncate Short Description @ WooCommerce Single Author: Mudassar Shakeel\n Websites:https:\/\/mcstarters.com\/\n*\/\n \nadd_action( 'woocommerce_after_single_product', 'mcstarters_woocommerce_short_description_truncate_read_more' );\n \nfunction mcstarters_woocommerce_short_description_truncate_read_more() { \n wc_enqueue_js( '\n var show_char = 40;\n var ellipses = \"... \";\n var content = $(\".woocommerce-product-details__short-description\").html();\n if (content.length > show_char) {\n var a = content.substr(0, show_char);\n var b = content.substr(show_char - content.length);\n var html = a + \"<span class=\\'truncated\\'>\" + ellipses + \"<a class=\\'read-more\\'>Read more<\/a><\/span><span class=\\'truncated\\' style=\\'display:none\\'>\" + b + \"<\/span>\";\n $(\".woocommerce-product-details__short-description\").html(html);\n }\n $(\".read-more\").click(function(e) {\n e.preventDefault();\n $(\".woocommerce-product-details__short-description .truncated\").toggle();\n });\n ' );\n}<\/code><\/pre>\n\n\n\nStep 4:<\/strong> Click the “Update File” button to save your changes.<\/p>\n\n\n\nAfter implementing the code, visit your WooCommerce product pages and ensure that the short descriptions are truncated as intended. <\/p>\n\n\n\n
Conclusions<\/h2>\n\n\n\n
Enhance the user experience on your WooCommerce store by implementing this “Read More” toggle for truncated short descriptions. Your customers will appreciate the clean design and easy access to additional product details. Happy selling!<\/p>\n\n\n\n
FAQs<\/h2>\n\n\n\n
\n
\n
What is the purpose of the “Read More” toggle?<\/h3>\n\n\n
The “Read More” toggle is a feature that allows users to view the full content of a truncated short description. By clicking the “Read More” link, additional text is revealed, giving customers the option to explore more details about the product without cluttering the initial view.<\/p>\n\n<\/div>\n<\/div>\n
\n
How to truncate long text and show the read more \/ less button?<\/h3>\n\n\n
Truncating long text and implementing a “Read More \/ Read Less” button in HTML and JavaScript can be achieved with a few lines of the above code.<\/p>\n\n<\/div>\n<\/div>\n<\/div>\n<\/div>","protected":false},"excerpt":{"rendered":"
How to Truncate Short Description With \u201cRead More\u201d Toggle in…<\/p>\n","protected":false},"author":2,"featured_media":32501,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kad_post_transparent":"","_kad_post_title":"","_kad_post_layout":"","_kad_post_sidebar_id":"","_kad_post_content_style":"","_kad_post_vertical_padding":"","_kad_post_feature":"","_kad_post_feature_position":"","_kad_post_header":false,"_kad_post_footer":false,"_kad_post_classname":"","footnotes":""},"categories":[68],"tags":[536],"class_list":["post-32489","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-woocommerce","tag-woocommerce-tips"],"_links":{"self":[{"href":"https:\/\/mcstarters.com\/blog\/wp-json\/wp\/v2\/posts\/32489","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/mcstarters.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/mcstarters.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/mcstarters.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/mcstarters.com\/blog\/wp-json\/wp\/v2\/comments?post=32489"}],"version-history":[{"count":0,"href":"https:\/\/mcstarters.com\/blog\/wp-json\/wp\/v2\/posts\/32489\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/mcstarters.com\/blog\/wp-json\/wp\/v2\/media\/32501"}],"wp:attachment":[{"href":"https:\/\/mcstarters.com\/blog\/wp-json\/wp\/v2\/media?parent=32489"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/mcstarters.com\/blog\/wp-json\/wp\/v2\/categories?post=32489"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/mcstarters.com\/blog\/wp-json\/wp\/v2\/tags?post=32489"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}