[Resolved] Woocommerce image from gallery as header image

[Krzysztof]

Hello I am working currently on a project which requires me on single product page to display big image which is always first in gallery added to said product. Found the code on web which seems to get things going, but I can’t figure out why it requests images which are not first from woo gallery attached to the product.
Here is the snippet with shortcode:

function gal_first_image_shortcode( $atts, $content = null ) {
   extract( shortcode_atts( array(
      'size' => 'shop_single'
      ), $atts ) );
  
    $images = get_children(array(
        'post_parent' => get_the_ID(),
        'post_type' => 'attachment',
        'numberposts' => 1,
        'post_mime_type' => 'image',
        'orderby' => 'menu_order',
        )
    );
  
    if($images) {
        $gallery = '';
        foreach( $images as $image ) {
                    $gallery .= wp_get_attachment_image($image->ID, $image_size);
        }
        $gallery .= '';
  
        return $gallery;
    }
  
}
add_shortcode('woo_first_gal', 'gal_first_image_shortcode');

It does return image, but not first when looking at the attached gallery table.

GeneratePress 2.2.2

GP Premium 1.7.8

[Tom]

Hi there,

I’m not 100% sure, but you should be able to do something like this:

$product = wc_get_product( get_the_ID() );

$images = $product->get_gallery_image_ids();

$first = $images[0];

$url = wp_get_attachment_url( $first );

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Krzysztof]

Hey Tom, thanks for reply. So I should just dump my entire code and replace it with Yours?
Actually, it works in this way:

function gal_first_image_shortcode( $atts, $content = null ) {  
$product = wc_get_product( get_the_ID() );

$images = $product->get_gallery_image_ids();

$first = $images[0];

$url = wp_get_attachment_image( $first, $size='shop_single');

 return $url;
}
add_shortcode('woo_first_gal', 'gal_first_image_shortcode');

Thanks a lot!

[Tom]

You’re welcome 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[fragbenny]

I used the code provided above and it works just fine but is there way to make it a gallery with dots to scroll the images?

[David]

Hi there,

you would need to incorporate slider script of some kind to do that, which is out of our scope.
Might be worth googling to see if theres a plugin that already does this.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[fragbenny]

Ok, so i bought this one –> https://woocommerce.com/de-de/products/product-gallery-slider-for-woocommerce/

But there is one little thing, i need help with. I would like it mobile to be fullwidth. Maybe you see it here –> http://avantal.axmxvonbiw-v1p3z0dkj6ye.p.runcloud.link/milbentest/

[Leo]

This is something you will need to check with the plugin’s support team.

Thanks!

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts