WooCommerce 3.0.0/3.0.1 and the images issue

The following solution removes Enfolds custom functions for the image display of products and variations to restore the new image display starting from WooCommerce 3.0.0 including the new zoom feature and the WooCommerce native lightbox.

• Use only with WooCommerce Version 3.x.x
• Use only with Enfold version 4 to 4.0.5

If you just want to fix the basic image issue please stick with my first solution.

If you are curious and want to use the new zoom and lightbox feature from woocommerce continue reading.

—————————————————————————–
If you do NOT have a Child Theme

1. Download https://mensmaximus.de/dokumente/enfold/enfold-child-wc3.zip
2. Login to wordpress and select Appearance -> Themes in the admin menu
3. Click on ‘add new’ (top left of the theme page)
4. Click on ‘upload theme’ (top left of the theme page)
5. Click on the file select button and choose the enfold-child.zip file from step 1
6. Click on ‘Install now’
7. Activate the Enfold Child Theme after the installation has finished
8. Follow the instructions from http://kriesi.at/documentation/enfold/using-a-child-theme/
9. You are done. Have fun with the new features

—————————————————————————–
If you already have a Child Theme

1. Copy the following code block to the functions.php file of your child theme

/*
	Woocommerce 3.0.0 Compatibility Fix
	Remove Enfold's custom functions that conflict with the new image display in WooCommerce 3.0.0
*/
global $woocommerce;

if( version_compare( $woocommerce->version, '3.0.0', ">=" ) ) {

	add_theme_support( 'wc-product-gallery-zoom' );
	add_theme_support( 'wc-product-gallery-lightbox' );

	function avia_woocommerce_gallery_thumbnail_description($img, $attachment_id, $post_id, $image_class ) {
	    return $img;
	}
	function avia_woocommerce_post_thumbnail_description($img, $post_id){
	    return $img;
	}

}

2. Copy the following code block to the style.css file of your child theme

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

3. Download https://mensmaximus.de/dokumente/enfold/enfold-child-wc3.zip and unpack the file
4. Connect to your hosting account via ftp and navigate to your child themes directory
5. If the child theme directory does not contain a directory called woocommerce you can simply copy the woocommerce directory from my child theme (step 3) to your child themes directory. Otherwise you need to check whether the woocommerce directory in your child theme contains a directory named ‘single-product’. If not you can copy the ‘single-product’ directory contained in the ‘woocommerce’ directory from my child theme (step 3) to your child themes ‘woocommerce directory’. If you already have a directory called ‘single-product’ you have to check wether the files contained in my child theme exist in your child theme. If not copy theme. If they do you need to merge the modifications (Hint: search for ‘noLightbox noHover’ and most likely you will know what to do).
6. You are done. Have fun with the new features

The formerly used catalog image is hardcroped by default. The single product image used now has fixed width and variable height. You could of course change that in woocommerce settings and afterwards regenerate the thumbnails. You could also modify the product-image.php contained in my enhanced fix and change the shop_single (default thumbnail in woo 3) to any other predefined thumbnail size. My advice is to wait until we know which way Enfold will chose to avoid additional work.

@ollihb kann ich nicht bestätigen auch nicht auf der im Beispiel genannten Seite

@ollihb ich habe das anders verstanden. Wenn ich eine Variation auswähle und auf das Vorschaubild (lupe) des Hauptbildes klicke, wird das korrekte Bid gezeigt. Das Gallerie Problem sehe ich jetzt auch. Das dürfte an der fehlenden Gallerie Unterstützung liegen, da bei anderen Themes zusätzlich zur Gallerie immer auch das Hauptbild in der Thumbnails erscheint.

• This reply was modified 7 years, 7 months ago by mensmaximus.