CODEWITHSUNDEEP
phpwordpresswoocommerce
p_e_88
p_e_88

Reputation: 1037

Product archive description in WooCommerce with a read more tag

is it possible to add a read more tag to a WooCommerce archive description? I found some solution for it, but they are all for the single product page, like for example this solution. Couldn't find a way to get this also done on the archive page. I would like to get the read more tag on mobile devices, cause otherwise the content would be to long and the products would't be visible at the beginning.

That's the code that i have at the moment, placed in the 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>

Upvotes: 2

Views: 1878

Answers (2)

p_e_88
p_e_88

Reputation: 1037

I found a solution, wich works for me pretty good.

I fixed it with a lil bit of JQuery. The Text where the read more link should appear, is triggered with a data-js="content" attribute. For example

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

With the JQuery below, i'm firing the trigger. So it's only showing on mobile devices and only at the point where the paragraph, has the data-js="content" attribute.

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;
  }   

});
}

Upvotes: 1

Mel
Mel

Reputation: 943

if your code is inside the products loop, try removing the do_action( 'woocommerce_archive_description' ); and add this below your title. 

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

This will display a read more link that will redirect to your product.

Upvotes: 0

Related Questions