用相应类别中最新产品的图像替换 woocommerce 产品类别缩略图

Question

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

Answer 1

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'] ) . '" />';
        }
    }
}

Answer 2

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");