{"id":4110,"date":"2026-01-02T00:54:49","date_gmt":"2026-01-02T00:54:49","guid":{"rendered":"https:\/\/cachsudung.com\/?p=4110"},"modified":"2026-01-02T00:54:49","modified_gmt":"2026-01-02T00:54:49","slug":"code-thu-gon-noi-dung","status":"publish","type":"post","link":"https:\/\/how.congdongso.net\/en\/code-to-collect-content\/","title":{"rendered":"The code condenses product details and categories on Flatsome"},"content":{"rendered":"<p style=\"text-align: justify;\"><a href=\"https:\/\/how.congdongso.net\/code-thu-gon-noi-dung\/\"><strong>Code condenses content<\/strong><\/a> is one of the common techniques used in programming to make code more concise and easier to understand. Instead of using many lines of code to perform a specific function, we can use some techniques such as abbreviation or code reuse to reduce the amount of code that has to be written. This helps make the source code more compact, easier to read and maintain.<\/p>\n<p style=\"text-align: justify;\">In this article, we will learn about the techniques <strong>code to collapse content<\/strong> and how to apply them to our website. Or you can also find more content at <a href=\"https:\/\/how.congdongso.net\/code\/\" target=\"_blank\" rel=\"noopener\"><strong>Code<\/strong><\/a> or <a href=\"https:\/\/how.congdongso.net\/wordpress\/\" target=\"_blank\" rel=\"noopener\"><strong>Code wordpress<\/strong><\/a><\/p>\n<p style=\"text-align: justify;\"><strong>Note.<\/strong> This content reduction code can only be used on the Flatsome interface and cannot be used on other interfaces. Please check carefully before using.<\/p>\n<figure id=\"attachment_4095\" aria-describedby=\"caption-attachment-4095\" style=\"width: 1511px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-4095\" src=\"https:\/\/how.congdongso.net\/wp-content\/uploads\/2023\/03\/code-hien-thi-khuyen-mai-dep-cho-flatsome-1.jpg\" alt=\"Code condenses content\" width=\"1521\" height=\"341\" title=\"\" srcset=\"https:\/\/how.congdongso.net\/wp-content\/uploads\/2023\/03\/code-hien-thi-khuyen-mai-dep-cho-flatsome-1.jpg 1521w, https:\/\/how.congdongso.net\/wp-content\/uploads\/2023\/03\/code-hien-thi-khuyen-mai-dep-cho-flatsome-1-300x67.jpg 300w, https:\/\/how.congdongso.net\/wp-content\/uploads\/2023\/03\/code-hien-thi-khuyen-mai-dep-cho-flatsome-1-1024x230.jpg 1024w, https:\/\/how.congdongso.net\/wp-content\/uploads\/2023\/03\/code-hien-thi-khuyen-mai-dep-cho-flatsome-1-768x172.jpg 768w\" sizes=\"auto, (max-width: 1521px) 100vw, 1521px\" \/><figcaption id=\"caption-attachment-4095\" class=\"wp-caption-text\">Code to condense content for flatsome<\/figcaption><\/figure>\n<p style=\"text-align: justify;\">Because this code only collapses the content, if you want this content section to be moved below the product, see this article: <a href=\"https:\/\/how.congdongso.net\/cach-dua-mo-ta-d\u2026ng-duoi-san-pham\/\" target=\"_blank\" rel=\"noopener\"><strong>How to put category descriptions below products<\/strong><\/a> Please<\/p>\n<p><strong>see more<\/strong><\/p>\n<ul>\n<li><a href=\"https:\/\/hocdohoacaptoc.com\/khoa-hoc-thiet-ke-website-bang-wordpress\/\" target=\"_blank\" rel=\"noopener\">Course on website management using wordpress<\/a><\/li>\n<li><a href=\"https:\/\/how.congdongso.net\/code-hien-thi-khuyen-mai-dep-cho-flatsome\/\" target=\"_blank\" rel=\"noopener\">The code shows nice promotions for flatsome like Cellphones<\/a><\/li>\n<li><a href=\"https:\/\/how.congdongso.net\/dich-vu-thiet-ke-website-chuan-seo\/\" target=\"_blank\" rel=\"noopener\">Website design service according to SEO standards, good conversion<\/a><\/li>\n<li><a href=\"https:\/\/how.congdongso.net\/playground-open-ai\/\" target=\"_blank\" rel=\"noopener\">How to create automated content using the free Playground Open Ai<\/a><\/li>\n<li><a href=\"https:\/\/how.congdongso.net\/dich-vu-quan-tri-website\/\" target=\"_blank\" rel=\"noopener\">Website management services effectively take care of websites<\/a><\/li>\n<\/ul>\n<p><span style=\"font-family: inherit; font-size: 35px; font-style: inherit;\">The code collapses the content in the product details section<\/span><\/p>\n<div class=\"line number1 index0 alt2\">\n<figure id=\"attachment_4137\" aria-describedby=\"caption-attachment-4137\" style=\"width: 950px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-4137\" src=\"https:\/\/how.congdongso.net\/wp-content\/uploads\/2023\/03\/code-thu-gon-noi-dung-hien-thi.jpg\" alt=\"The code collapses the displayed content\" width=\"960\" height=\"541\" title=\"\" srcset=\"https:\/\/how.congdongso.net\/wp-content\/uploads\/2023\/03\/code-thu-gon-noi-dung-hien-thi.jpg 960w, https:\/\/how.congdongso.net\/wp-content\/uploads\/2023\/03\/code-thu-gon-noi-dung-hien-thi-300x169.jpg 300w, https:\/\/how.congdongso.net\/wp-content\/uploads\/2023\/03\/code-thu-gon-noi-dung-hien-thi-768x433.jpg 768w\" sizes=\"auto, (max-width: 960px) 100vw, 960px\" \/><figcaption id=\"caption-attachment-4137\" class=\"wp-caption-text\">The code collapses the displayed content<\/figcaption><\/figure>\n<p style=\"text-align: justify;\">The code below allows you <strong>Collapse description content<\/strong> of product detail content on Flatsome. This code allows you to view more as well as collapse the content to its original state.<\/p>\n<p style=\"text-align: justify;\">This code can also customize the length of the content in the paragraph <strong><span class=\"hljs-attribute\">max-height<\/span>: <span class=\"hljs-number\">800px<\/span>;<\/strong> and <strong>let your_height = 800<\/strong>\u00a0current financial value is <strong>800. <\/strong>This is the length of the frame displaying the product description content. If you want your content to be long or short, you just need to adjust this parameter to suit your content.<\/p>\n<\/div>\n<div>\n<pre>add_action(&amp;#039;wp_footer&amp;#039;, &amp;#039;how_to_readmore_flatsome&amp;#039;); function how_to_readmore_flatsome() { ?&amp;gt;\r\n&lt;style&gt;\r\n.single-product div#tab-description {\r\noverflow: hidden;\r\nposition: relative;\r\npadding-bottom: 25px;\r\n}\r\n.fix_height {\r\nmax-height: 800px;\r\noverflow: hidden;\r\nposition: relative;\r\n}\r\n.single-product .tab-panels div#tab-description.panel:not(.active) {\r\nheight: 0 !important;\r\n}\r\n.how_to_readmore_flatsome {\r\ntext-align: center;\r\ncursor: pointer;\r\nposition: absolute;\r\nz-index: 10;\r\nbottom: 0;\r\nwidth: 100%;\r\nbackground: #fff;\r\n}\r\n.how_to_readmore_flatsome:before {\r\nheight: 55px;\r\nmargin-top: -45px;\r\ncontent: &quot;&quot;;\r\nbackground: linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%);\r\ndisplay: block;\r\n}\r\n.how_to_readmore_flatsome a {\r\ncolor: #318A00;\r\ndisplay: block;\r\n}\r\n.how_to_readmore_flatsome a:after {\r\ncontent: &#039;&#039;;\r\nwidth: 0;\r\nright: 0;\r\nborder-top: 6px solid #318A00;\r\nborder-left: 6px solid transparent;\r\nborder-right: 6px solid transparent;\r\ndisplay: inline-block;\r\nvertical-align: middle;\r\nmargin: -2px 0 0 5px;\r\n}\r\n.how_to_readmore_flatsome_less a:after {\r\nborder-top: 0;\r\nborder-left: 6px solid transparent;\r\nborder-right: 6px solid transparent;\r\nborder-bottom: 6px solid #318A00;\r\n}\r\n.how_to_readmore_flatsome_less:before {\r\ndisplay: none;\r\n}\r\n&lt;\/style&gt;\r\n\r\n&lt;script&gt;\r\n(function($) {\r\n$(document).ready(function() {\r\n$(window).on(&#039;load&#039;, function() {\r\nconst wrap = $(&#039;.single-product div#tab-description&#039;);\r\nif (wrap.length &gt; 0 &amp;&amp; wrap.height() &gt; 800) {\r\nwrap.addClass(&#039;fix_height&#039;).append(`\r\n&lt;div class=&quot;how_to_readmore_flatsome how_to_readmore_flatsome_more&quot;&gt;\r\n&lt;a title=&quot;Xem th&ecirc;m&quot; href=&quot;javascript:void(0);&quot;&gt;Xem th&ecirc;m&lt;\/a&gt;\r\n&lt;\/div&gt;\r\n&lt;div class=&quot;how_to_readmore_flatsome how_to_readmore_flatsome_less&quot; style=&quot;display: none;&quot;&gt;\r\n&lt;a title=&quot;Thu g\u1ecdn&quot; href=&quot;javascript:void(0);&quot;&gt;Thu g\u1ecdn&lt;\/a&gt;\r\n&lt;\/div&gt;\r\n`);\r\n\r\n$(&#039;body&#039;).on(&#039;click&#039;, &#039;.how_to_readmore_flatsome_more&#039;, function() {\r\nwrap.removeClass(&#039;fix_height&#039;);\r\n$(&#039;.how_to_readmore_flatsome_more&#039;).hide();\r\n$(&#039;.how_to_readmore_flatsome_less&#039;).show();\r\n});\r\n\r\n$(&#039;body&#039;).on(&#039;click&#039;, &#039;.how_to_readmore_flatsome_less&#039;, function() {\r\nwrap.addClass(&#039;fix_height&#039;);\r\n$(&#039;.how_to_readmore_flatsome_less&#039;).hide();\r\n$(&#039;.how_to_readmore_flatsome_more&#039;).show();\r\n});\r\n}\r\n});\r\n});\r\n})(jQuery);\r\n&lt;\/script&gt;\r\n&lt;?php }<\/pre>\n<\/div>\n<div>\n<p>If you do so <strong>section tab<\/strong> In the product details section of Flatsome, find and replace everything<\/p>\n<pre><strong>.single-product div#tab-description<\/strong><\/pre>\n<p style=\"text-align: left;\">wall<\/p>\n<pre><strong>.product-page-sections .product-section:nth-child(1) &gt; .row &gt; .large-10<\/strong><\/pre>\n<p>okay<\/p>\n<h2>The code condenses the description of the product category<\/h2>\n<p>When designing a sales website, the product catalog description is often one of the most important parts to attract customers and increase conversion rates. However, writing out detailed descriptions along with product images often results in the website&#039;s source code becoming bloated and difficult to read. Therefore, using content minification coding techniques is necessary to minimize the amount of code and help your website load faster. In this article, we will learn about the techniques <strong>Content collapsing code for the description of the product category<\/strong>, thereby creating a user-friendly and easy-to-maintain sales website.<\/p>\n<figure id=\"attachment_4125\" aria-describedby=\"caption-attachment-4125\" style=\"width: 1157px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-4125\" src=\"https:\/\/how.congdongso.net\/wp-content\/uploads\/2023\/03\/code-thu-gon-noi-dung.jpg\" alt=\"The code collapses the content in the product details section\" width=\"1167\" height=\"476\" title=\"\" srcset=\"https:\/\/how.congdongso.net\/wp-content\/uploads\/2023\/03\/code-thu-gon-noi-dung.jpg 1167w, https:\/\/how.congdongso.net\/wp-content\/uploads\/2023\/03\/code-thu-gon-noi-dung-300x122.jpg 300w, https:\/\/how.congdongso.net\/wp-content\/uploads\/2023\/03\/code-thu-gon-noi-dung-1024x418.jpg 1024w, https:\/\/how.congdongso.net\/wp-content\/uploads\/2023\/03\/code-thu-gon-noi-dung-768x313.jpg 768w\" sizes=\"auto, (max-width: 1167px) 100vw, 1167px\" \/><figcaption id=\"caption-attachment-4125\" class=\"wp-caption-text\">The code collapses the content in the product details section<\/figcaption><\/figure>\n<pre>add_action(&amp;#039;wp_footer&amp;#039;, &amp;#039;how_to_readmore_taxonomy_flatsome&amp;#039;); function how_to_readmore_taxonomy_flatsome() { if (is_woocommerce() &amp;amp;&amp;amp; is_tax(&amp;#039;product_cat&amp;#039;)): ?&amp;gt;\r\n&lt;style&gt;\r\n.term-description {\r\noverflow: hidden;\r\nposition: relative;\r\nmargin-bottom: 20px;\r\npadding-bottom: 25px;\r\n}\r\n.how_to_readmore_taxonomy_flatsome {\r\ntext-align: center;\r\ncursor: pointer;\r\nposition: absolute;\r\nz-index: 10;\r\nbottom: 0;\r\nwidth: 100%;\r\nbackground: #fff;\r\n}\r\n.how_to_readmore_taxonomy_flatsome:before {\r\nheight: 55px;\r\nmargin-top: -45px;\r\ncontent: &quot;&quot;;\r\nbackground: linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%);\r\n}\r\n.how_to_readmore_taxonomy_flatsome a {\r\ncolor: #318A00;\r\ndisplay: block;\r\n}\r\n.how_to_readmore_taxonomy_flatsome a:after {\r\ncontent: &#039;&#039;;\r\nwidth: 0;\r\nright: 0;\r\nborder-top: 6px solid #318A00;\r\nborder-left: 6px solid transparent;\r\nborder-right: 6px solid transparent;\r\ndisplay: inline-block;\r\nvertical-align: middle;\r\nmargin: -2px 0 0 5px;\r\n}\r\n.how_to_readmore_taxonomy_flatsome_less a:after {\r\nborder-top: 0;\r\nborder-left: 6px solid transparent;\r\nborder-right: 6px solid transparent;\r\nborder-bottom: 6px solid #318A00;\r\n}\r\n&lt;\/style&gt;\r\n\r\n&lt;script&gt;\r\n(function($) {\r\n$(document).ready(function() {\r\n$(window).on(&#039;load&#039;, function() {\r\nconst wrap = $(&#039;.term-description&#039;);\r\nconst your_height = 300;\r\n\r\nif (wrap.length &gt; 0 &amp;&amp; wrap.height() &gt; your_height) {\r\nwrap.css(&#039;height&#039;, your_height + &#039;px&#039;).append(`\r\n&lt;div class=&quot;how_to_readmore_taxonomy_flatsome how_to_readmore_taxonomy_flatsome_show&quot;&gt;\r\n&lt;a title=&quot;Xem th&ecirc;m&quot; href=&quot;javascript:void(0);&quot;&gt;Xem th&ecirc;m&lt;\/a&gt;\r\n&lt;\/div&gt;\r\n&lt;div class=&quot;how_to_readmore_taxonomy_flatsome how_to_readmore_taxonomy_flatsome_less&quot; style=&quot;display: none;&quot;&gt;\r\n&lt;a title=&quot;Thu g\u1ecdn&quot; href=&quot;javascript:void(0);&quot;&gt;Thu g\u1ecdn&lt;\/a&gt;\r\n&lt;\/div&gt;\r\n`);\r\n\r\n$(&#039;body&#039;).on(&#039;click&#039;, &#039;.how_to_readmore_taxonomy_flatsome_show&#039;, function() {\r\nwrap.removeAttr(&#039;style&#039;);\r\n$(&#039;.how_to_readmore_taxonomy_flatsome_show&#039;).hide();\r\n$(&#039;.how_to_readmore_taxonomy_flatsome_less&#039;).show();\r\n});\r\n\r\n$(&#039;body&#039;).on(&#039;click&#039;, &#039;.how_to_readmore_taxonomy_flatsome_less&#039;, function() {\r\nwrap.css(&#039;height&#039;, your_height + &#039;px&#039;);\r\n$(&#039;.how_to_readmore_taxonomy_flatsome_show&#039;).show();\r\n});\r\n}\r\n});\r\n});\r\n})(jQuery);\r\n&lt;\/script&gt;\r\n&lt;?php endif; \r\n}<\/pre>\n<p>See more\u2026 <strong><a href=\"https:\/\/how.congdongso.net\/cach-dua-mo-ta-danh-muc-xuong-duoi-san-pham\/\" target=\"_blank\" rel=\"noopener\">The code puts the description of the category content below the product<\/a>\u00a0<\/strong><\/p>\n<p>You find the line that says <strong>var your_height = 300\u00a0<\/strong>valuable is\u00a0<strong>300<\/strong>, this is the height of the product category description frame. You can change the value <strong>300\u00a0<\/strong>to match the height of your website.<\/p>\n<h2>Instructions for inserting code to reduce content on Flatsome<\/h2>\n<h3>Step 1: Log in to the website<\/h3>\n<p>You need to log in with the highest administrative rights to insert code into your website.<\/p>\n<h3>Step 2: Insert code<\/h3>\n<p>Please follow the following link to safely insert code without losing it when updating the interface. <strong>Interface &gt; Theme file Editor &gt; Functions.php<\/strong> then paste the above code here.<\/p>\n<p><strong>Note:<\/strong> You must choose <strong>Flatsome child<\/strong> so that when updating the interface, the code is not lost<\/p>\n<figure id=\"attachment_4133\" aria-describedby=\"caption-attachment-4133\" style=\"width: 1037px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-4133\" src=\"https:\/\/how.congdongso.net\/wp-content\/uploads\/2023\/03\/code-thu-gon-noi-dung-chi-tiet-san-pham-1.jpg\" alt=\"Insert content collapsing code on Flatsome\" width=\"1047\" height=\"494\" title=\"\" srcset=\"https:\/\/how.congdongso.net\/wp-content\/uploads\/2023\/03\/code-thu-gon-noi-dung-chi-tiet-san-pham-1.jpg 1047w, https:\/\/how.congdongso.net\/wp-content\/uploads\/2023\/03\/code-thu-gon-noi-dung-chi-tiet-san-pham-1-300x142.jpg 300w, https:\/\/how.congdongso.net\/wp-content\/uploads\/2023\/03\/code-thu-gon-noi-dung-chi-tiet-san-pham-1-1024x483.jpg 1024w, https:\/\/how.congdongso.net\/wp-content\/uploads\/2023\/03\/code-thu-gon-noi-dung-chi-tiet-san-pham-1-768x362.jpg 768w\" sizes=\"auto, (max-width: 1047px) 100vw, 1047px\" \/><figcaption id=\"caption-attachment-4133\" class=\"wp-caption-text\">Insert content collapsing code on Flatsome<\/figcaption><\/figure>\n<h2>summary<\/h2>\n<p>In short, <strong>Code to condense product content and code to condense product category content<\/strong> is an important technique in programming that makes your content concise, easier to read, and easier to maintain. Using techniques such as abbreviation or code reuse helps us save time and effort in writing code.<\/p>\n<p>In particular, when building a website or application, content compact code also helps the website load faster and increase user experience. Therefore, understanding and applying content reduction code techniques will help us become better programmers and create higher quality products.<\/p>\n<\/div>","protected":false},"excerpt":{"rendered":"<p>Code thu g\u1ecdn n\u1ed9i dung l\u00e0 m\u1ed9t trong nh\u1eefng k\u1ef9 thu\u1eadt ph\u1ed5 bi\u1ebfn \u0111\u01b0\u1ee3c s\u1eed d\u1ee5ng trong l\u1eadp tr\u00ecnh \u0111\u1ec3 l\u00e0m cho \u0111o\u1ea1n m\u00e3 tr\u1edf n\u00ean ng\u1eafn g\u1ecdn v\u00e0 d\u1ec5 hi\u1ec3u h\u01a1n. Thay v\u00ec s\u1eed d\u1ee5ng nhi\u1ec1u d\u00f2ng m\u00e3 \u0111\u1ec3 th\u1ef1c hi\u1ec7n m\u1ed9t ch\u1ee9c n\u0103ng c\u1ee5 th\u1ec3, ch\u00fang ta c\u00f3 th\u1ec3 s\u1eed d\u1ee5ng m\u1ed9t s\u1ed1 &hellip;<\/p>","protected":false},"author":2,"featured_media":12660,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[9],"tags":[176,182],"class_list":["post-4110","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-code","tag-code-hay","tag-code-thu-gon-noi-dung"],"_links":{"self":[{"href":"https:\/\/how.congdongso.net\/en\/wp-json\/wp\/v2\/posts\/4110","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/how.congdongso.net\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/how.congdongso.net\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/how.congdongso.net\/en\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/how.congdongso.net\/en\/wp-json\/wp\/v2\/comments?post=4110"}],"version-history":[{"count":1,"href":"https:\/\/how.congdongso.net\/en\/wp-json\/wp\/v2\/posts\/4110\/revisions"}],"predecessor-version":[{"id":21076,"href":"https:\/\/how.congdongso.net\/en\/wp-json\/wp\/v2\/posts\/4110\/revisions\/21076"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/how.congdongso.net\/en\/wp-json\/wp\/v2\/media\/12660"}],"wp:attachment":[{"href":"https:\/\/how.congdongso.net\/en\/wp-json\/wp\/v2\/media?parent=4110"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/how.congdongso.net\/en\/wp-json\/wp\/v2\/categories?post=4110"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/how.congdongso.net\/en\/wp-json\/wp\/v2\/tags?post=4110"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}