Loopers with query for product gallery images

[omid020]

Hello!

I am writing this thread based on this thread; Because I have failed to fetch images into slider element using Loopers, I’m going to describe my steps here :

1 - In WC single page layout I inserted one Slider (Stacked) element with this String Lopper Provider :

2- I deleted Slide3 element which had created by default.

3- I added one Image element on both Slide1 and Slide2.

4- In image element of Slide1, I selected Featured Image as source :

5- I set the Slide2 as Looper Consumer:

6- Finally I chose Current Item of Looper as source of image element in Slide2:

Output only shows me slider with one slide, also because I’m using RTL theme I noticed the direction of arrows on the Slider is reverse :

You may check settings with provided credentials in secure note.

Thanks in advance.
Omid

[prakash_s]

Hello @omid020,

Thanks for writing to us.

The given solution for the product gallery by the customer is not using the default Woocommerce gallery settings to upload the product gallery image. The customer is using the ACF meta box for the gallery to save the product gallery image. You need to use our bundled plugin ACF Pro for it then the given steps would work for you. I checked your setting and I found that you are not using ACF meta for the product gallery just because it is not working for you.

You may check out our ACF gallery tutorial through Looper

Loopers: Setting up an ACF Pro Gallery

You can also check our doc to learn more about how to create custom meta through ACF

ACF Pro | Themeco Docs

ACF Pro and Loopers | Themeco Docs

Hope it helps
Thanks

[omid020]

Hi @prakash_s! Thanks for your hint.

I found other details about using ACF plugin fields instead of default Woocommerce fields for product images. Here is 2 steps which I did and now my gallery slider is running correctly:

1 - Create this Field Groups in ACF Plugin :

2- Add this code to functions.php of your theme:

//Remove the default WooCommerce meta boxes for the Product image and Product gallery

 function remove_woocommerce_product_image_meta_boxes() {
    remove_meta_box('postimagediv', 'product', 'side');
    remove_meta_box('woocommerce-product-images', 'product', 'side');
  }
  add_action('add_meta_boxes', 'remove_woocommerce_product_image_meta_boxes', 40);
  

//  Custom ACF fields to store product featured photo

 function load_existing_product_photo_into_acf_image_field($field) {
    global $post;
    $field['value'] = get_post_meta($post->ID, '_thumbnail_id', true);
    return $field;
  }
  
  add_filter('acf/load_field/name=product_photo', 'load_existing_product_photo_into_acf_image_field');
  

//  Custom ACF fields to store product gallery

function load_existing_product_gallery_into_acf_gallery_field($field) {
    global $post;
    $field['value'] = explode(',', get_post_meta($post->ID, '_product_image_gallery', true));
    return $field;
  }
  
  add_filter('acf/load_field/name=product_gallery', 'load_existing_product_gallery_into_acf_gallery_field');
  

// Sync ACF Product Images fields into product metadata

 function use_acf_fields_for_product_photos($post_id) {
    if('product' != get_post_type($post_id)) {
      return false;
    }

    $product_photo = get_field('product_photo', $post_id);
    if($product_photo && !empty($product_photo['ID'])) {
      update_post_meta($post_id, '_thumbnail_id', $product_photo['ID']);
    }

    $product_gallery = get_field('product_gallery', $post_id);
    if($product_gallery) {
      $product_gallery_ids_string = implode(',', wp_list_pluck($product_gallery, 'ID'));
      update_post_meta($post_id, '_product_image_gallery', $product_gallery_ids_string);
    }
  }
  add_action('acf/save_post', 'use_acf_fields_for_product_photos', 20);

Regards
Omid

[christian]

Glad to hear that, Omid.