Дополнительное поле редактор для категорий WooCommerce

Добавляем в function.php код.

Код

/**Дополнительное описание для категорий Woocommerce **/
add_action( 'product_cat_edit_form_fields', 'wpm_taxonomy_edit_meta_field', 10, 2 );
function wpm_taxonomy_edit_meta_field($term) {
$t_id = $term->term_id;
$term_meta = get_option( "taxonomy_$t_id" );
$content = $term_meta['custom_term_meta'] ? wp_kses_post( $term_meta['custom_term_meta'] ) : '';
$settings = array( 'textarea_name' => 'term_meta[custom_term_meta]' );
?>
<tr class="form-field">
<th scope="row" valign="top"><label for="term_meta[custom_term_meta]">Дополнительное описание</label></th>
<td>
<?php wp_editor( $content, 'product_cat_details', $settings ); ?>
</td>
</tr>
<?php
}
add_action( 'edited_product_cat', 'save_taxonomy_custom_meta', 10, 2 );
add_action( 'create_product_cat', 'save_taxonomy_custom_meta', 10, 2 );
function save_taxonomy_custom_meta( $term_id ) {
if ( isset( $_POST['term_meta'] ) ) {
$t_id = $term_id;
$term_meta = get_option( "taxonomy_$t_id" );
$cat_keys = array_keys( $_POST['term_meta'] );
foreach ( $cat_keys as $key ) {
if ( isset ( $_POST['term_meta'][$key] ) ) {
$term_meta[$key] = wp_kses_post( stripslashes($_POST['term_meta'][$key]) );
}
}
update_option( "taxonomy_$t_id", $term_meta );
}
}

Теперь что бы вывести его на странице вставляем код.

Код

<?php
					$t_id = get_queried_object()->term_id;
					$term_meta = get_option( "taxonomy_$t_id" );
					$term_meta_content = $term_meta['custom_term_meta'];
					if ( $term_meta_content != '' ) {
					if ( is_tax( array( 'product_cat', 'product_tag' ) ) && 0 === absint( get_query_var( 'paged' ) ) ) {
					echo '<div class="woo-sc-box normal rounded full">';
					echo apply_filters( 'the_content', $term_meta_content );
					echo '</div>';
					}
					}	
					?>

На этом все.

Далее рассмотрим пример того как сделать, что бы этот текст красиво раскрывался и скрывался. Пример основан на том, как я осуществил это на сайте RussianWool. Там я делал так, что раскрывающейся блок collapse не закрывался до конца, и под ним в зависимости от состояния менялась ссылка "Раскрыть" и "Свернуть", и плюс к блоку collapse приятный градиент прозрачности внизу при свернутом виде.

HTML

			<div class="container-001">
				<div class="container-001-content">
					<p class="container-001__maintext" style="text-transform: uppercase;"><?php woocommerce_page_title(); ?></p>
					
					<?php
					$t_id = get_queried_object()->term_id;
					$term_meta = get_option( "taxonomy_$t_id" );
					$term_meta_content = $term_meta['custom_term_meta'];
					if ( $term_meta_content != '' ) {
					if ( is_tax( array( 'product_cat', 'product_tag' ) ) && 0 === absint( get_query_var( 'paged' ) ) ) {
					?>
					<div class="collapse" id="collapseCatDesc">
						<div class="card card-body">
							
							<?php
							echo '<div class="container-001__collapsetext woo-sc-box normal rounded full">';
							echo apply_filters( 'the_content', $term_meta_content );
							echo '</div>';
							?>
							
						</div>
					</div>
					<div class="container-001__collapselink">
						<div class="container-001__collapselink-over"></div>
						<a class="container-001__collapselink-lnk" data-bs-toggle="collapse" href="#collapseCatDesc" role="button" aria-expanded="false" aria-controls="collapseCatDesc">
							Раскрыть
						</a>
					</div>
					<?php
					}
					}	
					?>
					
					<div class="container-001__items">
						
					<?php
					if ( woocommerce_product_loop() ) {

						woocommerce_product_loop_start();

						if ( wc_get_loop_prop( 'total' ) ) {
							while ( have_posts() ) {
								the_post();
								do_action( 'woocommerce_shop_loop' );
								wc_get_template_part( 'content', 'product' );
							}
						}

						woocommerce_product_loop_end();

						do_action( 'woocommerce_after_shop_loop' );
					} else {
						do_action( 'woocommerce_no_products_found' );
					}

					do_action( 'woocommerce_after_main_content' );
					?>

					</div>
				</div>
			</div>

CSS

.container-001__collapsetext p {
    margin: 0;
    font-family: 'Roboto-Regular';
    font-size: 15px;
    line-height: 1.2;
    color: #364B55;
    text-align: justify;}
.container-001__collapselink {
	position: relative;
	margin: 0 0 20px 0;}
.container-001__collapselink a.container-001__collapselink-lnk {
	text-decoration: none;
    font-family: 'Roboto-Regular';
    font-weight: 700;
    font-size: 14px;
    color: #777;
    text-transform: uppercase;
    padding: 10px 5px;
    transition: 0.5s;}
.container-001__collapselink a.container-001__collapselink-lnk:hover {
    color: #baa063;
    transition: 0.5s;}
.container-001__collapselink-over {
	position: absolute;
    top: -15px;
    width: 100%;
    height: 20px;
    background: linear-gradient(0deg, #ffffff, #ffffff00);}
.collapselink-over-hidden {
	display: none;}
.container-001-content .collapse:not(.show) {
	height: 140px;
    display: block;
	overflow: hidden;}
.container-001-content .collapsing {
	min-height: 140px;
	overflow: hidden;}

JS

<script>
$('#collapseCatDesc').on('shown.bs.collapse', function () {
	$('.container-001__collapselink-over').addClass('collapselink-over-hidden');
	$('a.container-001__collapselink-lnk').text('Свернуть');
});

$('#collapseCatDesc').on('hidden.bs.collapse', function () {
	$('.container-001__collapselink-over').removeClass('collapselink-over-hidden');
   	$('a.container-001__collapselink-lnk').text('Раскрыть');
});
</script>