WooCommerce is a powerful ecommerce plugin for WordPress users and can easily transform your WordPress blog to a fully fledged ecommerce site making you tons of money. However, not everything is straightforward, sometimes you may have the need to change a few things here and there and some are not as simple as ticking a checkbox and hitting the save button. There are those features that require you to go to the backend and have some code written.
An awesome client of ours recently asked us how to remove a product image from the product details page and since this seems to be a very much asked question, we decided to create a tutorial about it.
First there are two methods you can use, one is the php code method and the other is the CSS trick method. You can use either or combine all.
The php code method:
This method requires you add some code snippets on the functions.php file. The functions.php file is a file that is there by default on every WordPress theme. To get to yours follow this route: cPanel>>file manager>>public_html>>wp-content>>themes>>your current active theme>>functions.php. This path assumes that your WordPress installation is at the root of your public_html folder and accessible via yourdomain.com directly without adding a subdirectory. If it is not, add the path to the subdirectory after “public_html”.
1. Remove All Images On All Single Product Pages
remove_action( 'woocommerce_before_single_product_summary', 'woocommerce_show_product_images', 20 );2. Remove All Thumbnail Images On All Single Product Pages
remove_action( 'woocommerce_product_thumbnails', 'woocommerce_show_product_thumbnails', 20 );The CSS Method:
- From your admin dashboard, go to Appearance > Customize.
- Click Additional CSS.
- Add this piece of CSS code in the textarea:
.woocommerce-product-gallery {display:none;}This CSS trick above will hide the product image, however, the short description will still align to the right side of the content area. So you might want to add the below CSS code to make it aligned to the left instead:
.woocommerce #content div.product div.summary, .woocommerce div.product div.summary, .woocommerce-page #content div.product div.summary, .woocommerce-page div.product div.summary {float: left;}
