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

Question

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

---

我试过这个插件

WooCommerce 的其他变体图像库

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

---

我也试过

• WooCommerce：向产品变体添加自定义字段

• Woocommerce：产品变化的自定义图像

或根据我的知识进行一些自定义代码更改，但对我来说不起作用。

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)

Answer 2

关于 atlantehs 回答中的 JS 部分，我认为点击事件是为了添加到按钮本身。 我已经替换$(document).on('click', '.upload_my_custom_field', add_my_custom_field); 与$(document).on('click', '.upload_my_custom_field_button', add_my_custom_field); 并且图像的删除按预期工作，因为在更改之前它对我不起作用。

这是我用过的，全部写在functions.php子主题中：

//Product Variations Upload Custom Image Field

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 ));
    }
}

function product_variation_img_script() {
$screen = get_current_screen();
    if ($screen->post_type === 'product') :
        ?>
        <style>
            .upload_my_custom_field_button:focus {
                outline: none !important;
                box-shadow: none !important;
            }
        </style>
        <script>
           (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.hasClass('remove')) {
                console.log("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_button', add_my_custom_field);
        })(jQuery)
        </script>
<?php
    endif;
}
add_action('admin_footer', 'product_variation_img_script');