[Resolved] Hook Position help

Home Forums Support [Resolved] Hook Position help

Home Forums Support Hook Position help

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #1525240
    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

    #1525581
    David
    Staff
    Customer Support

    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.

    #1525588
    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/

    #1525661
    David
    Staff
    Customer Support

    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;
    }
    #1525680
    David

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

    #1525687
    David
    Staff
    Customer Support

    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.

    #1525702
    David

    Thanks David, really appreciate your help.

    #1525716
    David
    Staff
    Customer Support
Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.