wordpress - WooCommerce:重新排列商店页面上的元素

Question

作为我新工作的一部分，我一直在开发 WordPress 主题。这是一个 WooCommerce 版本，我几乎已经完成了。我坚持的最后一件事 - 主题明智 - 是如何重新排序 WooCommerce 商店页面的元素。

首页是一个自定义商店页面，它使用展示产品短代码来展示最近和特色的产品。目前产品布局为:

Thumbnail
Product Title
Price
Add to Cart button

我已经设法删除了添加到购物车按钮，现在我正在尝试重新排列它，以便它显示:

Product Title
Thumbnail
Price

WooCommerce 使用 Hook ，我无法确定商店页面/短代码的正确 Hook 在哪里。重新排列页面上的元素似乎是一件非常简单的事情，但我已经坚持了几个小时了。

任何帮助是极大的赞赏。

Answer 1

在 content-product.php文件，更改以下代码:

    <?php
        /**
         * woocommerce_before_shop_loop_item_title hook
         *
         * @hooked woocommerce_show_product_loop_sale_flash - 10
         * @hooked woocommerce_template_loop_product_thumbnail - 10
         */
        do_action( 'woocommerce_before_shop_loop_item_title' );
    ?>

    <h3><?php the_title(); ?></h3>

    <?php
        /**
         * woocommerce_after_shop_loop_item_title hook
         *
         * @hooked woocommerce_template_loop_rating - 5
         * @hooked woocommerce_template_loop_price - 10
         */
        do_action( 'woocommerce_after_shop_loop_item_title' );
    ?>

到

    <h3><?php the_title(); ?></h3>

    <?php
        /**
         * woocommerce_before_shop_loop_item_title hook
         *
         * @hooked woocommerce_show_product_loop_sale_flash - 10
         * @hooked woocommerce_template_loop_product_thumbnail - 10
         */
        do_action( 'woocommerce_before_shop_loop_item_title' );
    ?>

    <?php
        /**
         * woocommerce_after_shop_loop_item_title hook
         *
         * @hooked woocommerce_template_loop_rating - 5
         * @hooked woocommerce_template_loop_price - 10
         */
        do_action( 'woocommerce_after_shop_loop_item_title' );
    ?>

这会将图像移动到标题下方。更具体地说 do_action( 'woocommerce_before_shop_loop_item_title' );一段代码被称为显示图像。因此，将其移至标题下方 ( <?php the_title(); ?> ) 应该可以实现您想要的。