Woocommerce Hook under product image?

Really struggling with this, any other ideas??

Would definitely help if WooCommerce had a hook in that area.

It's not ideal, but what about using javascript to clone the element and insert it where we want it?

For example, in a Hook Element in the wp_footer hook:

<script>
    jQuery( document ).ready( function( $ ) {
        $( '.request-info-button' ).clone().insertAfter( '.woocommerce-product-gallery__wrapper' );
    } );
</script>

Thanks Tom, that worked although I changed it to this to include the PDF docs...

<script>
    jQuery( document ).ready( function( $ ) {
	$( '.pdf-docs' ).clone().insertAfter( '.woocommerce-product-gallery__wrapper' );
	$( '.request-info-button' ).clone().insertAfter( '.woocommerce-product-gallery__wrapper' );
    } );
</script>

Is it possible to remove it from this position on mobile?

Thanks
Dave

Sure, try this:

<script>
    jQuery( document ).ready( function( $ ) {
	$( '.pdf-docs' ).clone().insertAfter( '.woocommerce-product-gallery__wrapper' ).addClass( 'hide-on-mobile' );
	$( '.request-info-button' ).clone().insertAfter( '.woocommerce-product-gallery__wrapper' ).addClass( 'hide-on-mobile' );
    } );
</script>

Thanks Tom

You're welcome :)

Hi Tom

When adding an image to the product gallery, it's moved the request more info and PDF docs above the images...

http://185.20.51.60/~envirotechalarms/product/water-leak-detection-multizone-alarms/

Any ideas how I can move it back below, like on the pages that only have one product image...

http://185.20.51.60/~envirotechalarms/product/50mm-to-300mm-wras-approved-water-meters/

Thanks
Dave

Hi there,

Try this code instead:

<script>
    jQuery( document ).ready( function( $ ) {
        if ( $( '.flex-control-nav' ).length ) {
            $( '.pdf-docs' ).clone().insertAfter( '.flex-control-nav' ).addClass( 'hide-on-mobile' );
	    $( '.request-info-button' ).clone().insertAfter( '.flex-control-nav' ).addClass( 'hide-on-mobile' );
        } else {
	    $( '.pdf-docs' ).clone().insertAfter( '.woocommerce-product-gallery__wrapper' ).addClass( 'hide-on-mobile' );
	    $( '.request-info-button' ).clone().insertAfter( '.woocommerce-product-gallery__wrapper' ).addClass( 'hide-on-mobile' );
        }
    } );
</script>

Let me know :)

Hi Tom

No luck with that...

http://185.20.51.60/~envirotechalarms/product/water-leak-detection-multizone-alarms/

Any other ideas?

Thanks
Dave

Let's try this instead:

<script>
    jQuery( document ).ready( function( $ ) {
	$( '.pdf-docs' ).clone().appendTo( '.woocommerce-product-gallery' ).addClass( 'hide-on-mobile' );
	$( '.request-info-button' ).clone().appendTo( '.woocommerce-product-gallery' ).addClass( 'hide-on-mobile' );
    } );
</script>

Still no luck Tom, any other ideas...

http://185.20.51.60/~envirotechalarms/product/water-leak-detection-multizone-alarms/

I wonder if it's because the gallery is being initiated using javascript.

What about this?:

<script>
    jQuery( window ).load( function() {
	jQuery( '.pdf-docs' ).clone().appendTo( '.woocommerce-product-gallery' ).addClass( 'hide-on-mobile' );
	jQuery( '.request-info-button' ).clone().appendTo( '.woocommerce-product-gallery' ).addClass( 'hide-on-mobile' );
    } );
</script>

YES! that did it :) Thanks Tom.

http://185.20.51.60/~envirotechalarms/product/water-leak-detection-multizone-alarms/

You're welcome :)

Along this same line, I am looking to include a simple shortcode to display a special button below the product gallery on both desktop and mobile.

[example_shortcode]

Is it possible to do this?