Conditionally Removing the Featured Product Image & Styling Gap from a WooCommerce Product Detail Page

[ad_1]

Considering I spent several hours searching for a way to do the following successfully without much luck, I figured the information was worth sharing.

I have a site using WooCommerce where some products need to have product images and others don't. On the individual product page, I wanted to be able to remove the image AND remove the gap to the left of the item description for that specific product page only.

I found a ton of solutions for removing images for single product pages all together. I found several for removing the image from a specific page, but those solutions still left the giant space where the image would have appeared.

After a lot of searching, altering some code and adding some custom CSS with help from my friend Tim, I was able to remove the product image on a specific single product page and remove the spacing gap via CSS for that same single product page – without affecting any other product detail pages.

Note: If you're not removing placeholder Featured Images globally, you'll need to know the product ID(s) of the specific product(s) you want to do this with. You can find it by mousing over the specific product name in your product listing in your WooCommerce Products dashboard. You'll see an “ID” with a number to the right of it appear below the product name in gray. That is the product ID for that specific product.

Conditionally remove the Featured Product Image from one specific product detail page

To conditionally remove the featured image from a single specific product detail page, add the following code to the functions file of your theme:

//*Conditionally remove the Featured Product Image from one specific product detail page
function remove_gallery_and_product_images()
if ( is_product() && is_single(PRODUCT-ID-HERE) )
remove_action( 'woocommerce_before_single_product_summary', 'woocommerce_show_product_images', 20 );
add_filter('body_class', 'no_prod_imgs_class');


add_action('template_redirect', 'remove_gallery_and_product_images');

You'll need to replace PRODUCT-ID-HERE with the ID number of your specific product.

Conditionally remove the Featured Product Image from multiple specific product detail pages

If you need to remove images from multiple specific pages, you'd use the code below in your theme's function file instead:

//* Conditionally remove the Featured Product Image from multiple specific product detail pages
function remove_gallery_and_product_images()
if ( is_product() && is_single(array(PRODUCT-ID-HERE, NEXT-PRODUCT-ID-HERE) ) )
remove_action( 'woocommerce_before_single_product_summary', 'woocommerce_show_product_images', 20 );
add_filter('body_class', 'no_prod_imgs_class');


add_action('template_redirect', 'remove_gallery_and_product_images');

You'll need to replace the PRODUCT-IDs with the ID numbers of your specific products.

Globally remove the Featured Product Image from any product detail page without a set Featured Image

If you'd like to remove the Featured Product Image from any product detail page that doesn't have one set, you can use the code below in your theme's functions file:

//* Globally remove the Featured Product Image from any product detail page without a set Featured Image
function remove_gallery_and_product_images()
global $post;
if ( is_product() && !has_post_thumbnail($post) )
remove_action( 'woocommerce_before_single_product_summary', 'woocommerce_show_product_images', 20 );
add_filter('body_class', 'no_prod_imgs_class');


add_action('template_redirect', 'remove_gallery_and_product_images');

Removing the spacing gap where the Featured Product Image would have appeared on the product detail page

While that worked for removing the featured product image from that specific product(s), it left me with that blank space where the image would have appeared. The only CSS I could readily find was to remove the styling on all featured product images. That wasn't going to work for me because I need the images to appear on some products.

To alter the CSS to remove the spacing gap for any product detail page without a Featured Image – providing you're using the functions above to remove the images, as the CSS below is called within them – add the following code to your theme's function file:

//* Add CSS for removed featured images from multiple specific product detail pages
function no_prod_imgs_class($classes)
$classes[] = 'no-product-images';
return $classes;


And then add the following CSS to your theme's CSS file:

.no-product-images .summary
width: 100% !important;


Hopefully this will help some folks out. Cheers.

[ad_2]

source_link MMO mastermind