- The condensed code describes the product category helps the SEO of the woocomerce category better and does not make it so long that users will leave if they don’t see the product. When the co
ntent is too lengthy, the product will be pushed down.
To be able to collapse without affecting the SEO of the category, copy the code below and paste it into the functions.php file in the WordPress interface or theme you are using.
/*
* The code condenses the description of the product category
* Author: https://domarketing24h.com
*/
add_action(‘wp_footer’,’forwordpress_readmore_taxonomy_flatsome’);
function forwordpress_readmore_taxonomy_flatsome(){
if(is_woocommerce() && is_tax(‘product_cat’)):
?>
<style>
.tax-product_cat.woocommerce .shop-container .term-description {
overflow: hidden;
position: relative;
margin-bottom: 20px;
padding-bottom: 25px;
}
.forwordpress_readmore_taxonomy_flatsome {
text-align: center;
cursor: pointer;
position: absolute;
z-index: 10;
bottom: 0;
width: 100%;
background: #fff;
}
.chowordpress_readmore_taxonomy_flatsome:before {
height: 55px;
margin-top: -45px;
Nội dung: “”;
background: -moz-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%);
background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%);
background: linear-gradient(to bottom, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=’#ffffff00′, endColorstr=’#ffffff’,GradientType=0 );
display: block;
}
.forwordpress_readmore_taxonomy_flatsome a {
color: #318A00;
display: block;
}
.chowordpress_readmore_taxonomy_flatsome a:after {
Nội dung: “;
width: 0;
right: 0;
border-top: 6px solid #318A00;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
display: inline-block;
vertical-align: middle;
margin: -2px 0 0 5px;
}
.chowordpress_readmore_taxonomy_flatsome_less:before {
display: none;
}
.forwordpress_readmore_taxonomy_flatsome_less a:after {
border-top: 0;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-bottom: 6px solid #318A00;
}
</style>
<script>
(function($){
$(document).ready(function(){
$(window).on(‘load’, function(){
if($(‘.tax-product_cat.woocommerce .shop-container .term-description’).length > 0){
var wrap = $(‘.tax-product_cat.woocommerce .shop-container .term-description’);
var current_height = wrap.height();
var your_height = 300;
if(current_height > your_height){
wrap.css(‘height’, your_height+’px’);
wrap.append(function(){
return ‘<div class=”chowordpress_readmore_taxonomy_flatsome chowordpress_readmore_taxonomy_flatsome_show”><a title=”See more” href=”javascript:void(0);”>See more</a></div>’;
});
wrap.append(function(){
return ‘<div class=”chowordpress_readmore_taxonomy_flatsome chowordpress_readmore_taxonomy_flatsome_less” style=”display: none”><a title=”Collapse” href=”javascript:void(0);”>Collapse</a></div>’;
});
$(‘body’).on(‘click’,’.chowordpress_readmore_taxonomy_flatsome_show’, function(){
wrap.removeAttr(‘style’);
$(‘body .chowordpress_readmore_taxonomy_flatsome_show’).hide();
$(‘body .chowordpress_readmore_taxonomy_flatsome_less’).show();
});
$(‘body’).on(‘click’,’.chowordpress_readmore_taxonomy_flatsome_less’, function(){
wrap.css(‘height’, your_height+’px’);
$(‘body .forwordpress_readmore_taxonomy_flatsome_show’).show();
$(‘body .chowordpress_readmore_taxonomy_flatsome_less’).hide();
});
}
}
});
});
})(jQuery);
</script>
<?php
endif;
}
Once you have successfully added the code to the website, you will get the result as shown below, with a view more and collapse button to help users easily refer to and SEO that category to the top.
Above, doshare you guides on how to collapse and create a button to see more of the best SEO support product categories. If you need any assistance, please leave a comment below and we will respond as soon as possible.