Display a custom image linked to a random product in WooCommerce

Question

In WooCommerce, I want my customers to select an image that takes them to a random product when they click on it.

Get a random product id (array):

$random_product_array = get_posts( array( 'posts_per_page' => 1, 'post_type' => 'product', 'orderby' => 'rand', 'fields' => 'ids' ) );
$random_product_id    = reset($random_product_array); // Get the random product ID

Display a linked button to the random product:

echo '<a href= "www.mylink.com/“> <img alt= “mylink” src=https://www.mylink.com/images/promo pic.png get_permalink($random_product_id) . '" class="img  alt">' width=150” height=“70”</a>';

Answer 1

You are mostly there, you just missed the product permalink in the right location.

Here using a WP_Query:

// Get a random product (array with one value)
$random_product_id_array = get_posts( array( 
    'posts_per_page' => 1, 
    'post_type' => 'product', 
    'orderby' => 'rand', 
    'fields' => 'ids' 
) );

// Get the first value from the array (the random product ID)
$random_product_id = reset($random_product_array);

// Output
echo '<a href="'.get_permalink($random_product_id).'"><img alt="mylink" src="https://www.mylink.com/images/promo-pic.png" class="img" width="150" height="70"></a>';

This time it works.

Or you can also use a WC_Product_query instead like:

// Get a random product (array with one value)
$random_product_id_array = wc_get_products( array(
    'limit' => 1,
    'orderby' => 'rand',
    'return' => 'ids'
) );

// Get the first value from the array (the random product ID)
$random_product_id = reset($random_product_array);

// Output
echo '<a href="'.get_permalink($random_product_id).'"><img alt="mylink" src="https://www.mylink.com/images/promo-pic.png" class="img" width="150" height="70"></a>';

works the same way too.

---

Addition: You can embed that code in a shortcode like (using a WC_Product_query):

add_shortcode('random_img_link', 'display_random_img_link');
function display_random_img_link() {
    // Get a random product (array with one value)
    $query = wc_get_products( array(
        'limit' => 1,
        'orderby' => 'rand',
        'return' => 'ids'
    ) );
    
    // Here define your image link
    $image_src = 'https://www.mylink.com/images/promo-pic.png';

ob_start(); // Start buffering

echo '<a href="'.get_permalink(reset($query)).'"><img alt="mylink" src="'.$image_src.'" class="img" width="150" height="70"></a>';

return ob_get_clean(); // return  buffered content
}

Or (using a WP_Query):

add_shortcode('random_img_link', 'display_random_img_link');
function display_random_img_link() {
    // Get a random product (array with one value)
    $query = get_posts( array( 
        'posts_per_page' => 1, 
        'post_type' => 'product', 
        'orderby' => 'rand', 
        'fields' => 'ids' 
    ) );
    
    // Here define your image link
    $image_src = 'https://www.mylink.com/images/promo-pic.png';

ob_start(); // Start buffering

echo '<a href="'.get_permalink(reset($query)).'"><img alt="mylink" src="'.$image_src.'" class="img" width="150" height="70"></a>';

return ob_get_clean(); // return  buffered content
}

Code goes in functions.php file of your active child theme (or active theme). Tested and works.

USAGE: [random_img_link]