3

The code below displays product category names, links and their thumbnails on hover. The thumbnails ($image) retrieved are those manually set via the woocommerce product category menu.

I am trying to instead, get these product category thumbnails from the best selling product in each. Im really not sure how to include new wp_query & get_post_meta to this. With this addition my thumbnails no longer display at all.

$max_cat_count = 24; 
$qty_per_column = 6; 


$args = array(
    'taxonomy'   => 'product_cat',
    'number'     => $max_cat_count + 1, // keep the + 1
    'hide_empty' => 0,
);

$get_cats = get_terms( $args );
$get_cats = ( ! is_wp_error( $get_cats ) ) ? $get_cats : [];

$total = count( $get_cats );
$list_number = 1;
$_new_col = false;

$columns = '';
foreach ( $get_cats as $i => $cat ) {
    if ( $i >= $max_cat_count ) {
        break;
    }

    if ( $i % $qty_per_column === 0 ) {
        if ( $_new_col ) {
            $columns .= '</ul></div><!-- .cat_columns -->';
        }

        $id = 'cat-col-' . $list_number;
        $columns .= '<div class="menu cat_columns" id="' . $id . '">';
        $columns .= '<ul class="hoverimage">';

        $_new_col = true;
        $list_number++;
    }

    if ( $total > $max_cat_count && $i === $max_cat_count - 1 ) {
        $columns .= '<li class="all-link"><a href="/view-all">View All </a></li>'; 
    } else {

     $terms = get_terms( 'product_cat', array(
    'hide_empty' => false,
) );

foreach ( $terms as $term ) {
    $query = new WP_Query( [
        'post_type'      => 'product',
        'posts_per_page' => 1,
        'meta_key'       => 'total_sales',
        'orderby'        => 'meta_value_num',
        'tax_query'      => array(
            array(
                'taxonomy' => 'product_cat',
                'field'    => 'slug',
                'terms'    => $term->slug,
            ),
        ),
    ] );
    if ( $query->have_posts() ) {
        while ( $query->have_posts() ) {
            $query->the_post();
            $thumbnail = content_url( '/uploads/woocommerce-placeholder-416x416.png' );
            if ( has_post_thumbnail() ) {
                $thumbnail = get_post_thumbnail_id();
                $image = $thumbnail ? wp_get_attachment_url( $thumbnail ) : '';
            }
        }
    }

        wp_reset_postdata();  
}
            $link = '<a href="' . esc_url( get_term_link( $cat ) ) . '">' . esc_html( $cat->name ) . '</a>';
            $columns .= '<li class="menu-item" data-image="' . esc_url( $image ) . '">' . $link . '</li>';
}
}

// Close last column, if any.
if ( $_new_col ) {
    $columns .= '</ul></div><!-- .cat_columns -->';
}
?>

2 Answers 2

2
+50

What I understood from your question is, you want to get the best seller product in each category and set its image as a category thumb.

you will need to loop through all categories then you will need also a nested loop in each category for the best product in the current loop of categories, then you will have the access to the best seller product image.

the following code will describe more (UnTested):


$terms = get_terms( 'product_cat', array(
    'hide_empty' => false,
) );

foreach ( $terms as $term ) {
    $query = new WP_Query( [
        'post_type'      => 'product',
        'posts_per_page' => 1,
        'meta_key'       => 'total_sales',
        'orderby'        => 'meta_value_num',
        'tax_query'      => array(
            array(
                'taxonomy' => 'product_cat',
                'field'    => 'slug',
                'terms'    => $term->slug,
            ),
        ),
    ] );
    if ( $query->have_posts() ) {
        while ( $query->have_posts() ) {
            $query->the_post();
            $thumbnail = 'DEFAULT THUMBNAIL ID';
            if ( has_post_thumbnail() ) {
                $thumbnail = get_post_thumbnail_id();
                //THEN YOU WILL BE ABLE TO SET THE CATEGORY THUMBNAIL WITH THIS PRODUCT THUMBNAIL ID
            }
        }
    }
    wp_reset_postdata();
}
7
  • I have amended my code above to include this code and used the thumbnail id retrieved for $image, however it shows the same thumbnail for all categories. The thumbnail itself is that of the best selling product in the Tshirt category. Not sure why this particular category is being used.
    – aye cee
    Commented Nov 25, 2019 at 13:30
  • You have to make the nested loop as I described to get the thumbnail of the category from the first level and the product thumbnail of the first best selling product. this line must be edited $thumbnail = 'DEFAULT THUMBNAIL ID';
    – Ahmad Wael
    Commented Nov 25, 2019 at 16:01
  • Im not sure how I haven't done the loop as described. What am I missing?
    – aye cee
    Commented Nov 26, 2019 at 2:40
  • make sure the wp_query gives you the best seller product as expected then test the other elements
    – Ahmad Wael
    Commented Nov 26, 2019 at 10:24
  • ok now the wp_query is returning 1 correct result per category to the $image variable. The results dont seem connected to the categories anymore though, and when I hover the category list, the same image shows for each, the first by name order I think.
    – aye cee
    Commented Nov 27, 2019 at 15:41
2

What I understood from your question is, you want to display the best selling products category image. In that case you need to loop through your product WP_Query .. Like you have wrote and each loop just use wp_get_object_terms function. It will return product category associated with it. Hope it will help for you.

3
  • do you mean to replace the get_terms loop with a new one?
    – aye cee
    Commented Nov 17, 2019 at 4:52
  • No. You need to loop through Product Query. Commented Nov 18, 2019 at 9:58
  • Ive edited the question to show what I have done. Im pretty lost. Am I getting on the right track?
    – aye cee
    Commented Nov 18, 2019 at 14:11

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.