I'm trying to update the category list/loop in woocommerce to replace the category thumbnail with a thumbnail of the newest available product in the respective category.
I think I'm halfway to achieve this on a test page though I can list the latest product of each category and display the category name beneath the image though I can't get it to link to the category page. This is running on a test page though I would like it to work on the shop landing page.
Also for some reason I can't get this to display as the regular woocommerce product grid. All the products/categories just stack even though I have replicated the woocommerce classes.
Here is the code. Am I going the long way around is there an easier way to achieve this?
<?php
if (is_page( 2295 )){ ?>
//open
<div class='woocommerce'>
<?php
//parameters for the function
$args = array(
'number' => $number,
'orderby' => 'title',
'order' => 'ASC',
'hide_empty' => $hide_empty,
'include' => $ids
);
//fetch the product categories
$product_categories = get_terms( 'product_cat', $args );
//how many categories
$count = count($product_categories);
// Check categories exist
if ( $count > 0 ){
//loop through and minipulate
foreach ( $product_categories as $product_category ) {
//parameters for the query
$args = array(
'posts_per_page' => 1,
'tax_query' => array(
'relation' => 'AND',
array(
'taxonomy' => 'product_cat',
'field' => 'slug',
'terms' => $product_category->slug
)
),
'post_type' => 'product',
'orderby' => 'title,'
);
//run the query with the above arguments
$products = new WP_Query( $args );
//open the list with woocommerce class
echo "<ul class='products columns-4'>";
//list latest products of each category
while ( $products->have_posts() ) {
$products->the_post();
?>
<li class="product-category product">
<a href="<?php get_site_url() ?>/product-category/<?php echo $product_category->slug; ?>">
<?php the_post_thumbnail('shop_catalog'); ?>
<?php echo"<h2 class'woocommerce-loop-category__title'>" . $product_category->name . "</h2>"; ?>
</a>
</li>
<?php
}
echo "</ul>";
}
}?>
</div>
<?php }
?>
Any help with this this would be awasome
Add the follows code snippet in your active theme's functions.php to achieve the above -
function modify_woocommerce_before_shop_loop() {
remove_action( 'woocommerce_before_subcategory_title', 'woocommerce_subcategory_thumbnail', 10 );
add_action( 'woocommerce_before_subcategory_title', 'change_woocommerce_subcategory_thumbnail', 10 );
}
add_action( 'woocommerce_before_shop_loop', 'modify_woocommerce_before_shop_loop' );
function change_woocommerce_subcategory_thumbnail( $category ) {
global $wpdb;
$small_thumbnail_size = apply_filters( 'subcategory_archive_thumbnail_size', 'woocommerce_thumbnail' );
$dimensions = wc_get_image_size( $small_thumbnail_size );
// Get the latest product from the category
$product = $wpdb->get_row("SELECT
ID FROM $wpdb->posts p
JOIN $wpdb->term_relationships tr ON (p.ID = tr.object_id)
JOIN $wpdb->term_taxonomy tt ON (tr.term_taxonomy_id = tt.term_taxonomy_id)
JOIN $wpdb->terms t ON (tt.term_id = t.term_id)
WHERE p.post_type='product'
AND p.post_status = 'publish'
AND tt.taxonomy = 'product_cat'
AND t.term_id = $category->term_id
ORDER BY post_date DESC LIMIT 1");
if( $product ) {
$thumbnail_id = get_post_meta( $product->ID, '_thumbnail_id', true );
}else {
$thumbnail_id = get_term_meta( $category->term_id, 'thumbnail_id', true );
}
if ( $thumbnail_id ) {
$image = wp_get_attachment_image_src( $thumbnail_id, $small_thumbnail_size );
$image = $image[0];
$image_srcset = function_exists( 'wp_get_attachment_image_srcset' ) ? wp_get_attachment_image_srcset( $thumbnail_id, $small_thumbnail_size ) : false;
$image_sizes = function_exists( 'wp_get_attachment_image_sizes' ) ? wp_get_attachment_image_sizes( $thumbnail_id, $small_thumbnail_size ) : false;
} else {
$image = wc_placeholder_img_src();
$image_srcset = false;
$image_sizes = false;
}
if ( $image ) {
// Prevent esc_url from breaking spaces in urls for image embeds.
// Ref: https://core.trac.wordpress.org/ticket/23605.
$image = str_replace( ' ', '%20', $image );
// Add responsive image markup if available.
if ( $image_srcset && $image_sizes ) {
echo '<img src="' . esc_url( $image ) . '" alt="' . esc_attr( $category->name ) . '" width="' . esc_attr( $dimensions['width'] ) . '" height="' . esc_attr( $dimensions['height'] ) . '" srcset="' . esc_attr( $image_srcset ) . '" sizes="' . esc_attr( $image_sizes ) . '" />';
} else {
echo '<img src="' . esc_url( $image ) . '" alt="' . esc_attr( $category->name ) . '" width="' . esc_attr( $dimensions['width'] ) . '" height="' . esc_attr( $dimensions['height'] ) . '" />';
}
}
}
If I also want to check if the product is in stock or not I have tried upating the query to something like this though looks to have broken something:
$product = $wpdb->get_row("SELECT
ID FROM $wpdb->posts p
JOIN $wpdb->term_relationships tr ON (p.ID = tr.object_id)
JOIN $wpdb->term_taxonomy tt ON (tr.term_taxonomy_id = tt.term_taxonomy_id)
JOIN $wpdb->terms t ON (tt.term_id = t.term_id)
JOIN $wpdb->wp_postmeta pm ON (p.ID = pm.post_id)
WHERE p.post_type='product'
AND p.post_status = 'publish'
AND tt.taxonomy = 'product_cat'
AND t.term_id = $category->term_id
AND pm.meta_value = 'instock'
ORDER BY post_date DESC LIMIT 1");
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.