Hook Position help

Hi there,

you can move your Ask us Block to the woocommerce_after_single_product_summary hook you may need to reduce the Hook Priority to below 10 but it should appear before the related products... but it won't be full width.

Thanks David, any ideas how to get it full width and not sitting in the right column?

http://185.20.51.60/~holleyhextallco/product/bayonne-provence-limestone/

Give you .moreinfoswatch-block a width: 100%; to force it below.

To make it full width is not easy without hackish CSS which i would hate to suggest.
My method would be this:

1. Use the Layout Element to make the single Product > Full Width.
2. Now to contain the galllery/summary:

2.1 Hook into: woocommerce_before_single_product_summary the opening for a contained wrapper:

<div class="woo-summary-wrap grid-container"><!-- open wrap -->

Note: if using a Hook Element delete the </div> that it will automatically add in the editor.

2.2 Now hook into woocommerce_after_single_product_summary with a lower priority then your Ask us block the closing </div>

This should keep the top half contained and the remainder of the page Full Width.

3. The related posts will need some CSS to contain them:

.single-product .related.products {
    max-width: 1350px;
    margin: auto;
}

That worked brilliantly David :) only issue is my breadcrumb sits outside of the container

Try the related product CSS for the breadcrumb:

.woocommerce .woocommerce-breadcrumb {
    max-width: 1350px;
    margin: auto;
}

In the Hook code i added the woo-summary-wrap class you may want to use that to add some left/right padding to stop it from touching the edges on smaller screens.

Thanks David, really appreciate your help.

You're welcome