[Resolved] Woocommerce Hook under product image?

[David]

Hello

Is there a hook position for underneath the product image?

Thanks
Dave

[David]

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

[David]

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?

[David]

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.

[David]

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

Thanks
Dave

[David]

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

[David]

Below the summary on mobile would be great David.

[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;
    }
}

[David]

Works perfectly 🙂 thanks David!

[David]

Great to hear and glad to be of help.

[David]

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

[David]

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

https://autoprefixer.github.io

[David]

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

[David]

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

[David]

It didn’t like it…

https://ibb.co/80vbhSw

[Author]

Posts