WooCommerce 产品网格（重新排列产品详细信息）

Question

如果可能的话，我需要一些关于这方面的指导。因此，我将 Hello Elementor 主题与 WooCommerce 插件一起使用。

在我的商店页面（列出我的产品的地方），我想重新排列显示在循环产品网格中的产品数据。例如。我想将产品标题移到产品图片上方等等。

我自己解决这个问题通常很成功，但是，我无法在 WooCommerce 插件或 Hello Elementor 主题中找到正确的文件进行修改，以便我可以重新排列这些数据。

因为我使用的是“产品”小部件（除了我展示我的产品的地方，最初，我认为它可能是 content-widget-product.php 文件，如下代码似乎与前端的显示非常相关。

<li>
    <?php do_action( 'woocommerce_widget_product_item_start', $args ); ?>

    <a href="<?php echo esc_url( $product->get_permalink() ); ?>">
        <?php echo $product->get_image(); // PHPCS:Ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?>
        <span class="product-title"><?php echo wp_kses_post( $product->get_name() ); ?></span>
    </a>

    <?php if ( ! empty( $show_rating ) ) : ?>
        <?php echo wc_get_rating_html( $product->get_average_rating() ); // PHPCS:Ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?>
    <?php endif; ?>

    <?php echo $product->get_price_html(); // PHPCS:Ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?>

    <?php do_action( 'woocommerce_widget_product_item_end', $args ); ?>
</li>

不过，去掉下面几行代码后（只是为了测试图片和商品数据是否会消失，一切似乎都保持原样。

所以我有点不确定如何重新排列数据。

任何提示或指导将不胜感激！

旁注： 确认一下，我要修改的不是 single-product 页面，而是在产品循环中显示的产品数据我的商店页面上的列表网格。

Answer 1

您可以在小部件的高级设置中尝试CSS：

selector a.woocommerce-LoopProduct-link{
    display: flex !important;
    flex-direction: column !important;
}
selector .woocommerce-loop-product__title{
    order:1;
}
selector img{
    order:2;
}
selector .price{
    order:3;
}

Answer 2

content-product.php 是负责循环内产品项目布局的文件，例如产品存档页面。

除了一些 HTML，该文件还包含几个 WooCommerce Hooks 调用，负责产品项目的组成。

每个挂钩都附加了几个回调，然后 return 相关的产品项目 HTML。

有两种方法可以在循环中更改产品项目布局：

Override the template file content-product.php 在您的活动（自定义）主题中。然后你可以处理这些挂钩调用的顺序，例如在缩略图上方显示标题：

    /**
     * Hook: woocommerce_before_shop_loop_item.
     *
     * @hooked woocommerce_template_loop_product_link_open - 10
     */
    do_action( 'woocommerce_before_shop_loop_item' );

    /**
     * Hook: woocommerce_shop_loop_item_title.
     *
     * @hooked woocommerce_template_loop_product_title - 10
     */
    do_action( 'woocommerce_shop_loop_item_title' );

不过，最佳做法是直接使用挂钩，并通过将回调附加到负责的挂钩，让您想要的 HTML 显示在该布局内的所需位置。这可以在您的 functions.php 或插件中完成。后者更优雅，因为它不依赖于某个激活的主题。

WooCommerce 产品网格（重新排列产品详细信息）

WooCommerce Product Grid (Rearrange product details)

wordpress

woocommerce

elementor