[Plugin: Woocommerce] woocommerce variable product main image not showing

Hi, was hoping I could get help with my issue.

Theme: Zerif Lite

I tried overriding my woocommerce by adding a “Percentage Sale Bubble” by copy-pasting the “template folder” in plugins/woocommerce/template into zerif-lite/woocommerce folder, then changing the codes in zerif-lite/woocommerce/template/loop/sale-flash.php and zerif-lite/woocommerce/template/single-product/sale-flash.php with this code right here https://www.wpstuffs.com/display-product-discountoffer-percentage-bubble-woocommerce/

Nothing happened, no percentage bubble appeared, just the plain SALE sign. I guess it is because of the woocommerce.php file in zerif-lite that is prioritized over the changes in the woocommerce folders. So I deleted all the changes I made in the pasted “template” folder.

Now the issue that did happen, is that after doing that, the main image in all my “variable products” cannot be viewed (simple product is fine), however when I click the empty box, the lightbox popup did appear with the image. I wonder what is causing the issue.

Variable Product Image Problem:
https://www.vaxcorpindo.com/vaxcommerce/vax-immunize/engerix-b-adult-hepatitis-b/
Simple Product Image No Problem:
https://www.vaxcorpindo.com/vaxcommerce/vax-immunize/flubio-influenza-flu/

I don’t think this is a plugin issue, since I have deactivated all plugins accept woocommerce and still unresolved. I think I might have messed something up by copy pasting the template folders from plugins/woocommerce/template to zerif-lite/woocommerce/

Help :'(
Thank you

https://www.ads-software.com/plugins/woocommerce/

[Moderator note: Please don’t bump]