Archived topic
Need a hook for woocomerce
9 replies · Started by Edwin on July 28, 2020
I am trying to list a hook under the single product image in woocommerce.
Can you help me in the right direction?
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.
Hi Leo,
Thanks for your reply. Sorry, I should have mention that I am trying to create a hook through elements.
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 :)
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