Question

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

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

Thumbnail
Product Title
Price
Add to Cart button

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

Product Title
Thumbnail
Price

WooCommerce使用钩子，我无法确定商店页面/短代码的正确钩子的位置。重新排列页面上的元素似乎是一件非常简单的事情，但我已经被困在它上好几个小时了。

非常感谢任何帮助。

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(); ?>）应该达到你想要的效果。

Answer 2

归档循环中产品的标记由模板content-product.php决定，您可以在plugins/woocommerce/templates/中找到该模板。 WooCommerce的好处是你可以复制你在该文件夹中找到的任何模板文件，并将它们放在你的主题文件夹中;然后，WC将使用模板，您可以根据自己心中的内容进行自定义。您需要做的就是在名为woocommerce的主题文件夹中创建一个新文件夹，然后在其中保存content-product.php的副本。然后你可以随心所欲地调整那个;如果你更新WC，它就不会被覆盖。

Answer 3

要重新布局WooCommerce，请将原始模板复制到主题的根目录并对新的php文件进行任何修改。

例如，采取原始的“商店循环中的单个项目”模板

wp-content/plugins/woocommerce/templates/content-product.php

并将其复制到

wp-content/themes/your_theme/content-product.php

对副本进行任何更改。它将覆盖原始布局，而不会被WooCommerce更新搞砸（通常）。

More Info

WooCommerce：在商店页面重新排列元素

3 个答案: