WooCommerce中的产品归档描述，带有更多标记

Posted 2021-03-26

是否可以在WooCommerce存档描述中添加更多标签？我找到了一些解决方案，但它们都是针对单个产品页面的，例如这个solution。找不到在存档页面上完成此操作的方法。我希望在移动设备上获得更多标签，否则内容会变长并且产品在开始时不会显示。

这是我目前的代码，放在category.php中

      <div class="nm-shop-title">
        <div class="nm-row"> 
            <div class="col-xs-12">
                 <h1 class="cat-title"><?php woocommerce_page_title(); ?></h1>
                   <?php 
                        /**
                         * woocommerce_archive_description hook
                         *
                         * @hooked woocommerce_taxonomy_archive_description - 10
                         * @hooked woocommerce_product_archive_description - 10
                         */
                        do_action( 'woocommerce_archive_description' );
                    ?>
            </div>
        </div>
    </div>

答案

我找到了一个解决方案，对我很有用。

我用一点点JQuery修复它。应使用data-js =“content”属性触发显示更多链接的文本。例如

<p data-js="content"> This is the Text where it should appear></p>

使用下面的JQuery，我正在触发触发器。因此它仅在移动设备上显示，并且仅在段落的点处具有data-js =“content”属性。

if(window.outerWidth < 991) {
// Select all text areas
var textArea = document.querySelectorAll('[data-js=content]'),    
    maxText = 100;

// For each one...
[].forEach.call( textArea, function( el ) {

  var textAreaLength = el.innerhtml.length,
    teaserText = el.innerHTML.substr(0, 100),
    fullText = el.innerHTML,
    showTeaser = false;    

  // Check to see if this text length is more
  // than the max
  if (textAreaLength >= maxText) {
    // Set flag
    showTeaser = true;

    // Set teaser text  
    el.innerHTML = teaserText;
    el.innerHTML += '...';

    // Create button
    var button = document.createElement('button');
    button.innerHTML = 'Mehr anzeigen';
    button.classList.add('button');
    el.appendChild(button);

    // Button click event
    button.onclick = function () {
      if (showTeaser === true) {
        // Update flag
        showTeaser = false;

        // Update button text
        this.innerHTML = 'Weniger anzeigen';

        // Show full text
        el.innerHTML = fullText;

        // Re-append the button
        el.appendChild(this);
      } else {
        // Update flag
        showTeaser = true;

        // Update button text
        this.innerHTML = 'Mehr anzeigen';

        // Show teaser text
        el.innerHTML = teaserText;
        el.innerHTML += '...';

        // Re-append the button
        el.appendChild(this);
      }
      return false;
    };
  } else { 
    // Show full text
    el.innerHTML = fullText;
  }   

});
}

另一答案

如果您的代码在产品循环中，请尝试删除do_action( 'woocommerce_archive_description' );并将其添加到标题下方。

<a href="<?php echo get_the_permalink(); ?>"><?php _e('read more', 'woocommerce');?></a>

这将显示一个读取更多链接，该链接将重定向到您的产品。