Woocommerce Hook under product image?

Hi there,

for the product archives this:

woocommerce_shop_loop_item_title

For the single product its more tricky.
There is this deprecated hook that works only if there is no thumbnail carousel:

woocommerce_product_thumbnails

Or hook it after the summary and use some to reposition it:

woocommerce_after_single_product_summary

Thanks David, I can't see the woocommerce_product_thumbnails hook.

I've added it to woocommerce_after_single_product_summary but it appears to low down after the product image...

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

Anyway I can get it to go directly under the product image?

If you're not adding any additional images to the products ( so no carousel ) then you can use add this woocommerce_product_thumbnails by selecting the Custom Hook from the list and adding it to the field provided.

If thats no good then it will take a bit of customization. Which i can help with.

Some products may require some additional images, so the carousel will probably use - any help would be great.

Thanks
Dave

Gonna be tricky one - on mobile where do you want the PDF docs to be displayed? Still below the image or below the summary?

Below the summary on mobile would be great David.

In that case we can try this CSS:

@media(min-width: 769px) {
    .woocommerce div.product {
        display: grid;
        grid-template-columns: 50% 50%;
    }

    .woocommerce div.product>div {
        grid-column: 1 / 3;
    }

    .woocommerce #content div.product div.images,
    .woocommerce div.product div.images,
    .woocommerce-page #content div.product div.images,
    .woocommerce-page div.product div.images {
        width: 100% !important;
        grid-column: 1;
        grid-row: 1/3;
    }

    .woocommerce .product .entry-summary {
        grid-column: 2;
        grid-row: 1 / 5;
        padding-left: 40px;
    }

    .woocommerce .product .pdf-docs {
        grid-column: 1;
        grid-row: 3;
        align-self: start;
    }
}

In your pdf-docs css remove the max-width: 48%; so it fills the first column.

Prefixed version:

@media(min-width: 769px) {
    .woocommerce div.product {
        display: -ms-grid;
        display: grid;
        -ms-grid-columns: 50% 50%;
        grid-template-columns: 50% 50%;
    }

    .woocommerce div.product>div {
        -ms-grid-column: 1;
        -ms-grid-column-span: 2;
        grid-column: 1 / 3;
    }

    .woocommerce #content div.product div.images,
    .woocommerce div.product div.images,
    .woocommerce-page #content div.product div.images,
    .woocommerce-page div.product div.images {
        width: 100% !important;
        -ms-grid-column: 1;
        grid-column: 1;
        -ms-grid-row: 1;
        -ms-grid-row-span: 2;
        grid-row: 1/3;
    }

    .woocommerce .product .entry-summary {
        -ms-grid-column: 2;
        grid-column: 2;
        -ms-grid-row: 1;
        -ms-grid-row-span: 4;
        grid-row: 1 / 5;
        padding-left: 40px;
    }

    .woocommerce .product .pdf-docs {
        -ms-grid-column: 1;
        grid-column: 1;
        -ms-grid-row: 3;
        grid-row: 3;
        -ms-grid-row-align: start;
            align-self: start;
    }
}

Works perfectly :) thanks David!

Great to hear and glad to be of help.

Hi David

I've had to test this page in Edge 15 on Windows 10 and the product page is showing up in 1 column...

https://ibb.co/BZn3ysJ

http://185.20.51.60/~envirotechalarms/product/leakstopper1/

Any ideas how to sort this in Edge 15 on Windows 10?

Thanks
Dave

Try running the CSS provided through an autoprefixer to give you the MS varients:

https://autoprefixer.github.io

Thanks David, should I run the whole css file through this?

The CSS i provided here. It will add a load of prefixed versions for MS-Grid to the code.

It didn't like it...

https://ibb.co/80vbhSw