display Random product thumbnails for specific categories

Question

I am trying to create a dynamic trending category box to be look like below:

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

Original Source: random product thumbnail

unfortunately above code is only for one category, what I need is to add 8 Categories box 4 columns in each row, and show random images x 3 for the same category.

I have tried but did not found a better plugin or code for this purpose.

Answer 1

You have to loop your categories and build query for your products in this category.

Here is my solution - [random_thumbnail cat_ids='1,2,3,4,5,6,7,8']

if( !function_exists('custom_shortcode_random_thumbnail') ) {
    function custom_shortcode_random_thumbnail( $atts ) {
        // Shortcode attributes
        $atts = shortcode_atts(
            array(
                'cat_ids'   => '', // category ids
                'size'      => 'shop_thumbnail', // Default image size
            ),
            $atts, 'random_thumbnail'
        );

        $args = array(
            'orderby'      => 'rand',
            'hide_empty' => true,
            'include'    => $atts['cat_ids']
        );

        $product_categories = get_terms( 'product_cat', $args );
        if($product_categories) {
            echo '<div class="category-boxes-wrap">';
            foreach($product_categories as $cat) {
                $args = array(
                    'posts_per_page' => 3,
                    'post_type' => 'product',
                    'orderby' => 'rand,',
                    'suppress_filters' => true,
                    'tax_query' => array(
                        array(
                            'taxonomy' => 'product_cat',
                            'field' => 'slug',
                            'terms' => $cat->slug,
                        )
                    ),
                );

                $product_list = get_posts( $args );
                shuffle($product_list); // extra shuffle if you need

                if($product_list):
                    echo '<div class="category-box">';
                        echo '<div class="category-title"><a href="'.get_category_link($cat->term_id).'">'.$cat->name.'</a></div>';
                        echo '<div class="cat-prod-count">'.$cat->count.' '.__('products','textdomain').'</div>';
                        echo '<div class="product-images">';
                        foreach ( $product_list as $list ) : setup_postdata( $list );
                            global $product;
                            echo '<a href="'.get_permalink( $product->get_id() ).'">';
                            echo $product->get_image();
                            echo '</a>';
                        endforeach;
                        echo '</div>';
                    echo '</div>';
                endif;
                wp_reset_postdata();

            }
            echo '</div>';
        }
    }
    add_shortcode( 'random_thumbnail', 'custom_shortcode_random_thumbnail' );
}

The css i have used for the result - https://prnt.sc/1yb239g

.category-boxes-wrap {
    display: grid;
    grid-template-columns: repeat(4,1fr);
}
.category-box {
    border: 1px solid rgb(153, 153, 153);
    padding:30px;
}
.category-title,
.cat-prod-count {
    text-align: center;
}
.product-images {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    grid-column-gap: 10px;
}
.product-images img {
    width: 100%;
    height: auto;
}