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 -->';
}
?>
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
Reset to default 2 +50What 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();
}
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.