WP_query string for product gallery images

Support
#1

Hey All,

I am working on making a custom product layout and would rather not use the “product gallery” element, but instead build something using the looper provider/looper consumer functionality of your theme and the new slider element.

I am a little stuck on what query i should put into the “query string” looper provider that will return the current products “product gallery” images.

I am able to use this {{dc:acf:post_field field="_product_image_gallery"}} and it will return an array of the product gallery images, but I don’t really know where to go from here.

Any help would be great.

Thanks!

NOTE: I FOUND A SOLUTION

The looper provider settings I used are:
Provider Type: String
String: {{dc:acf:post_field field="_product_image_gallery"}}
Delimiter: , (no spaces)
image

This allowed me to loop through the array that is printed upon calling {{dc:acf:post_field field="_product_image_gallery"}} and then I can call the image using the “Dynamic Content” source “Current Item” under the “Looper” category.

image
image434×536 15.2 KB

I saw that there were some other people asking this same thing after posting, but the answers they got said that there wasn’t a looper solution for this, so I wanted to share this so that others can see that they can do this all using looper settings and dynamic content.

Thanks!

Loopers with query for product gallery images
#2

Hey @michigancreative,

Thanks for posting in! It is good to know that you have figured out a way to add the product gallery in your layout using the Loopers. We really appreciate for sharing this information because it will also be useful to other Pro theme users.

Best Regards.

#3

Hi @michigancreative!

Could you please provide an step by step tutorial about your solution? I tried to fetch product images with your suggested query but it doesn’t work on my sample.

123123123
1231231231321×358 45 KB

I inserted query in Looper Provider of Slide Container (1) and then called image with Looper on Image element (2).

Thank you in advance.
Omid

#4

Hey @omid020

I set the Slider element as the looper provider:
image

These are the looper provider settings I am using:
image

The first slide of the slider I kept as the main product image, and the second slide of the slider I set as the looper consumer.
image

I set all this up on the WC Single product layout.

Hope this helps

1 Like
#5

Hi Omid,

Thanks for explaining the steps.

#6

Hi @michigancreative, Thanks for reply.

Sorry I am dummy with loopers. Is this screenshot related to image element of first slide? :
120120120

I am testing it on WC Single product layout. Is your expanded slider items similar to below screenshot? :
120120121

What are the conditions you have used on Slide 2 ? Is the image element on Slide1 similar to the image element on Slide2?

Regards
Omid

#7

Hey @omid020

You are close, that screenshot shows what I set as the dynamic content for the image element of the second slide. The first slide I just set as the product featured image, and the second slide was set as the looper consumer.

Yup your expanded slider looks real close, I bet you just need to set the dynamic content for the second sliders image to be “current item”

1 Like
#8

Hello @omid020,

Your Slide element needs to be a Looper Consumer so that you can display all the images in each slides. It is best that you create your own thread along with your WP credentials so that we can check your Slider settings.

Thank you in advance.

1 Like
#9

Hi @ruenel,

I created new thread.

Thanks

#10

Hello @omid020,

We have replied to your thread. Please have a look at it.

Thanks

1 Like
#11

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 :

11112111
111121111070×522 24.7 KB

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

#12