[Resolved] Hook Position help

[David]

Hello

I’m trying to move the related products, to underneath the block I have which say ask us about…

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

The Ask us about block has got a hook position of generate_before_footer. Any ideas how I can switch these 2 block around?

Thanks
Dave

[David]

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.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[David]

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/

[David]

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

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[David]

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

[David]

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.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[David]

Thanks David, really appreciate your help.

[David]

You’re welcome

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts