WooCommerce缺货商品图片替换插件前端显示异常求助

问题根源分析 #

后台功能正常但前端不显示替换图片，核心存在以下代码逻辑与兼容性问题：

• 产品ID获取不可靠：依赖get_the_ID()在部分钩子场景下无法精准获取当前产品ID，应直接使用已加载的$product对象取ID。
• 钩子移除优先级不足：原设置的优先级9无法确保在默认图片渲染动作执行前完成移除，导致原图片仍会显示。
• 图片输出结构不兼容：直接输出img标签不符合WooCommerce默认图片容器规范，易被主题样式或结构覆盖。

修复后的完整代码 #

<?php
/**
 * Plugin Name: Out of Stock Image Changer for WooCommerce
 * Plugin URI: 
 * Description: Automatically changes the product image when it goes out of stock in WooCommerce
 * Version: 1.0.0
 * Author: 
 * Author URI: 
 * License: 
 */

add_action( 'admin_menu', 'register_product_image_changer_page' );
function register_product_image_changer_page() {
  add_submenu_page( 'edit.php?post_type=product', 'Out of stock images', 'Out of stock images', 'manage_options', 'out-of-stock-images', 'render_product_image_changer_page' );
}

function render_product_image_changer_page() {
  global $wpdb;

  if ( ! current_user_can( 'manage_options' ) ) {
    wp_die( __( 'You do not have sufficient permissions to access this page.', 'woocommerce' ) );
  }

  if ( ! empty( $_POST ) && check_admin_referer( 'update_out_of_stock_images' ) ) {
    $product_ids = isset( $_POST['product_id'] ) ? $_POST['product_id'] : array();
    $out_of_stock_images = isset( $_POST['out_of_stock_image'] ) ? $_POST['out_of_stock_image'] : array();

    foreach ( $product_ids as $index => $product_id ) {
      update_post_meta( $product_id, 'out_of_stock_image', $out_of_stock_images[ $index ] );
    }
  }

  $results = $wpdb->get_results( "SELECT ID, post_title FROM $wpdb->posts WHERE post_type = 'product' AND post_status = 'publish'" );

  ?>
  <div class="wrap">
    <h1><?php _e( 'Out of stock images', 'woocommerce' ); ?></h1>

    <form method="post">
      <?php wp_nonce_field( 'update_out_of_stock_images' ); ?>

      <table class="wp-list-table widefat fixed striped">
        <thead>
          <tr>
            <th><?php _e( 'Product', 'woocommerce' ); ?></th>
            <th><?php _e( 'Out of stock image URL', 'woocommerce' ); ?></th>
          </tr>
        </thead>
        <tbody>
          <?php foreach ( $results as $result ) : ?>
            <tr>
              <td><?php echo $result->post_title; ?></td>
              <td>
                <input type="hidden" name="product_id[]" value="<?php echo $result->ID; ?>">
                <input type="text" name="out_of_stock_image[]" value="<?php echo get_post_meta( $result->ID, 'out_of_stock_image', true ); ?>" class="widefat">
</td>
</tr>
<?php endforeach; ?>
</tbody>
</table>

<p class="submit">
<input type="submit" name="submit" id="submit" class="button button-primary" value="<?php _e( 'Save Changes', 'woocommerce' ); ?>">
</p>
</form>
</div>
<?php
}

// 调整优先级为1，确保更早执行移除动作
add_action( 'woocommerce_before_single_product_summary', 'maybe_change_product_image', 1 );
function maybe_change_product_image() {
global $product;

// 确保产品对象存在且缺货
if ( $product && ! $product->is_in_stock() ) {
    $product_id = $product->get_id();
    $out_of_stock_image = get_post_meta( $product_id, 'out_of_stock_image', true );

    if ( ! empty( $out_of_stock_image ) ) {
        // 移除原图片渲染动作
        remove_action( 'woocommerce_before_single_product_summary', 'woocommerce_show_product_images', 20 );
        // 添加自定义图片渲染动作
        add_action( 'woocommerce_before_single_product_summary', 'show_out_of_stock_image', 20 );
    }
}
}

function show_out_of_stock_image() {
global $product;

if ( ! $product ) return;

$product_id = $product->get_id();
$out_of_stock_image = get_post_meta( $product_id, 'out_of_stock_image', true );
$product_title = $product->get_title();

if ( ! empty( $out_of_stock_image ) ) {
    // 模拟WooCommerce的图片容器结构，确保主题兼容
    echo '<div class="woocommerce-product-gallery woocommerce-product-gallery--with-images woocommerce-product-gallery--columns-1 images" data-columns="1" style="opacity: 1; transition: opacity .25s ease-in-out;">';
    echo '<figure class="woocommerce-product-gallery__wrapper">';
    echo '<div data-thumb="' . esc_url( $out_of_stock_image ) . '" class="woocommerce-product-gallery__image">';
    echo '<img src="' . esc_url( $out_of_stock_image ) . '" class="attachment-shop_single size-shop_single wp-post-image" alt="' . esc_attr( $product_title ) . '" loading="lazy">';
    echo '</div>';
    echo '</figure>';
    echo '</div>';
}
}

关键修改说明 #

1. 提升钩子优先级：将maybe_change_product_image的优先级从9改为1，保证在默认图片渲染前完成移除操作。
2. 精准获取产品ID：用$product->get_id()替代get_the_ID()，避免ID获取偏差。
3. 兼容主题结构：模拟WooCommerce默认图片容器HTML结构，确保图片能被主题正确渲染。
4. 增加安全检查：添加$product对象存在判断，避免触发PHP错误。

额外调试建议 #

若修复后仍不显示，可添加临时调试代码确认逻辑是否触发：

// 在maybe_change_product_image函数中添加
error_log('缺货图片替换逻辑触发，产品ID：' . $product_id . '，图片URL：' . $out_of_stock_image);

查看WordPress调试日志，确认是否进入替换流程以及图片URL是否正确。

内容的提问来源于stack exchange，提问作者Pièpiè22