Woocommerce Question posted in
The official Woocommerce documentation can be found here.

Replace woocommerce product category thumbnail with image of latest product in respective category

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

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

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

  2. 0

    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'] ) . '" />';
        }
    }
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search