What to do with with the Product page
1) First of all, we need to optimize all images. I don't have any idea why this wasn't done until today, because now it will take much more time and require much more accuracy and will generally be harder to do - all images are different in their aspect ratio and absolutely all of them (about 4000) need to reduce their size in megabytes;

2) Please, notice, that you need to retain the existing SEO features of the images, for example existing photo keywords, alt text and captions should be retained.

Below is the way how to modify the code of the Product page to avoid at least issues with images displaying (especially when switching photos and other actions).
① Let's work with the top part
1. Let's take any product page. As we can see it looks incomplete, empty, and also it has few issues with displaying on different screens. We need to make it more informative, better look and easy to use.
Let's fill the empty space with these two elements. Notice, that we see here 3 elements: left, right and parent (marked as purple, orange and green accordingly):
We see all 3 elements in code, but meanwhile we have useless Blue part, that WordPress automatically created. You can remove this part using WordPress tools:
Let's see the rules for the purple element:
element.style {
    display: inline-block;
}
#tab-description {
    width: 60%;
}
.woocommerce div.product .woocommerce-tabs .panel {
    display: inline-block !important;
    width: 49%;
    vertical-align: top;
}
Convert this part into this (you also can remove empty rules):
element.style {
}

#tab-description {
float: right;
}
.woocommerce div.product .woocommerce-tabs .panel {
    width: 48%;
    vertical-align: top;
}
Now see rules for orange element:
element.style {
    display: none;
}
#tab-additional_information {
    width: 39%;
    float: right;
}
Let's do this:
element.style {
}
#tab-additional_information {
    float: right;
    padding-right: 9%;
    box-sizing: border-box;
}
And finally let's look at the parent element:
.woocommerce #content div.product .woocommerce-tabs, .woocommerce div.product .woocommerce-tabs, .woocommerce-page #content div.product .woocommerce-tabs, .woocommerce-page div.product .woocommerce-tabs {
    clear: both;
}
Simply remove this rule:
.woocommerce #content div.product .woocommerce-tabs, .woocommerce div.product .woocommerce-tabs, .woocommerce-page #content div.product .woocommerce-tabs, .woocommerce-page div.product .woocommerce-tabs {
}
And now we can see how beautiful is it now
2. Also I noticed the new problem which I didn't add into the previous Doc - if any image is active except the first image and we want to change the size of the plant, it will automatically switch it to the first image. The same thing will happen if we will try to push Clear button (to cancel it) if the size change is already selected. Try it please.
Maybe it happens because of the WooCommerce updates top block or something like this, or maybe it is related to the filter cleaning rule.
② Let's work on the bottom part of this page
Let's replace this ugly button with something like the one I attached
③ On the other screen sizes
1. This is the element where we need to change one style rule
Before
.largestSection__inner {
    background-image: url(http://leidsens.com/dev/conifer/wp-content/uploads/2020/04/prodetails_page_bg2.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    text-align: center;
    border-radius: 4px;
    padding: 35px 0;
}
After
.largestSection__inner {
    background-image: url(http://leidsens.com/dev/conifer/wp-content/uploads/2020/04/prodetails_page_bg2.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    text-align: center;
    border-radius: 4px;
    padding: 35px 20px;
}