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
+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();
}
  • 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. – Whee Nov 25 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 Nov 25 at 16:01
  • Im not sure how I haven't done the loop as described. What am I missing? – Whee Nov 26 at 2:40
  • make sure the wp_query gives you the best seller product as expected then test the other elements – Ahmad Wael Nov 26 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. – Whee Nov 27 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.

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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