New to the community? Start here

Product Category/Brand Page Description Above And Below Product Thumbnails

Hello,

Currently we have the description for our woocommerce product category, product tag and brand pages below the block of product listing thumbnails. See this URL for an example:

https://cncmachines.net/brand/used-haas/

What we would like to do is keep the description below the product listings where it is but also add the ability to add additional content above the product thumbnails (which is where the description used to be). This way we could have different content above and below the body of product listings. What would be the best way to do this?

Thank you for any help you can offer!

Take care,

Matthew

Wed, 9 May 2018 15:54:10
  • Adam
    • Support Gorilla

    Hi Matthew

    I hope you’re well today and thank you for your question!

    I assume that “brands” are product categories in fact, is that correct? If so, I think you would need some additional customization.

    WooCommerce includes templating system and the template behind category product listings is “taxonomy-product_cat.php”.

    That can be edited manually but you can also use this plugin for editing templates:

    https://wordpress.org/plugins/woo-edit-templates/

    What is important to know here is that this particular template is actually only loading another one: “archive-product.php”. In that case in order to address only category listings you would want to copy the content of “archive-product.php” template to the “taxonomy-product_cat.php” template and only then edit the latter one.

    If you look into templates you will notice that there are numerous actions (“do_action()”:wink: that let you add some content so you could change their names (so they would only be related to that particular template) and then use additional code to make changes but you could also instead simply edit the template directly.

    Having said that, I realize this is quite a generic response but hopefully it will give you some idea on what to do next. If you got any further questions, let me know please but also allow me to access your site to get familiar with how it’s configured (you can enable support access at the “WPMU DEV -> Support” page in site’s back-end).

    Best regards,

    Adam

  • Matthew
    • Recruit

    Hi Adam,

    Thanks for the response and detailed explanation. To the best of my knowledge, any one of our ‘brand’ pages seem to be a sort of customized product category, if that makes any sense. A while back before I managed the site, our company hired a freelance dev to add brand pages (as well as other custom functionality) in our child theme’s functions.php file. I’ve included what I believe is the relevant code:

    add_action( ‘init’, function () {

    $labels = array(

    ‘name’ => ‘Brands’,

    ‘singular_name’ => ‘Brand’,

    ‘menu_name’ => ‘Brand’,

    ‘all_items’ => ‘All brands’,

    ‘parent_item’ => ‘Parent brand’,

    ‘parent_item_colon’ => ‘Parent brand:’,

    ‘new_item_name’ => ‘New Item brand’,

    ‘add_new_item’ => ‘Add New brand’,

    ‘edit_item’ => ‘Edit brand’,

    ‘update_item’ => ‘Update brand’,

    ‘separate_items_with_commas’ => ‘Separate brand with commas’,

    ‘search_items’ => ‘Search brands’,

    ‘add_or_remove_items’ => ‘Add or remove brands’,

    ‘choose_from_most_used’ => ‘Choose from the most used brands’,

    );

    $args = array(

    ‘labels’ => $labels,

    ‘hierarchical’ => true,

    ‘public’ => true,

    ‘show_ui’ => true,

    ‘show_admin_column’ => true,

    ‘show_in_nav_menus’ => true,

    ‘show_tagcloud’ => true,

    );

    register_taxonomy( ‘brand’, ‘product’, $args );

    register_taxonomy_for_object_type( ‘brand’, ‘product’ );

    } );

    function addBrandDescription() {

    if ( isBrandPage() ) {

    $description = get_the_archive_description();

    if(!empty($description)){

    echo “<div class=’term-description’>$description</div>”;

    }

    }

    }

    //add_action( ‘woocommerce_archive_description’, ‘addBrandDescription’:wink:;

    function isBrandPage(){

    $q_object = get_queried_object();

    return isset($q_object->taxonomy) && $q_object->taxonomy == ‘brand’;

    }

    function get_woocommerce_brands(){

    $title = ‘Brands’;

    $args = array(

    ‘taxonomy’ => ‘brand’,

    ‘orderby’ => ‘count’,

    ‘show_count’ => 0,

    ‘pad_counts’ => 0,

    ‘hierarchical’ => 0,

    ‘title_li’ => $title,

    ‘hide_empty’ => 0,

    ‘order’ => ‘DESC’,

    ‘number’ => 15

    );

    $all_categories = get_categories( $args );

    $str = ‘<div class=”widget widget_categories”>’;

    $str .= ‘<h3 class=”widget-title”>’.$title.'</h3>’;

    $str .= ‘<ul class=”product-categories”>’;

    foreach ( $all_categories as $cat ) {

    if ( $cat->category_parent == 0 ) {

    $category_id = $cat->term_id;

    $str .= ‘<li class=”cat-item cat-item-2″>’;

    $str .= ‘slug, ‘brand’ ).'”>’.$cat->name.’‘;

    $str .= ”;

    }

    }

    $str .= ”;

    $str .= ‘</div>’;

    return $str;

    }

    // Code To Move The Description Below The Product Listing Thumbnails For All Taxonomies (Product Category, Product Subcategory, Brand and Product Tag Pages et al.)

    remove_action( ‘woocommerce_archive_description’, ‘woocommerce_taxonomy_archive_description’, 10 );

    add_action( ‘woocommerce_after_main_content’, ‘woocommerce_taxonomy_archive_description’, 100 );

    add_action( ‘woocommerce_after_shop_loop’, ‘woocommerce_taxonomy_archive_description’, 100 );

    I’ve discovered that when I un-escape the “//add_action( ‘woocommerce_archive_description’, ‘addBrandDescription’:wink:;” snippet, the description is displayed above and below the product listings for the brand pages. It also appears that this description is being pulled from a function called “get_the_archive_description();” – how could we make this content unique to the description below the listing thumbnails in the taxonomy-product_cat.php file?

    So far I’ve copied the content of the archive-product.php and pasted it into the taxonomy-product_cat.php file. I then copied taxonomy-product_cat.php file and pasted it into the woocommerce folder in our child theme to override the template (as instructed in the header of the woocommerce template files where it says: “This template can be overridden by copying it to yourtheme/woocommerce/taxonomy-product_cat.php.”:wink: However, I’m not seeing the changes I made to the taxonomy-product_cat.php file after following these steps. Am I still doing something wrong or skipping a step?

    Thank you again for your help! If you still need to get admin access let me know and we can work that out for you.

    Take Care,

    Matthew

  • Matthew
    • Recruit

    P.S. — Admin support access has been enabled. I clicked the ‘Grant Access’ button on the WPMU Support Dashboard. Please let me know if there’s anything else I need to do in order to ensure you have the access needed.

    Thanks,

    Matthew

  • Adam
    • Support Gorilla

    Hi Matthew

    Thanks for sharing the code and for your patience.

    This code actually explains the setup and “changes things” a bit. Instead of making any changes to the templates, we should go with a piece of additional custom code here, so let’s give it a try :slight_smile:

    1. Revert the template changes (and other changes that you might have done in relation to this ticket) so you’d be at “starting point” (like when you started this thread)

    2. Download the .zip file that I attached to this post and extract it to your local drive

    3. Access your server via FTP and upload the “brand-additional-description.php” file (from inside atached .zip file) to the “/wp-content/mu-plugins” folder on your server

    Once this is done, go to your “Products -> Brand” page in site’s backend and you should see “Top Description” field and “Top Description” column on brand’s list. This “Top Description” field is for use when creating a new brand but you can also edit existing ones.

    To do this, click on “Edit” for any of the brands” and you should also get “Top Description” field there – add your additional description and save. Then visit the brand listing page and you should see your original description below products (like it was so far) and the description that you put in “Top Description” field – above product list.

    Give it a try please and let me know if it worked for you :slight_smile:

    Best regards,

    Adam

  • Matthew
    • Recruit

    Hi Adam,

    Thanks for taking a look at that code and for helping a php beginner like myself! I was thinking that the way our previous developer set up the custom ‘brand’ pages code could possibly complicate matters. Good news is that the text area is appearing in the ‘add/edit’ brand page on the back end (see screenshots 1 and 2). The only bad news is that the formatting appears to be a bit off once content is posted (see screenshot 3). Could we fix this with some css? or would the priority need to be changed in the ‘brand-additional-description.php’ file?

    On another note, we appear to be able to only add non html content to the ‘top description’ text editior? What would be needed to make it so we can input html into the text area? Nothing too crazy, just wanted to be able to make some href tags in an unordered list format.

    I really appreciate your help on this matter and for providing all of that code. Feel free to respond at your leisure.

    Take Care,

    Matthew

  • Adam
    • Support Gorilla

    Hello Matthew

    Unfortunately, it seems the screenshots didn’t come through and on the page linked from your initial post I don’t see any additional description above the post. Can you point me to the page where I can see it live? I’ll take a look and I believe we can address formatting/alignment with CSS :slight_smile:

    As for “non-html” content. Yes, it can be enabled, you’ll just need to change the code in a file that I sent you:

    if you look into the file you will find two lines like this in the code:

    $group = sanitize_textarea_field( $_POST['top-description'] );

    all you’d need to do would be to replace each of them with this:

    $group = $_POST['top-description'];

    That should do the job. The only “downside” is that you’d need to put “raw” HTML code in the field as there’s no WP Editor there.

    Best regards,

    Adam

  • Adam
    • Support Gorilla

    Hi matthew,

    I believe that this additional “top description” on this page are the “product tag” links in this case, right?

    I think we should make one more small change in the code then to make it easier to style with CSS. If you look into it, you will find this code inside “action_woocommerce_archive_description()” function near the top of the file:

    if (isset($q_object->taxonomy) && $q_object->taxonomy == 'brand') {
    
$top_description = get_term_meta( $q_object->term_id, 'top-description', true );
    
echo $top_description;
    
}

    I think it would be helpful to replace

    echo $top_description;

    there with

    echo '<div class="brand-top-description">' . $top_description . '</div>';

    That would enclose that “above products” description nicely in a HTML block and we could then style it easily. Could you do that change?

    Then you could add some CSS to the site, like e.g.

    .brand-top-description {
    
display:block;
    
width:100%;
    
clear:both;
    
padding: 20px;
    
margin: 25px 0;
    
}

    That’s just an example but should make it better “aligned”; we can adjust that later if necessary :slight_smile:

    Best regards,

    Adam