在 WooCommerce 后端产品编辑页面中为产品变体添加额外的图像上传字段

Question

我需要帮助将自定义图像字段添加到我的产品变体中，与默认字段相同，但名称和值或自定义元数据不同，因此我可以区分默认图像和自定义图像。

---

我试过这个插件

Additional Variation Images Gallery for WooCommerce

但它破坏了我的前端功能。我只想在我的后端使用这个（见附图）

---

我也试过

• WooCommerce : add custom fields to product variations

• Woocommerce: custom image for product variations

或据我所知进行了一​​些自定义代码更改，但它不适合我。

Answer 1

通过查看 WC 源代码，我可以通过以下 php 代码来实现它：

add_action( 'woocommerce_product_after_variable_attributes', 'variation_settings_fields', 10, 3 );
add_action( 'woocommerce_save_product_variation', 'save_variation_settings_fields', 10, 2 );

function variation_settings_fields( $loop, $variation_data, $variation ) {
    $my_custom_image_field = $variation_data['my_custom_image_field'][0] ?? null;
    ?>
    <p class="form-row form-row-first upload_my_custom_field">
        <a
            href="#"
            class="upload_my_custom_field_button tips <?php echo $my_custom_image_field ? 'remove' : ''; ?>"
            data-tip="<?php echo $my_custom_image_field ? esc_attr__( 'Remove this image', 'woocommerce' ) : esc_attr__( 'Upload an image', 'woocommerce' ); ?>"
            rel="<?php echo esc_attr( $variation->ID ); ?>">
            <img src="<?php echo $my_custom_image_field ? esc_url( wp_get_attachment_thumb_url( $my_custom_image_field ) ) : esc_url( wc_placeholder_img_src() ); ?>" />
            <input
                type="hidden"
                name="upload_my_custom_image_field[<?php echo esc_attr( $loop ); ?>]"
                class="upload_my_custom_image_field" value="<?php echo esc_attr( $my_custom_image_field ); ?>" />
        </a>
    </p>
    <?php
}

function save_variation_settings_fields( $variation_id, $loop ) {
    if (isset( $_POST['upload_my_custom_image_field'][ $loop ] )) {
        $value = wc_clean( wp_unslash( $_POST['upload_my_custom_image_field'][ $loop ] ) );
        update_post_meta( $variation_id, 'my_custom_image_field', esc_attr( $value ));
    }
}

以下js代码：

(function($) {
    var settings = {
        setting_variation_image: null,
        setting_variation_image_id: null
    }
    function add_my_custom_field(event) {
        var $button = $( this ),
            post_id = $button.attr( 'rel' ),
            $parent = $button.closest( '.upload_my_custom_field' );

        settings.setting_variation_image    = $parent;
        settings.setting_variation_image_id = post_id;

        event.preventDefault();

        if ( $button.is( '.remove' ) ) {

            $( '.upload_my_custom_image_field', settings.setting_variation_image ).val( '' ).trigger( 'change' );
            settings.setting_variation_image.find( 'img' ).eq( 0 )
                .attr( 'src', woocommerce_admin_meta_boxes_variations.woocommerce_placeholder_img_src );
            settings.setting_variation_image.find( '.upload_my_custom_field_button' ).removeClass( 'remove' );

        } else {

            // If the media frame already exists, reopen it.
            if ( settings.variable_image_frame ) {
                settings.variable_image_frame.uploader.uploader
                    .param( 'post_id', settings.setting_variation_image_id );
                settings.variable_image_frame.open();
                return;
            } else {
                wp.media.model.settings.post.id = settings.setting_variation_image_id;
            }

            // Create the media frame.
            settings.variable_image_frame = wp.media.frames.variable_image = wp.media({
                // Set the title of the modal.
                title: woocommerce_admin_meta_boxes_variations.i18n_choose_image,
                button: {
                    text: woocommerce_admin_meta_boxes_variations.i18n_set_image
                },
                states: [
                    new wp.media.controller.Library({
                        title: woocommerce_admin_meta_boxes_variations.i18n_choose_image,
                        filterable: 'all'
                    })
                ]
            });

            // When an image is selected, run a callback.
            settings.variable_image_frame.on( 'select', function () {

                var attachment = settings.variable_image_frame.state()
                    .get( 'selection' ).first().toJSON(),
                    url = attachment.sizes && attachment.sizes.thumbnail ? attachment.sizes.thumbnail.url : attachment.url;

                $( '.upload_my_custom_image_field', settings.setting_variation_image ).val( attachment.id )
                    .trigger( 'change' );
                settings.setting_variation_image.find( '.upload_my_custom_field_button' ).addClass( 'remove' );
                settings.setting_variation_image.find( 'img' ).eq( 0 ).attr( 'src', url );

                wp.media.model.settings.post.id = settings.wp_media_post_id;
            });

            // Finally, open the modal.
            settings.variable_image_frame.open();
        }
    }

    $(document).on('click', '.upload_my_custom_field', add_my_custom_field);
})(jQuery)