This tutorial provides 2 code snippets which enable you to filter the main product image on the single product page in WooCommerce.
As seen in the demo video, this code can be used to :
- Replace the default image with a custom image when no product image is added.
- Add a custom image which replaces the main image on the single product page so the product image is displayed on all other locations, if added.
- When no product image is added, add a custom image which only displays as the main image on the single product page and the placeholder displays in all other locations.
- Also display the product gallery images when a custom image is added.
- Display a custom placeholder image in all locations when a custom or default image is not added.
Watch Demo Video #
Tested using the Lifestyle Pro child theme by StudioPress however will work in any Genesis or non Genesis child theme.
Installation #
There’s 2 steps relating to usage of the code in the download folder.
Step 1 : Copy & paste the code from the functions.php to the end of your child themes functions file.
Step 2 : Using ACF free or pro versions, create a new field named wc_product_image and use the following settings :
Note : If you want to add a custom image when no product image is added, you’ll need to use the 2nd snippet in the download folder which is the same as this code or this code if you prefer using WordPress custom fields rather than ACF.
2nd Method #
When no product image is added, add a custom image which only displays as the main image on the single product page and the enable the placeholder image to display in all other locations.
When no product image or custom image is added, display the WC placeholder image which you can also customize using the links below.
Leave a Reply
You must be logged in to post a comment.