I have inserted an image onto my woo-commerce single product page using the below hook and code written into my functions.php file:

add_action('woocommerce_after_single_product_summary', add_content_on_woocommerce_after_single_product_summary',1);

function add_content_on_woocommerce_after_single_product_summary() {
    
      echo "<img src='https://mywebsite/wp-content/uploads/2022/02/blocks.png' >" ;
}

I only want this image to display on mobile and not desktop. Is there any code I can add to this in my functions.php file to achieve this?

I have inserted an image onto my woo-commerce single product page using the below hook and code written into my functions.php file:

add_action('woocommerce_after_single_product_summary', add_content_on_woocommerce_after_single_product_summary',1);

function add_content_on_woocommerce_after_single_product_summary() {
    
      echo "<img src='https://mywebsite/wp-content/uploads/2022/02/blocks.png' >" ;
}

I only want this image to display on mobile and not desktop. Is there any code I can add to this in my functions.php file to achieve this?

• functions
• woocommerce-offtopic

• You could use wp_is_mobile() to sniff for a mobile device. – Pat J Commented Mar 4, 2022 at 21:42
• 1 I'd be careful with this wp_is_mobile(). It does not JUST detect small screens. Check the link Pat sent. You should just use css and media queries. Add a class to your image in your code and make it only show on small screens. – rudtek Commented Mar 4, 2022 at 23:07

1 Answer 1

Probably the easiest method would be assign the image a class and display:none it based on media query.