WooCommerce 产品页面上没有产品详细信息

Question

我有以下代码，用于显示包含当前产品页面中的一些信息的模式：

function visualizer_modal() {
    if(!is_product()) {
        return;
    }
    global $product;
    ?>
    <div class="visualizer-modal">
        <div class="modal-header">
            <button type="button" class="close">&times;</button>
            <h4 class="modal-title">Customize & Buy</h4>
        </div>
        <div class="modal-body">
            <img
                src="<?php wp_get_attachment_url($product->get_id()) ?>" 
                alt="<?php $product->get_name() ?> image" />
        </div>
    </div>
    <?php
}

它是从使用此行创建按钮的函数中调用的：

add_action('wp_footer', [$this, 'visualizer_modal']);

但是，我没有收到任何产品信息。我只从

alt

属性中获取损坏的图像图标和“图像”一词。我之前尝试使用

print_footer_scripts

而不是

wp_footer

，但得到了相同的结果。我还使用

wp_get_attachment_image_src

尝试获取产品图片，但这也不起作用，也无法解释为什么我没有在

alt

中获取产品名称。

我对 WordPress 和 WooCommerce 的开发还相当陌生，所以我不确定为什么

$product

没有给我任何东西。是因为我在产品模板之后从页面页脚调用它吗？还是这里发生了其他事情？

注意：对于上面的代码块，我将

img

标记全部放在一行上，我只是在这里将其分解以使其更具可读性。

Answer 1

您的代码中有很多错误：

• wp_get_attachment_url()

  需要图像附件 ID，而不是产品 ID，因此您将使用

  $product->get_image_id()

  来实现此目的。
• 您需要将

  echo

  与

  wp_get_attachment_url()

  和

  $product->get_name()

  一起使用才能显示某些内容。
• 代替

  wp_get_attachment_url()

  ，您可以直接使用

  $product->get_image()

  。

尝试以下操作：

function visualizer_modal() {
    if( ! is_product() ) return;
    global $product;
    ?>
    <div class="visualizer-modal">
        <div class="modal-header">
            <button type="button" class="close">&times;</button>
            <h4 class="modal-title"><?php _e('Customize & Buy'); ?></h4>
        </div>
        <div class="modal-body">
        <?php echo $product->get_image('full', ['alt' => $product->get_name().' image']); ?>
        </div>
    </div>
    <?php
}

add_action('wp_footer', [$this, 'visualizer_modal']);

应该可以。