Site logo

Archived topic

Need a hook for woocomerce

9 replies · Started by Edwin on July 28, 2020

Viewing posts 1–10 of 10

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

Hi Leo,

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

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

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.

Hi David,

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

Thanks again :-)

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

Thanks David,

That is working great :-)

Glad to hear that

This archived topic is closed to new replies.