[Resolved] Need a hook for woocomerce

[Edwin]

I am trying to list a hook under the single product image in woocommerce.
Can you help me in the right direction?

[Leo]

Hi there,

This might help:
https://www.businessbloomer.com/woocommerce-visual-hook-guide-single-product-page/
https://docs.woocommerce.com/document/introduction-to-hooks-actions-and-filters/

WooCommerce hooks are completely handled by the plugin itself so you might need to check with their support for more information.

[Edwin]

Hi Leo,

Thanks for your reply. Sorry, I should have mention that I am trying to create a hook through elements.

[Leo]

And what issue are you having?

We do have most of the hooks in WooCommerce listed in the list:
https://www.screencast.com/t/M4wUezqpq

Those hooks are still coming from and handled by WooCommerce itself.

If you find one that’s not listed, then select Custom Hook and type it in the name:
https://www.screencast.com/t/u12VIVbNzN4

Hope this helps 🙂

[Edwin]

Hi Leo

We do have most of the hooks in WooCommerce listed in the list:

Yes, but the one i need is not listed there and i tried other, but don’t get it right.
What i am trying to archive is to show short-code (form) added to a hook in elements to list under the product image in single product page.

Screenshot https://snipboard.io/ERzWHg.jpg

[David]

Hi there,

GP uses the standard woocommerce templates and the hook you’re looking for: woocommerce_product_thumbnails – was removed by woo quite some time ago.

Which is terribly annoying as it makes it real difficult adding content in that position.

Apart from creating a new single product template in your child theme. We could try adding this function to create a some wrappers to include your shortcode within:

add_action( 'woocommerce_before_single_product_summary', 'db_woo_single_open_wrapper' , 1 );
add_action( 'woocommerce_before_single_product_summary', 'db_woo_single_close_inner_wrapper' , 50 );
add_action( 'woocommerce_after_single_product_summary', 'db_woo_single_close_wrapper' , 1 );

function db_woo_single_open_wrapper() {
    echo '<!-- woo top row wrapper start -->
    <div class="woo-single-top-wrapper">
    <div class="woo-single-thumb-wrapper">';
}

function db_woo_single_close_inner_wrapper() {
    echo do_shortcode( '[your_shortcode]' );
    echo '</div>';
}

function db_woo_single_close_wrapper() {
    echo '</div>
    <!-- woo top row wrapper end -->';
}

It will provide us with a row and column layout. It will require some CSS to form that layout – if you want to add the PHP snippet i can look at the CSS required.

[Edwin]

Hi David,

I think that worked.
The only thing i need is some css to move it under the picture.

Thanks again 🙂

[David]

This should get you somewhere close:

.woo-single-top-wrapper {
    display: flex;
}
.woo-single-thumb-wrapper {
    flex: 0 0 20%;
    margin-bottom: 2em;
}
.woocommerce #content div.product  .woo-single-top-wrapper div.summary {
    flex: 1;
    margin-left: 2em;
}

.woocommerce #content div.product .woo-single-top-wrapper div.images {
    width: 100%;
}

@media (max-width: 768px) {
    .woo-single-top-wrapper {
        flex-direction: column;
    }
    .woo-single-thumb-wrapper,
    .woocommerce #content div.product  .woo-single-top-wrapper div.summary {
        flex: 1;
        margin-left: 0;
    }
}

[Edwin]

Thanks David,

That is working great 🙂

[David]

Glad to hear that

[Author]

Posts