WooCommerce Product detail page: Add content under thumbnails

admin管理员组

文章数量:1287514

Closed. This question is off-topic. It is not currently accepting answers.

---

Your question should be specific to WordPress. Generic PHP/JS/SQL/HTML/CSS questions might be better asked at Stack Overflow or another appropriate Stack Exchange network site. Third-party plugins and themes are off-topic for this site; they are better asked about at their developers' support routes.

Closed 3 years ago.

Improve this question

I am trying to add content under the product feature image and its thumbnails using action woocommerce_before_single_product_summary but the content goes on the top of the image and content.

add_action( 'woocommerce_before_single_product_summary' , 'bbloomer_add_below_prod_gallery', 9 );

When I change the priority from 9 to 20, the right-side content moves under the custom content.

Following is the action function to render the custom content.

function bbloomer_add_below_prod_gallery() {
    global $product;
        echo '<div class="text" style="border: thin solid black; clear: both;">';
        echo '<p>Random text now</p>';
        echo '</div>';
}

Any kind of help will be much appreciated.

I tried Woocommerce template override also, but no luck. When I tried to override woocommerce/templates/sigle-product/product-image.php in theme, the custom content still goes on the top.

Thanks

Closed. This question is off-topic. It is not currently accepting answers.

---

Your question should be specific to WordPress. Generic PHP/JS/SQL/HTML/CSS questions might be better asked at Stack Overflow or another appropriate Stack Exchange network site. Third-party plugins and themes are off-topic for this site; they are better asked about at their developers' support routes.

Closed 3 years ago.

Improve this question

I am trying to add content under the product feature image and its thumbnails using action woocommerce_before_single_product_summary but the content goes on the top of the image and content.

add_action( 'woocommerce_before_single_product_summary' , 'bbloomer_add_below_prod_gallery', 9 );

When I change the priority from 9 to 20, the right-side content moves under the custom content.

Following is the action function to render the custom content.

function bbloomer_add_below_prod_gallery() {
    global $product;
        echo '<div class="text" style="border: thin solid black; clear: both;">';
        echo '<p>Random text now</p>';
        echo '</div>';
}

Any kind of help will be much appreciated.

I tried Woocommerce template override also, but no luck. When I tried to override woocommerce/templates/sigle-product/product-image.php in theme, the custom content still goes on the top.

Thanks

• woocommerce-offtopic

Share Improve this question edited Oct 18, 2021 at 9:06 Tom J Nowell♦ 61k77 gold badges7979 silver badges148148 bronze badges asked Oct 15, 2021 at 6:23 sohaibsohaib 10111 bronze badge 1

• WooCommerce and other 3rd party plugin/theme dev support is off topic and not in this stacks scope. You should ask via their official support routes or in their groups and communities. – Tom J Nowell ♦ Commented Oct 18, 2021 at 9:07

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 1

In woocommerce/templates/content-single-product.php you can see that woocommerce_show_product_images is hoooked with a priority of 20.

if you want your custom function to render below the images, but above the summary, you need to set the priority to greater than 20. I think the code below should do it:

add_action('woocommerce_before_single_product_summary', 'bbloomer_add_below_prod_gallery', 30);

function bbloomer_add_below_prod_gallery() {
    global $product;
    echo '<div class="text" style="border: thin solid black; clear: both;">';
    echo '<p>Random text now</p>';
    echo '</div>';
}

UPDATE

The default woocommerce stylesheet woocommerce-layout.scss floats the gallery to the left and gives it 48% width, like this:

.woocommerce #content div.product div.images, .woocommerce div.product div.images, .woocommerce-page #content div.product div.images, .woocommerce-page div.product div.images {
    float: left;
    width: 48%;
}

You could add this style to your html, but depending on the theme you are using, it might end up to the right of the gallery (because it is floated).

So, the quickest thing, if you want to get your text directly underneath the gallery element, would be to override the product-image.php template and add an extra hook.

// In your copy of product-image.php everything is the same except the new action hook.
...
<div class="...">
    <figure class="woocommerce-product-gallery__wrapper">
        <?php
        // Stuff copied from original template.
        ...
        do_action( 'woocommerce_product_thumbnails' );
        ?>
    </figure>

    <!-- Create a new action hook before the final <div> -->
    <?php do_action( 'bbloomer_after_single_product_gallery' ); ?>
</div>
...

Then hook in to this new action in your theme.

add_action('bbloomer_after_single_product_gallery', 'bbloomer_add_below_prod_gallery', 30);

function bbloomer_add_below_prod_gallery() {
    global $product;
    echo '<div class="text" style="border: thin solid black; clear: both;">';
    echo '<p>Random text now</p>';
    echo '</div>';
}

Or just add the html directly in your new template instead of adding a hook.

本文标签： WooCommerce Product detail page Add content under thumbnails