Book a Free Call

Add content or ACF field under thumbnail/image gallery in Woocommerce



Today I am adding some content right underneath the gallery in Woocommerce single product. If you’ve worked with Woocommerce before, you’ll know that the single product is layed out using float. Actually a lot of woocommerce is. I can’t tell if I love or hate this! On one hand, using float is agnostic in terms of browser support and at least you know where you stand with it. On the other hand, and especially seeing as I can’t stop using Flex now that I feel it’s about time to press on with it, it feels like it’s a bit olde-worlde now to be using float. But hey. There are probably good reasons for it in terms of checkout or other layout elements, and maybe it’s just too big to disturb now. Anyway, here we go:

I want to add a home-made related items section to the single product, rather than the randomly generated related product grid (WTF like). So I have added an ACF repeater field to the single product admin area. You add products to the repeater (using post object).

Here’s a function for your functions file that utilises a Woocommerce hook ( woocommerce_after_single_product_summary ) to place the html and php in the right place. The key though, is making sure the resulting html is placed left using float:left and width 50%;

As usual I’m using bulma css here. I’ll add the simple html version first, then the ACF fields after…



add_action( 'woocommerce_after_single_product_summary' , 'woo_add_below_prod_gallery', 5 );
  
function woo_add_below_prod_gallery() {
<div class="after-woo-gallery" style="width: 50%; float: left;"> <-- this css is imoportant. Abstract it to a media query for 100% width and float: none on mobile!!
   Here's your delicious HTML sitting underneath the thumbnail gallery
   </div>
}
//ends


add_action( 'woocommerce_after_single_product_summary' , 'woo_add_below_prod_gallery', 5 );
  
function woo_add_below_prod_gallery() {
   
    if( have_rows('related') ): ?>
<div class="after-woo-gallery" style="width: 50%; float: left;"> <-- this css is imoportant. Abstract it to a media query for 100% width and float: none on mobile!!

    <div class="columns is-marginless">
        <div class="column is-12 titlearea">
            <h4>You may also like:</h4>
        </div>
      </div>
    <div class="columns is-marginless is-centered">
        <div class="column is-8">

       <div class="columns is-marginless">
       <?php while( have_rows('related') ): the_row(); 
                $product = get_sub_field('product');
                $wooprod = wc_get_product($product->ID);
                $price = $wooprod->get_price();
           ?>
   
           <div class="column">
<a href="<?php echo get_permalink($product->ID); ?>">
<div class="card">
  <div class="card-image">
    <p class="overprice">€ <?php echo $price; ?></p>
    <figure class="image is-4by3 backslammer" style="background-image: url('<?php echo get_the_post_thumbnail_url($product->ID); ?>')">
      <img src="<?php echo get_the_post_thumbnail_url($product->ID); ?>" class="img-responsive picalter" alt="<?php echo $product->post_title; ?>"/>
    </figure>
  </div>
  <div class="card-content">
    <div class="content">
<p class="cardtitler"><?php echo $product->post_title; ?></p>
    </div>
  </div>
</div>
</a>
           </div>
       <?php endwhile; ?>
       </div>
   </div>
</div>
   </div>
   <?php endif;
}
//ends

Need rapid website development:

For smaller projects at high speed

Get an instant quote
  • Get more than 100 queries in GraphQL (I felt stupid)

    Read More
  • Animate on Scroll (AOS) into Nuxt js

    Read More
  • WordPress Super-admin hack

    Read More
  • Add content or ACF field under thumbnail/image gallery in Woocommerce

    Read More
  • Nuxt view localhost on device over WiFi (IP)

    Read More

Tags


Categories

Charlie's Cottage, Carrigrohane, Co. Cork, T12 WY9H

(085) 7686677