[Resolved] Woocommerce Hook under product image?

[David]

Really struggling with this, any other ideas??

[Tom]

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>

[David]

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

[Tom]

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>

[David]

Thanks Tom

[Tom]

You’re welcome 🙂

[David]

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

[Tom]

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 🙂

[David]

Hi Tom

No luck with that…

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

Any other ideas?

Thanks
Dave

[Tom]

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>

[David]

Still no luck Tom, any other ideas…

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

[Tom]

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>

[David]

YES! that did it 🙂 Thanks Tom.

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

[Tom]

You’re welcome 🙂

[Paul]

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?

[Author]

Posts