[Support request] WooCommerce Page Layout for Individual Products

[Website Psychiatrist]

I’ve finally gotten to the point of wanting to mess around with the woocommerce single page layout. I’ve finally got an example of something I’d like to do.

I’ve added a contact form 7 block with a hook on all product pages with this hook: woocommerce_after_single_product_summary.

Here’s an example page:
https://www.floormat.com/johnsonite-oem-anti-slip-tread-tape/

Ideally, the block would be under the images, as there’s all that unused space (much to the dismay of the customer).
The problem is, it doesn’t appear that there are any valid hooks under the images.
http://www.wp-tutorials.com/wp-content/uploads/2017/12/WooCommerce-Single-Product-Page-Hooks-Visual-list.png

Any suggestions as to how to get something under the images without having to mess with a child theme?

Thanks!
Bill

[Elvin]

Hi Bill,

Any suggestions as to how to get something under the images without having to mess with a child theme?

To add into the conversation:

You can try checking WooCommerce’s list of hooks on the code’s end of things (github repository). I believe they have a hook after the product image if that’s what you’re pertaining to.

You can try woocommerce_before_single_product_summary.

[Website Psychiatrist]

Using “woocommerce_before_single_product_summary” puts the contact form below the header and above both WooCommerce Columns.

It’s looking like the hook I want to use is “woocommerce_product_thumbnails” but it doesn’t seem that generate press gives that as an option.

Thanks,
Bill

[Ying]

Hi Bill,

If you think woocommerce_product_thumbnails would work, you can choose custom hook, then enter the woocommerce_product_thumbnails.

Give it a try, let me know.

[Website Psychiatrist]

Hi Ying,

That’s cool. I was unaware of the custom hooks. You guys think of (almost) everything! 🙂

I tried using woocommerce_product_thumbnails, and it appears to be drawing my container under the images, instead of after.

I currently have two elements configured to display the same block one using the woocommerce_before_single_product_summary hook and one using the woocommerce_product_thumbnails custom hook.

You can see the woocommerce_before_single_product_summary above the related products.

If you look at the source code for: https://www.floormat.com/johnsonite-oem-anti-slip-tread-tape/ you’ll see that there are two instances of “Question about this product?” at line 1174 and 1287.

If you use inspector, you can delete the images and ultimately see the contact form.

I’ve tried experimenting with margins on my container, but that just made everything weird.

I’m so close. How do I get my container to display below the thumbnails?

Thanks!
Bill

[Elvin]

The best hook would’ve been somewhere after the <ol class="flex-control-nav flex-control-thumbs"> element but there’s no hook there that’s outside the <figure> element – https://github.com/woocommerce/woocommerce/blob/3611d4643791bad87a0d3e6e73e031bb80447417/plugins/woocommerce/templates/single-product/product-image.php#L39-L55

You can see the woocommerce_before_single_product_summary above the related products.

If you look at the source code for: https://www.floormat.com/johnsonite-oem-anti-slip-tread-tape/ you’ll see that there are two instances of “Question about this product?” at line 1174 and 1287.

I’m not sure I’m seeing this. Perhaps it’s temporarily removed?

I believe you can still use woocommerce_before_single_product_summary but perhaps we need to pinout the correct priority and CSS styling. The image element is actually hooked to this same hook. (priority 20) https://github.com/woocommerce/woocommerce/blob/e035efe85b50129e2c0aa399ffb82ee55edae331/plugins/woocommerce/templates/content-single-product.php#L41

I think we can hook it to the same hook but use priority 21. Then let us check the page w/ it on so we can inspect and see what can be done w/ CSS. 😀

[Website Psychiatrist]

That’s interesting. When I visited https://www.floormat.com/johnsonite-oem-anti-slip-tread-tape/ my contact form on the woocommerce_before_single_product_summary hook didn’t display until I did a hard refresh. That may explain what you saw (or didn’t see).

I’ve disabled my custom element. I’ve switched my element to woocommerce_before_single_product_summary hook with a 25 priority. 21 didn’t work, so I figured I’d go crazy. 🙂

It’s not right, but it’s getting better compared to leaving the priority at the default of 10.

I’ve turned this element on for this product so that it would not affect the layout of all products until it’s settled.

You should be able to see it here:
https://www.floormat.com/toastimat-heated-yoga-mat/

I’m seeing the “Question about this product?” to the right of the images instead of below them.

Any CSS brilliance would be greatly appreciated.

Thanks!
Bill

[Elvin]

That’s interesting. When I visited https://www.floormat.com/johnsonite-oem-anti-slip-tread-tape/ my contact form on the woocommerce_before_single_product_summary hook didn’t display until I did a hard refresh. That may explain what you saw (or didn’t see).

Ah that’s likely page cached on server’s end.

Any CSS brilliance would be greatly appreciated.

Try this:

@media (min-width:769px){
.woocommerce-product-gallery + .gb-container.gb-container-529e6cd1 {
    width: 50%;
    float: left;
}
}

[Website Psychiatrist]

That’s it! That’s perfect!

Thank you!

[Elvin]

No problem. Let us know if you need further help. 😀

[Author]

Posts