وب کمپ

سلام و عرض ادب

گاها توضیحات یک مقاله یا دسته بندی ووکامرسی به قدری زیاد است که شاید شما دوست نداشته باشید توضیحات زیاد در دسته بندی نشان دهید.

برای حل این مشکل می توان از طریق روش زیر اقدام کرد:

فایل زیر را ویرایش میکنیم:

product-category = wp-content/plugins/woocommerce/includes/wc-template-functions.php
product-tag = class-wc-template-loader.php

line 1253:
echo '<div class="term-description hideContent">' . wc_format_content( wp_kses_post( $term_description ) ) . '</div>';

code ro be morede zir tagir midim:
echo '<div class="term-description hideContent">' . wc_format_content( wp_kses_post( $term_description ) ) . '</div><div class="show-more-trigger">نمایش بیشتر</div>'; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped

حال کدهای زیر رو در بخشی از سایت لود میکنیم:

.cat-content.hideContent
{overflow:hidden;height:23em;position:relative;margin-bottom:29px}
.category-description-box .cat-content.showContent{height:auto}
.show-more-trigger{position:absolute;bottom:0;right:0;left:0;margin:12px auto;display:table;color:#2271eb;border-bottom:1px dashed #2271eb;cursor:pointer}


jQuery(document).ready(function ($) {
$(".show-more-trigger").on("click",function(){
var $this=$(this);
var $content=$('.cat-content');
var linkText=$this.text();
if(linkText==="نمایش بیشتر"){
	linkText="نمایش کمتر";
	$content.toggleClass("hideContent showContent");
} else{
	linkText="نمایش بیشتر";
	$content.toggleClass("showContent hideContent");
};
$this.text(linkText);
});
});

نمای کلی از چیزی که مد نظر هست:

<div class="cat-content hideContent">
<div>
<div class="show-more-trigger">نمایش بیشتر</div>


.cat-content.hideContent
{overflow:hidden;height:23em;position:relative;margin-bottom:29px}
.category-description-box .cat-content.showContent{height:auto}
.show-more-trigger{position:absolute;bottom:0;right:0;left:0;margin:12px auto;display:table;color:#2271eb;border-bottom:1px dashed #2271eb;cursor:pointer}


jQuery(document).ready(function ($) {
$(".show-more-trigger").on("click",function(){
var $this=$(this);
var $content=$('.cat-content');
var linkText=$this.text();
if(linkText==="نمایش بیشتر"){
	linkText="نمایش کمتر";
	$content.toggleClass("hideContent showContent");
} else{
	linkText="نمایش بیشتر";
	$content.toggleClass("showContent hideContent");
};
$this.text(linkText);
});
});

حالت دوم :

دو تا فایل زیر رو ادیت میکنیم:

product-category = wp-content/plugins/woocommerce/includes/wc-template-functions.php : line 1253
product-tag = wp-content/plugins/woocommerce/includes/class-wc-template-loader.php : line 380


wc-template-functions.php :
echo '<div class="term-description">' . wc_format_content( wp_kses_post( $term_description ) ) . '</div>';
TO: echo '<div class="term-description descbox">' . wc_format_content( wp_kses_post( $term_description ) ) . '<div class="expand-btn"><span>مشاهده بیشتر</span><i class="expand-arrow"></i></div></div>';

برای تگ ها هم بدین شکل انجام میدیم

در ویرایش فایل های بالا یه کلاس با نام descbox به دایو کلی اضافه شد، و قبل بسته شدن div کلی یه div برای نمایش دکمه بیشتر و کمتر هم اضافه شد

کد های CSS:

/* نمایش کوتاه توضیحات دسته بندی ووکامرس و اضافه کردن دکمه مشاهده بیشتر */
.expand-btn {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 39px;
    text-align: center;
    box-shadow: 0 0 50px 30px #fff;
    background: #fff;
    cursor: pointer;
}
.descbox {
    font-size: 14px;
    line-height: 29px;
    height: 100px;
    margin-bottom: 32px;
    overflow: hidden;
}
.expand-arrow {
    border-style: solid;
    border-color: #333;
    border-width: 0 2px 2px 0;
    display: inline-block;
    padding: 2px;
    margin: 0 0 2px;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}
.descbox.expand .expand-arrow {
    margin: 0 0 -2px;
    transform: rotate(-135deg);
    -webkit-transform: rotate(-135deg);
}
.descbox.expand {
    height: auto;
    min-height: 60px;
}
.expand-btn span {
    position: relative;
    padding-left: 6px;
    font-size: 14px;
}

کد های جاوا اسکریپت:

jQuery(document).ready(function ($) {
$(".expand-btn").click(function () {
   $(".descbox").toggleClass("expand", 300, "linear"), "مشاهده بیشتر" == $(".expand-btn span").text() ? $(".expand-btn span").text("بستن") : $(".expand-btn span").text("مشاهده بیشتر");
 })
});