1. Home
  2. WP User Frontend Pro
  3. Tutorials
  4. WooCommerce product image gallery with WP User Frontend PRO

WooCommerce product image gallery with WP User Frontend PRO

If you want to insert WooCommerce product image gallery via WP User Frontend PRO, you’ll see only 1 image shows in the gallery. WooCommerce uses _product_image_gallery custom field to store the image gallery. It stores those images/attachments IDs separated by comma. Ex: 32,34,3874 in that single custom field. WP User Frontend PRO stores also the images/attachments IDs, but in the same meta key, but separately. For example:

'_image_gallery' => 383
'_image_gallery' => 345

To solve this issue, we’ll be adding a image upload field in the form editor with a different name (that woocommerce doesn’t uses).

Screen Shot 2013-06-22 at 2.21.03 PM

Here we are using _product_image meta key to store the image for product gallery. The trick is, we’ll save the image IDs to the WooCommerce’s _product_image_gallery meta key when we hit submit/update button in our form.

/**
* Update the custom field when the form submits
*
* @param type $post_id
*/
function wpuf_woo_product_gallery( $post_id ) {
    if ( isset( $_POST['wpuf_files']['_product_image'] ) ) {

        $images = get_post_meta($post_id, '_product_image' );
        update_post_meta( $post_id, '_product_image_gallery', implode(',', $images) );
    }
}

add_action( 'wpuf_add_post_after_insert', 'wpuf_woo_product_gallery' );
add_action( 'wpuf_edit_post_after_update', 'wpuf_woo_product_gallery' );

Paste the code in your themes functions.php and your product gallery will be showing perfectly.

Was this article helpful to you? Yes 8 No 10

How can we help?