Woocommerce Image Bugs

I Need Help
1

Hey all,
i have to add a WooCommerce shop to a Blocs project and run in to two mayor problems:
first problem was that the box to add a product image to a product was missing, I found a little code snippet that when added to the functions.php would fixt this.

// Add theme support for Featured Images
add_theme_support(‘post-thumbnails’, array(
‘post’,
‘page’,
‘product’,
));

the second problem, wich I was not able to fix yet, is that on the product page the product image is not visible. The rest of the standard Woocommerce content is rendered just fine but not the product image.
does anyone got an idea how to fix this?

Thanks a lot!

ps: blocs is v.5.0.4 (plus), Wordpress v 6.1.1. Woo v7.3.0. - bug is related to blocs because I tested it with all other plugins deactivated and when switching to the Twenty Twenty-Three the bug disappears

2

@norm, this would be a great addition.

3

Update:
okay now its getting weird, the image ist there but somewhere a style that simply sets the opacity to 0 is added:

This is the div causing the problem:

<div class=​"woocommerce-product-gallery woocommerce-product-gallery--with-images woocommerce-product-gallery--columns-4 images" 
data-columns=​"4" style=​"opacity:​ 0;​​ transition:​ opacity .25s ease-in-out;​">​

the temporary fix is to add the following css to the theme css:

.woocommerce div.product div.images.woocommerce-product-gallery{
opacity:100!important;
}
2 Likes
4

Hi, how did you manage to add woocommerce shop to blocs?

2 Likes
5

Hi, A bit old, but I figured I would add some context in case someone else runs into the same issue.

A simple way of doing this is making a copy of the page.php file and labeling it woocommerce.php, then adding some additional code to the extra-function file in Blocs (options+cmd+c) code editor.

  1. Copy the page.php file, and within that file, make sure you remove the page.php loop and add the following code:
<?php woocommerce_content(); ?>

The code block should look something like this after you finish editing:

<div class="bloc l-bloc" id="bloc-7">
	<div class="container bloc-lg">
		<div class="row">
			<div class="col text-start">
				<div><div><?php woocommerce_content(); ?></div>
				</div>
			</div>
		</div>
	</div>
</div>

Please don’t remove the rest of the PHP code in the file, just the loop with the content.

  1. Open the code editor for extra functions and add the following code. Please note that in my development environment, I had to add a closing PHP tag, but in production, I was getting odd errors with a blank screen and plugins. After removing the closing tag, these issues went away. So, if you run into a similar issue, make sure you try it both ways.
<?php 
add_action( 'after_setup_theme', 'woocommerce_support' );
function woocommerce_support() {
   add_theme_support( 'woocommerce' );
}

// Add theme support for Featured Images
add_theme_support('post-thumbnails', array(
'post',
'page',
'product',
));

I hope this helps. I’ve been on a mission for over 2 weeks trying to get this working. So far, I am about 90% there. Let me know if you have any more questions.

6

Thank you! It helps a lot