- This topic has 30 replies, 2 voices, and was last updated 1 year, 3 months ago by Leo.
-
AuthorPosts
-
August 6, 2019 at 5:12 am #976934David
Hello
Is there a hook position for underneath the product image?
Thanks
DaveAugust 6, 2019 at 5:40 am #976950DavidStaffCustomer SupportHi 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
August 6, 2019 at 5:58 am #976966DavidThanks 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?
August 6, 2019 at 6:07 am #976975DavidStaffCustomer SupportIf 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.
August 6, 2019 at 6:16 am #976990DavidSome products may require some additional images, so the carousel will probably use – any help would be great.
Thanks
DaveAugust 6, 2019 at 7:29 am #977063DavidStaffCustomer SupportGonna be tricky one – on mobile where do you want the PDF docs to be displayed? Still below the image or below the summary?
August 6, 2019 at 7:33 am #977067DavidBelow the summary on mobile would be great David.
August 6, 2019 at 7:46 am #977082DavidStaffCustomer SupportIn 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 themax-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; } }
August 6, 2019 at 8:36 am #977269DavidWorks perfectly 🙂 thanks David!
August 6, 2019 at 8:38 am #977272DavidStaffCustomer SupportGreat to hear and glad to be of help.
September 5, 2019 at 4:22 am #1001580DavidHi David
I’ve had to test this page in Edge 15 on Windows 10 and the product page is showing up in 1 column…
http://185.20.51.60/~envirotechalarms/product/leakstopper1/
Any ideas how to sort this in Edge 15 on Windows 10?
Thanks
DaveSeptember 5, 2019 at 4:25 am #1001582DavidStaffCustomer SupportTry running the CSS provided through an autoprefixer to give you the MS varients:
September 5, 2019 at 4:32 am #1001587DavidThanks David, should I run the whole css file through this?
September 5, 2019 at 4:38 am #1001595DavidStaffCustomer SupportThe CSS i provided here. It will add a load of prefixed versions for MS-Grid to the code.
September 5, 2019 at 4:56 am #1001603DavidIt didn’t like it…
-
AuthorPosts
- The topic ‘Woocommerce Hook under product image?’ is closed to new replies.