How to add Meta Title and Meta Description in WooCommerce category page

Question

I am using All in one SEO Pack plugin for Meta Title & Meta Description for my website. My website having WooCommerce and All in one SEO pack does not support Meta Title & Meta Description for WooCommerce categories page.

So I have used below code to create custom fields for Meta Title & Meta Description for WooCommerce categories in admin area.

function wh_taxonomy_add_new_meta_field() {
    ?>

    <div class="form-field">
        <label for="wh_meta_title"><?php _e('Meta Title', 'wh'); ?></label>
        <input type="text" name="wh_meta_title" id="wh_meta_title">
        <p class="description"><?php _e('Enter a meta title, <= 60 character', 'wh'); ?></p>
    </div>
    <div class="form-field">
        <label for="wh_meta_desc"><?php _e('Meta Description', 'wh'); ?></label>
        <textarea name="wh_meta_desc" id="wh_meta_desc"></textarea>
        <p class="description"><?php _e('Enter a meta description, <= 160 character', 'wh'); ?></p>
    </div>
    <?php
}

//Product Cat Edit page
function wh_taxonomy_edit_meta_field($term) {

    //getting term ID
    $term_id = $term->term_id;

    // retrieve the existing value(s) for this meta field.
    $wh_meta_title = get_term_meta($term_id, 'wh_meta_title', true);
    $wh_meta_desc = get_term_meta($term_id, 'wh_meta_desc', true);
    ?>
    <tr class="form-field">
        <th scope="row" valign="top"><label for="wh_meta_title"><?php _e('Meta Title', 'wh'); ?></label></th>
        <td>
            <input type="text" name="wh_meta_title" id="wh_meta_title" value="<?php echo esc_attr($wh_meta_title) ? esc_attr($wh_meta_title) : ''; ?>">
            <p class="description"><?php _e('Enter a meta title, <= 60 character', 'wh'); ?></p>
        </td>
    </tr>
    <tr class="form-field">
        <th scope="row" valign="top"><label for="wh_meta_desc"><?php _e('Meta Description', 'wh'); ?></label></th>
        <td>
            <textarea name="wh_meta_desc" id="wh_meta_desc"><?php echo esc_attr($wh_meta_desc) ? esc_attr($wh_meta_desc) : ''; ?></textarea>
            <p class="description"><?php _e('Enter a meta description', 'wh'); ?></p>
        </td>
    </tr>
    <?php
}

add_action('product_cat_add_form_fields', 'wh_taxonomy_add_new_meta_field', 10, 1);
add_action('product_cat_edit_form_fields', 'wh_taxonomy_edit_meta_field', 10, 1);

// Save extra taxonomy fields callback function.
function wh_save_taxonomy_custom_meta($term_id) {

    $wh_meta_title = filter_input(INPUT_POST, 'wh_meta_title');
    $wh_meta_desc = filter_input(INPUT_POST, 'wh_meta_desc');

    update_term_meta($term_id, 'wh_meta_title', $wh_meta_title);
    update_term_meta($term_id, 'wh_meta_desc', $wh_meta_desc);
}

add_action('edited_product_cat', 'wh_save_taxonomy_custom_meta', 10, 1);
add_action('create_product_cat', 'wh_save_taxonomy_custom_meta', 10, 1);

Above code works perfectly in admin area. But how to display entered Meta Title & Meta Description on front end on category pages?

What hooks I should add in functions.php file so that it gets displayed in category pages in frontend?

Answer 1

Please Try this code its working file. For Meta Title

add_filter('aioseo_title', 'wh_alter_pro_cat_title', 1);

function wh_alter_pro_cat_title($title)
{
    global $paged;
    if (is_product_category())
    {
        $page = get_query_var('page');
        if ($paged > $page)
        {
            $page = $paged;
        }

        $term = get_queried_object();
        $title = get_term_meta($term->term_id, 'wh_meta_title', true);
        $title = !empty($title) ? $title : $term->name;
        $page_part = (!empty($page) && ($page > 1)) ? ' | ' . 'Page ' . $page : '';
        $title .= ' | ' . get_bloginfo('name') . $page_part;
    }
    return $title;
}

For Meta Description

add_action('wp_head', 'wh_alter_pro_cat_desc', 5);

function wh_alter_pro_cat_desc()
{
    if (is_product_category())
    {
        $term = get_queried_object();
        $productCatMetaDesc = get_term_meta($term->term_id, 'wh_meta_desc', true);
        if (empty($productCatMetaDesc))
            return;

        ?>
        <meta name="description" content="<?= $productCatMetaDesc; ?>">
        <?php
    }
}

Answer 2

As you are using All in One SEO, so none of the wp default hook/filter will work as this plugin modify all the title, so you have to use aioseop_title, filter for Meta Title. and for Meta description you have to use wp_head.

For Meta Title

add_filter('aioseop_title', 'wh_alter_pro_cat_title', 1);

function wh_alter_pro_cat_title($title)
{
    global $paged;
    if (is_product_category())
    {
        $page = get_query_var('page');
        if ($paged > $page)
        {
            $page = $paged;
        }

        $term = get_queried_object();
        $title = get_term_meta($term->term_id, 'wh_meta_title', true);
        $title = !empty($title) ? $title : $term->name;
        $page_part = (!empty($page) && ($page > 1)) ? ' | ' . 'Page ' . $page : '';
        $title .= ' | ' . get_bloginfo('name') . $page_part;
    }
    return $title;
}

For Meta Description

add_action('wp_head', 'wh_alter_pro_cat_desc', 5);

function wh_alter_pro_cat_desc()
{
    if (is_product_category())
    {
        $term = get_queried_object();
        $productCatMetaDesc = get_term_meta($term->term_id, 'wh_meta_desc', true);
        if (empty($productCatMetaDesc))
            return;

        ?>
        <meta name="description" content="<?= $productCatMetaDesc; ?>">
        <?php
    }
}

All the code goes in functions.php file of your active child theme (or theme). Or also in any plugin php files.
Codes is tested and works.

Helpful link Adding custom field to product category in WooCommerce

Answer 3

// Display details on product category archive pages
add_action(
    'woocommerce_after_shop_loop', 
    'wpm_product_cat_archive_add_meta'
);

function wpm_product_cat_archive_add_meta() {
    $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 != '' ) {
        echo '<div class="woo-sc-box normal rounded full">';
            echo apply_filters( 'the_content', $term_meta_content );
        echo '</div>';
    }
}

Answer 4

You can display custom meta title and meta description on frontend by using the following hook.

add_action('woocommerce_after_shop_loop','display_custom_meta_info');
    function display_custom_meta_info(){
       global $wp_query;
       $cat_obj = $wp_query->get_queried_object();
       $title_meta = get_term_meta($cat_obj->term_id
    ,'wh_meta_title',true);
       $desc_meta = get_term_meta($cat_obj->term_id
    ,'wh_meta_desc',true);

      $woocommerce_taxonomy_archive_description = $title_meta.$desc_meta;

return $woocommerce_taxonomy_archive_description;

    }

You can always use other hooks to modify the display of metas by following the template structure