WooCommerce hover over image changes to first gallery image

Hey Silje,
Try this CSS in your Enfold Theme Options ▸ General Styling ▸ Quick CSS field:

.single-product .avia-image-overlay-wrap:hover {
transform: rotateY(180deg);
}

before hover:

on hover:

Best regards,
Mike

Hi,
your test product doesn’t have a gallery, I see other product images at the bottom of the page in columns, but these are not part of the product gallery, so it is not possible.
It looks like you built the product with the ALB, try using the default editor and add your gallery under the product image in woocommerce, this should give you the effect you are looking for, as I understand.

Best regards,
Mike

Hi,
When creating a product with the ALB and you want to show the thumbnails under the main image you will first need to ensure that you have Enfold Theme Options ▸ Shop Options ▸ Product gallery ▸ WooCommerce 3.0 product gallery enabled.

Then add this css to your child theme stylesheet or the theme option Quick CSS

.single-product .flex-control-thumbs li {
    display: flex !important;
    float: left;
}

then add this code to the end of your child theme functions.php file in Appearance ▸ Editor:

add_shortcode( 'avs_product_gallery_hook', 'avs_product_gallery_hook_callback' );
function avs_product_gallery_hook_callback( $atts ) {
ob_start();
woocommerce_show_product_images();
$content = ob_get_clean();
return $content;
}

Please ensure to copy the code from the forum and not an email notification so the symbols are not converted.
and add this shortcode to your page where you want the image to show in a code block:
[avs_product_gallery_hook]


the switch occurs on click and not hover, as per woocommerce.
This will only work on product pages and not shop or archive pages, perhaps there is a plugin that will do that but you will prob need to also use the default editor instead of the ALB.

Best regards,
Mike

Hey!

Thank you for the update.

Please note that the modification from the previous thread is for the default editor and the main/featured product image. It’s not going to work when the Advance Layout Builder (ALB) is active. This is still possible with the ALB, but you’ll have to use the Image element. Go to the Advanced > Animation panel, then set the Image Hover Effect settings to Fade to another image.

Let us know if you need additional info.

Cheers!
Ismael

Hi,

I see there is no option to which image it should switch to though.

You can upload the image using the Alternate Fade Image option. Please check the screenshot below.

View post on imgur.com

We selected a temp image from the Media > Library.

View post on imgur.com

Best regards,
Ismael

Hi,

Thank you for sharing the complete steps. Regarding the older thread, the complete solution is already there; you just need to adjust the “std” parameter to “hover_active”.

remove_filter( 'avf_builder_elements', 'avia_woocommerce_product_elements', 500, 1 );
add_filter( 'avf_builder_elements', 'avia_woocommerce_product_elements_mod', 500, 1 );

function avia_woocommerce_product_elements_mod( $elements )
{
	$posttype = avia_backend_get_post_type();

    if( ! empty( $posttype ) && $posttype == 'product' )
    {
        $elements[] = array("slug"	=> "avia_product_hover",
            "name" 	=> "Hover effect on <strong>Overview Pages</strong>",
            "desc" 	=> "Do you want to display a hover effect on overview pages and replace the default thumbnail with the first image of the gallery?",
            "id" 	=> "_product_hover",
            "type" 	=> "select",
            "std" 	=> "hover_active",
            "class" => "avia-style",
            "subtype" => array("Yes - show first gallery image on hover" => 'hover_active', "No hover effect" => ''));

        $counter = 0;
        foreach( $elements as $element )
        {
            if( $element['id'] == 'sidebar' ) 
			{
				$elements[ $counter ]['required'] = '';
			}
            else if( $element['id'] == 'layout' ) 
            {
	            $elements[ $counter ]['builder_active'] = true;
	           // unset($elements[$counter]);
            }
            $counter++;
        }
    }

	return $elements;
}

Best regards,
Ismael

Hi,

This modification is intended only for the Enfold theme — it will not work with other themes.

Best regards,
Ismael

Hi,
Glad Ismael could help, if you have any further questions please create a new thread and we will gladly try to help you. Thank you for using Enfold.

Best regards,
Mike