Displaying the Woocommerce subcategory image in a shortcode

Question

So I had a shortcode working well which pulled in the subcategories of a product and displayed the image and text but realised it was at the top of the content because I had used echo . . . so moved the HTML output into a variable so I could return it but the images are coming out of the list items, so seem to be having an issue with the function: woocommerce_subcategory_thumbnail()

Not too sure why but I presume the function must have an echo? I guess I want to just get the image url and put it in a container? Honestly have no idea what the best method is but this is where I'm at

add_shortcode( 'show_products_categories_os', 'categories_of_the_product_os' );
function categories_of_the_product_os() {
$term_id = get_term_by( 'slug', 'os', 'product_cat' );
$terms = get_the_terms( get_the_ID(), 'product_cat' );
    
if ( $terms ) {         
    $output_html .= '<ul class="product-cats osp">';     
        foreach ( $terms as $term ) {
            if($term->parent === $term_id->term_id){
              $output_html .= '<li class="category os">';
                $output_html .= '<a href="' .  esc_url( get_term_link( $term ) ) . '" class="' . $term->slug . '" target="_blank">' . woocommerce_subcategory_thumbnail( $term ) . '</a>';
                $output_html .= '<h2><a href="' .  esc_url( get_term_link( $term ) ) . '" class="' . $term->slug . '" target="_blank">' . $term->name . '</a></h2>';                                                                             
              $output_html .= '</li>';
            }                                                                    
        }     
    $output_html .= '</ul>'; 
}
    return $output_html;
}

Is there another function I can't find that can give me jst the url for the image? Or a way of stripping it from that other function?

score 1 · Accepted Answer · answered Oct 23 '20 at 11:32

You need to get the thumbnail_id from the term's metadata and pass that as a parameter to wp_get_attachment_url


add_shortcode( 'show_products_categories_os', 'categories_of_the_product_os' );
function categories_of_the_product_os() {
    $term_id = get_term_by( 'slug', 'os', 'product_cat' );
    $terms = get_the_terms( get_the_ID(), 'product_cat' );
    
    if ( $terms ) {         
        $output_html .= '<ul class="product-cats osp">';     
            foreach ( $terms as $term ) {
                $thumbnail_id = get_term_meta( $term->term_id, 'thumbnail_id', true );
                $image_url = wp_get_attachment_url( $thumbnail_id );
                if($term->parent === $term_id->term_id){
                   $output_html .= '<li class="category os">';
                   $output_html .= '<a href="' .  esc_url( get_term_link( $term ) ) . '" class="' . $term->slug . '" target="_blank">' . $image_url . '</a>';
                   $output_html .= '<h2><a href="' .  esc_url( get_term_link( $term ) ) . '" class="' . $term->slug . '" target="_blank">' . $term->name . '</a></h2>';                                                                             
                   $output_html .= '</li>';
                }                                                                    
             }     
         $output_html .= '</ul>'; 
    }
    return $output_html;
}

Source: https://stackoverflow.com/a/51465602/14481105

To Note

You now need to add that $image_url to the src attribute of an img tag for an image to be output, as currently just the URL would appear.

Displaying the Woocommerce subcategory image in a shortcode

1 Answers1