Search code examples
phpwordpresswoocommercecategoriesproduct

Display a random product thumbnail for a product category in WooCommerce


I am trying to pull a random product thumbnail to display as an image on one of my pages. I can't seem to find a way that works, and have tried the solutions from this and this post.

It would be beneficial to echo it out in a div as well.

Here is what I am currently trying but I'm still unsure how to do this.

functions.php:

function get_random_thumbnails_for_reg(){
    if(is_page(381)){

        $args = array(
            'tax_query' => array(
                array(
                    'taxonomy' => 'product_cat',
                    'field' => 'slug',   
                    'terms' => 'allison-1000-gm-duramax-series'  
                )
            )
        );

        $random_products = get_posts( $args );
        foreach ( $random_products as $post ) : setup_postdata( $post ); 
        ?>
            <div id="randomPic"><a href="<?php the_permalink(); ?>"><?php the_post_thumbnail(); ?></a></div>
        <?php 
         endforeach; 
         wp_reset_postdata();

    }
}
add_action('wp_footer', 'get_random_thumbnails_for_reg', 50);

Solution

  • Ok after some testing I got it working in a different modular way. I have created a custom shortcode that displays randomly one product thumbnail based on a product category**.

    This shortcode has 2 argument:

    • The product category slug: cat
    • The image size (can be: 'shop_thumbnail', 'shop_catalog' or 'shop_single')

    Then I use this short code in your custom function hooked in wp_footer action hook.

    Here is that code:

    // Creating a shortcode that displays a random product image/thumbail
    if( !function_exists('custom_shortcode_random_thumbnail') ) {
    
        function custom_shortcode_random_thumbnail( $atts ) {
    
            // Shortcode attributes
            $atts = shortcode_atts(
                array(
                    'cat'   => '', // product category shortcode attribute
                    'size'      => 'shop_thumbnail', // Default image size
                ),
                $atts, 'random_thumbnail'
            );
    
            // Get products randomly (from a specific product category)
            $random_post = get_posts( array(
                'posts_per_page' => 1,
                'post_type' => 'product',
                'orderby'   => 'rand',
                'post_status' => 'published',
                'tax_query' => array( array(
                    'taxonomy' => 'product_cat',
                    'field' => 'slug',
                    'terms' => $atts['cat'],
                ) )
            ) );
            // Get an instance of the WC_Product object
            $product = wc_get_product($random_post[0]->ID);
    
            // The Product permalink
            $product_permalink = $product->get_permalink();
    
            // The Product image. Size can be: 1. 'shop_thumbnail', 2. 'shop_catalog' or 3. 'shop_single'
            $product_image = $product->get_image( $atts['size'] );
    
            // The output
            return '<div id="random-pic"><a href="' . $product_permalink . '">' . $product_image . '</a></div>';
        }
        add_shortcode( 'random_thumbnail', 'custom_shortcode_random_thumbnail' );
    }
    
    
    // Using the shortcode to display a random product image
    function get_random_thumbnails_for_reg(){
        // Only for page ID 381
        if( ! is_page( 381 ) ) return;
    
        echo do_shortcode( "[random_thumbnail cat='clothing']" );
    }
    add_action('wp_footer', 'get_random_thumbnails_for_reg', 50);
    

    Code goes in function.php file of your active child theme (or theme) or also in any plugin file.

    This code is tested and works