product gallery images not showing

I’ve seen this issue posted in this forum and on other websites,

…at some point when upgrading to woocommerce 3 my product gallery images
stop showing.

things to know about my website:

— I do have a custom theme, I reworked an html website template and created a basic wordpress theme.

— from the previous versions of woocommerce I added woocommerce.php to my theme file to help style the product page (and it worked well, my product images did show at that time).

what I’ve tried to do to resolve the issue:

— From what I’ve read in support I needed to add theme support to my functions.php file, which I’ve done, and added additional css in my style.css file (css for product gallery image and product gallery trigger and product gallery flex control, etc…) please see code below.

— then I tried updating files in my theme folder following woocommerce documentation – I removed the woocommerce.php file and added a directory woocommerce/content-single-product.php (I copied the contents of content-single-product.php from my plugins/woocommerce files and added a bit of html for custom styling)

— I’ve disabled all script files and I’ve disabled all plugins and still nothing has worked to resolve the issue.

— I see through page inspector tools that my product images are loading on the page, but I can’t see what the conflict is from there.

any assistance would be greatly appreciated!
_Cindy

sample page with issues

add_action( 'after_setup_theme', 'bctheme_setup' );

function bctheme_setup() {
add_theme_support( 'wc-product-gallery-zoom' );
add_theme_support( 'wc-product-gallery-lightbox' );
add_theme_support( 'wc-product-gallery-slider' );
}

and then I added css to my style sheet:

.woocommerce-product-gallery {
position: relative;
margin-bottom: 3em
}

.woocommerce-product-gallery figure {
margin: 0
}

.woocommerce-product-gallery .woocommerce-product-gallery__image:nth-child(n+2) {
width: 25%;
display: inline-block
}

.woocommerce-product-gallery .flex-control-thumbs li {
list-style: none;
float: left;
cursor: pointer
}

.woocommerce-product-gallery .flex-control-thumbs img {
opacity: .5
}

.woocommerce-product-gallery .flex-control-thumbs img.flex-active,.woocommerce-product-gallery .flex-control-thumbs img:hover {
opacity: 1
}

.woocommerce-product-gallery img {
display: block
}

.woocommerce-product-gallery--columns-3 .flex-control-thumbs li {
width: 33.3333%
}

.woocommerce-product-gallery--columns-4 .flex-control-thumbs li {
width: 25%
}

.woocommerce-product-gallery--columns-5 .flex-control-thumbs li {
width: 20%
}

.woocommerce-product-gallery__trigger {
position: absolute;
top: 1em;
right: 1em;
z-index: 99;
}

a.woocommerce-product-gallery__trigger {
text-decoration: none;
}

.single-product div.product .woocommerce-product-gallery .woocommerce-product-gallery__trigger {
position: absolute;
top: .875em;
right: .875em;
display: block;
height: 2em;
width: 2em;
border-radius: 3px;
z-index: 99;
text-align: center;
text-indent: -999px;
overflow: hidden;
}

.single-product div.product .woocommerce-product-gallery .woocommerce-product-gallery__trigger {
background-color: #169fda;
color: #ffffff;
}

.single-product div.product .woocommerce-product-gallery .woocommerce-product-gallery__trigger:hover {
background-color: #1781ae;
border-color: #1781ae;
color: #ffffff;
}

.single-product div.product .woocommerce-product-gallery .woocommerce-product-gallery__trigger:before {
font: normal normal normal 1em/1 FontAwesome;
font-size: inherit;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
display: block;
content: "\f00e";
line-height: 2;
text-indent: 0;
}

The page I need help with: [log in to see the link]