Product categories description

Move description to the bottom

A common change is to move the category description to the bottom of the page to display the products as higher as possible.

Add this snippet in wp-content/themes/goya-child/functions.php

function goya_move_product_archive_description() {
  remove_action( 'woocommerce_archive_description', 'woocommerce_taxonomy_archive_description', 10 );
  remove_action( 'woocommerce_archive_description', 'woocommerce_product_archive_description', 10 );

  add_action( 'woocommerce_after_main_content', 'woocommerce_taxonomy_archive_description', 9 );
  add_action( 'woocommerce_after_main_content', 'woocommerce_product_archive_description', 9 );
}
add_action( 'after_setup_theme', 'goya_move_product_archive_description' );Code language: JavaScript (javascript)

Then, paste the CSS part either to Appearance > Customize > Additional CSS or the child theme style.css

.term-description,
.shop-intro-text {
  margin: 50px auto;
  max-width: 768px;
  line-height: 1.6;
}Code language: CSS (css)

Add second description to category

If you want both the original description at the top of the page and an additional area for more content at the bottom then you can add a second description area.

Add this snippet in wp-content/themes/goya-child/functions.php

add_action( 'product_cat_add_form_fields', 'custom_wp_editor_add', 10, 2 );
 
function custom_wp_editor_add() { ?>
 <div class="form-field">
  <label for="seconddesc"><?php echo __( 'Second Description', 'woocommerce' ); ?></label>
  <?php 
  $settings = array('wpautop' => true, 'media_buttons' => true, 'quicktags' => true, 'textarea_rows' => '15', 'textarea_name' => 'seconddesc' );  
  wp_editor(html_entity_decode(get_term_meta( $term->term_id, 'seconddesc', true ), ENT_QUOTES, 'UTF-8'), 'seconddesc', $settings);
   ?>
  <p class="description"><?php echo __( 'This is the description that goes BELOW products on the category page', 'woocommerce' ); ?></p>
 </div>
 <?php
}
 
add_action( 'product_cat_edit_form_fields', 'custom_wp_editor_edit', 10, 2 );
 
function custom_wp_editor_edit( $term ) {
 $second_desc = htmlspecialchars_decode( get_term_meta( $term->term_id, 'seconddesc', true ) );
 ?>
 <tr class="form-field">
  <th scope="row" valign="top"><label for="second-desc"><?php echo __( 'Second Description', 'woocommerce' ); ?></label></th>
  <td>
   <?php 
   $settings = array('wpautop' => true, 'media_buttons' => true, 'quicktags' => true, 'textarea_rows' => '15', 'textarea_name' => 'seconddesc' );  
   wp_editor(html_entity_decode(get_term_meta( $term->term_id, 'seconddesc', true ) , ENT_QUOTES, 'UTF-8'), 'seconddesc', $settings);
    ?>
  <p class="description"><?php echo __( 'This is the description that goes BELOW products on the category page', 'woocommerce' ); ?></p>
  </td>
 </tr>
 <?php
}
 
add_action( 'edit_term', 'custom_save_wp_editor', 10, 3 );
add_action( 'created_term', 'custom_save_wp_editor', 10, 3 );
 
function custom_save_wp_editor( $term_id, $tt_id = '', $taxonomy = '' ) {
 if ( isset( $_POST['seconddesc'] ) && 'product_cat' === $taxonomy ) {
 update_woocommerce_term_meta( $term_id, 'seconddesc', esc_attr( $_POST['seconddesc'] ) );
 }
}
 
add_action( 'woocommerce_after_main_content', 'custom_display_wp_editor_content', 5 );
 
function custom_display_wp_editor_content() {
 if ( is_product_taxonomy() ) {
 $term = get_queried_object();
 if ( $term && ! empty( get_term_meta( $term->term_id, 'seconddesc', true ) ) ) {
  echo '<div class="term-description extra-description">' . wc_format_content( html_entity_decode( get_term_meta( $term->term_id, 'seconddesc', true ) ) ) . '</div>';
 }
 }
}Code language: HTML, XML (xml)

Make description collapsible with read more button

First, paste this code to wp-content/themes/goya-child/functions.php

add_action('wp_footer','woocommerce_js');
function woocommerce_js() { ?>
<script>
 jQuery(document).ready(function($) {
  $('.term-description, .shop-intro-text').append('<div class="expand-description"><a href="#" class="button">Read More</a></div>');
  $('.term-description, .shop-intro-text').on('click', '.expand-description .button', function(){
   $(this).closest('.term-description, .shop-intro-text').toggleClass('expanded');
  });
 });
</script>
<?php }Code language: JavaScript (javascript)

Then, paste the CSS part either to Appearance > Customize > Additional CSS or the child theme style.css

.term-description .expand-description,
.shop-intro-text .expand-description {
 display: none;
}
.term-description, 
.shop-intro-text {
 height: 80px;
 overflow: hidden;
 position: relative;
 transition: all .15s linear;
}
.term-description:after,
.shop-intro-text:after {
 content: '';
 display: block;
 z-index: 1;
 width: 100%;
 height: 50px;
 position: absolute;
 bottom: 0;
 background-image: linear-gradient(180deg, rgba(255,255,255,0), rgba(255,255,255,1));
}
.term-description .expand-description,
.shop-intro-text .expand-description {
 display: flex;
 position: absolute;
 bottom: 0;
 left: 0;
 width: 100%;
 z-index: 2;
 height: 40px;
 text-align: center;
 justify-content: center;
 align-items: center;
}
.term-description .expand-description a,
.shop-intro-text .expand-description a {
 border: 1px solid #000;
 padding: 3px 8px;
 border-radius: 3px;
 background: #fff;
 color: #000;
 line-height: 20px;
}
.term-description.expanded, 
.shop-intro-text.expanded {
 height: auto;
 padding-bottom: 50px;
}
.term-description.expanded:after,
.shop-intro-text.expanded:after {
 display: none;
}
Code language: CSS (css)

Adjust the CSS to your needs.