Okay
  Public Ticket #2020223
Positioning of Categories and Tags on product pages
Closed

Comments

  • loadedforbearaudio started the conversation

    I would like to re-position the Category and Tag elements to further down the page so that the price and options menu take priority.

    I would really appreciate advice on the best way to change this. Would it be to use some custom CSS?

    Many thanks

  • Helena replied

    I have a similar question.

    If I check the Kalium bookstore preview, right under the product name you have Author (product attribute?), SKU and Category. On the Kalium shop theme, there is only category attribute. And on Kalium fashion is SKU, categories and tags. 

    Is there a way for me to customize which attributes will show up there?

  • [deleted] replied

    Hi loadedforbearaudio and Helena,

    The order of product information is flexible and can be changed the way you want. Can you please tell me how do you want to order the information in product single page individually so I can give you the code.

  • Helena replied

    Hi Arlind,

    I'd like to have "Autor" and "SKU" attributes show just below the name of the product. My site is in portuguese, so the SKU attribute is actually called REF, but I don't think that matters to the code, right? "Autor" is a global attribute I created, so I guess you have to use the same slug (autor). 

    If it is possible, it would be nice to add "product category" and "product tags" to the "adictional information" tab.

    Thanks a lot for your help!

  • loadedforbearaudio replied

    Hi Arlind

    Thanks for the support. Would it be possible to have the SKU, Categories and Tags appear in the 'Additional Information' tab on the page?

    If not, could we try it to have these three elements below the price and options menus?

    All the best

  • [deleted] replied

    Hi @loadedforbearaudio,

    You can add this code in functions.php (end of file) to show product SKU, Categories and Tags at additional information tab:

    function add_custom_display_attributes( $product_attributes, $product ) {
        // Show SKU if not empty
        if ( $product->get_sku() ) {
            $product_attributes["attribute_sku"] = array(
                'label' => 'SKU',
                'value' => $product->get_sku(),
            );
        }
        // Categories (show if there is any)
        if ( $categories = wc_get_product_category_list( $product->get_id(), ', ' ) ) {
            $product_attributes['attribute_category'] = array(
                'label' => _n( 'Category:', 'Categories:', count( $product->get_category_ids() ), 'woocommerce' ),
                'value' => wc_get_product_category_list( $product->get_id(), ', ' ),
            );
        }
        // Tags (show if there is any)
        if ( $tags = wc_get_product_tag_list( $product->get_id(), ', ' ) ) {
            $product_attributes['attribute_category'] = array(
                'label' => _n( 'Tag:', 'Tags:', count( $product->get_tag_ids() ), 'woocommerce' ),
                'value' => wc_get_product_tag_list( $product->get_id(), ', ' ),
            );
        }
        return $product_attributes;
    }
    add_filter( 'woocommerce_display_product_attributes', 'add_custom_display_attributes', 10, 2 );
    

    I have tested and it worked:

    medium
    (view large image)

  • [deleted] replied

    Hi @Helena,

    Here is the code for you:

    https://d.pr/n/MmQVHH (download the code from here)

    /**
     * Show product categories and tags in Additional Information tab.
     */
    function add_custom_display_attributes( $product_attributes, $product ) {
        // Categories (show if there is any)
        if ( $categories = wc_get_product_category_list( $product->get_id(), ', ' ) ) {
            $product_attributes['attribute_category'] = array(
                'label' => _n( 'Category:', 'Categories:', count( $product->get_category_ids() ), 'woocommerce' ),
                'value' => wc_get_product_category_list( $product->get_id(), ', ' ),
            );
        }
        // Tags (show if there is any)
        if ( $tags = wc_get_product_tag_list( $product->get_id(), ', ' ) ) {
            $product_attributes['attribute_category'] = array(
                'label' => _n( 'Tag:', 'Tags:', count( $product->get_tag_ids() ), 'woocommerce' ),
                'value' => wc_get_product_tag_list( $product->get_id(), ', ' ),
            );
        }
        return $product_attributes;
    }
    add_filter( 'woocommerce_display_product_attributes', 'add_custom_display_attributes', 10, 2 );
    /**
     * Show SKU and author below the product title.
     */
    function show_custom_attributes_below_title() {
        global $product;
        // Show SKU if not empty
        if ( wc_product_sku_enabled() ) {
            ?>
            <span class="sku_wrapper"><?php esc_html_e( 'SKU:', 'woocommerce' ); ?> <span class="sku"><?php echo ( $sku = $product--->get_sku() ) ? $sku : esc_html__( 'N/A', 'woocommerce' ); ?></span></span>
            <!--?php
        }
        // Show Author
        $attributes = $product--->get_attributes();
        // Note that 'author' may change based on how you have named it. Also it may be as 'pa_author'
        $author_attribute_name = 'author';
        if ( isset( $attributes[ $author_attribute_name ] ) ) {
            $attribute = $attributes[ $author_attribute_name ];
            $values = array();
            if ( $attribute->is_taxonomy() ) {
                $attribute_taxonomy = $attribute->get_taxonomy_object();
                $attribute_values   = wc_get_product_terms( $product->get_id(), $attribute->get_name(), array( 'fields' => 'all' ) );
                foreach ( $attribute_values as $attribute_value ) {
                    $value_name = esc_html( $attribute_value->name );
                    if ( $attribute_taxonomy->attribute_public ) {
                        $values[] = '<a href="' . esc_url( get_term_link( $attribute_value->term_id, $attribute->get_name() ) ) . '" rel="tag">' . $value_name . '</a>';
                    } else {
                        $values[] = $value_name;
                    }
                }
            } else {
                $values = $attribute->get_options();
                foreach ( $values as &$value ) {
                    $value = make_clickable( esc_html( $value ) );
                }
            }
            echo sprintf( '<div class="author"><span class="label">%s:</span> <span class="values">%s</span></div>', wc_attribute_label( $attribute->get_name() ), wpautop( wptexturize( implode( ', ', $values ) ) ) );
        }
    }
    add_action( 'woocommerce_single_product_summary', 'show_custom_attributes_below_title', 10 );
    

    You should add the above code in functions.php 

    You can modify the code for your own purpose and ordering of information.

  • loadedforbearaudio replied

    Hi @Arlind

    This is great, thanks. Can you now point me in the direction of how to remove the original SKU, Tags and Categories so that they only appear in the Additional Information tab and not below the product name and description?

  • [deleted] replied

    Hi @loadedforbearaudio,

    You can hide those information with this CSS:

    .product_meta .sku_wrapper,
    .product_meta .posted_in,
    .product_meta .tagged_as {
    display: none !important;
    }

    I have tried and it worked.

  • loadedforbearaudio replied

    Hi @Arlind

    That's amazing! Thanks for the speedy reply and great support!

    Cheers!

  • [deleted] replied

    Hi @loadedforbearaudio,

    I am glad that this worked for you. All the best