Woocommerce php函数仅在wordpress中使用customiser时起作用-在使用前端时不起作用

我正在使用我在bbloomer（Rudolfo）网站上找到的一个函数。“截断单个产品页面上的简短描述”。然而，它的方法是基于woocommerce中的short-description.php文件。在该文件中，该类已经由woocommerce添加，并在我的网站上测试时使用该函数。我不使用这个网站的简短描述，所以我想把它应用到标签式的产品描述中……因为我的标签是公开的（总是显示），而不是实际的标签

为了使它与“description”（description.php文件）一起工作，我添加了自定义类并将其与代码匹配。它工作，并显示了一个“显示更多”按钮，您可以点击，然后显示其余的描述问题：它只在wordpress customizer中从后端测试时有效，在前端使用/验证时有效…它显示“显示更多”按钮，蓝色高位，但…无法单击它，并且没有响应

我试过3种不同的浏览器，结果都一样

为了添加代码片段，我使用了代码片段插件

直接添加到description.php页面的自定义类：注意：在单个产品->选项卡文件夹->description.php中找到

<div class="woocommerce-product-details__description">
<?php the_content(); ?>
</div>

这是我正在使用和编辑的代码片段，以匹配类：

add_action( 'woocommerce_after_single_product',
'bbloomer_woocommerce_short_description_truncate_read_more' );

function bbloomer_woocommerce_short_description_truncate_read_more() { 
   wc_enqueue_js('
    var show_char = 100;
    var ellipses = "... ";
    var content = $(".woocommerce-product-details__description").html();
  if (content.length > show_char) {
     var a = content.substr(0, show_char);
     var b = content.substr(show_char - content.length);
     var html = a + "<span class=\'truncated\'>" + ellipses + "<a class=\'read-more\'>Show more</a></span><span class=\'truncated\' style=\'display:none\'>" + b + "</span>";
     $(".woocommerce-product-details__description").html(html);
  }
  $(".read-more").click(function(e) {
     e.preventDefault();
     $(".woocommerce-product-details__description .truncated").toggle();
      });
   ');
}

add_action（'woocommerce_在单个产品之后，'，
“bbloomer\u woodcommerce\u short\u description\u truncate\u read\u more”）；
函数bbloomer\u woocommerce\u short\u description\u truncate\u read\u more（）{
wc_enqueue_js（'
var show_char=100；
var ellipses=“…”；
var content=$（“.woocommerce-product-details_u_description”）.html（）；
如果（content.length>显示字符）{
var a=content.substr（0，show_char）；
var b=content.substr（show_char-content.length）；
var html=a+“”+省略号+“显示更多”+b+“”；
$（.woocommerce-product-details\uuuu description”）.html（html）；
}
$（“.read more”）。单击（函数（e）{
e、 预防默认值（）；
$（“.woocommerce-product-details__description.truncated”）.toggle（）；
});
');
}

注意：代码片段插件有运行代码的选项，我总是选择“无处不在”。您只能在后端运行，但我不是这样。 有没有人知道如何将其应用于前端？我从未遇到过这种问题

---

提前感谢您的输入：）

解决方案：是CSS重叠问题。然而，我给出了z指数：1，并且忘记了告诉自己这将是最重要的，这意味着问题应该在其他地方。嗯，问题解决了。我将把这篇文章留下，这样其他人就可以修改这段代码，就像我必须处理description.php文件，而不仅仅是short-description.php文件一样

感谢您阅读：）

add_action( 'woocommerce_after_single_product',
'bbloomer_woocommerce_short_description_truncate_read_more' );

function bbloomer_woocommerce_short_description_truncate_read_more() { 
   wc_enqueue_js('
    var show_char = 100;
    var ellipses = "... ";
    var content = $(".woocommerce-product-details__description").html();
  if (content.length > show_char) {
     var a = content.substr(0, show_char);
     var b = content.substr(show_char - content.length);
     var html = a + "<span class=\'truncated\'>" + ellipses + "<a class=\'read-more\'>Show more</a></span><span class=\'truncated\' style=\'display:none\'>" + b + "</span>";
     $(".woocommerce-product-details__description").html(html);
  }
  $(".read-more").click(function(e) {
     e.preventDefault();
     $(".woocommerce-product-details__description .truncated").toggle();
      });
   ');
}