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 -->';
}
?>