WooCommerce：重新整理店铺页面上的元素

Question

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

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

Thumbnail 
Product Title 
Price 
Add to Cart button 

我已经成功地取出放入购物车按钮，现在我想这样就说明重新安排它：

Product Title 
Thumbnail 
Price 

WooCommerce使用挂钩并且我无法确定商店页面/简码的正确钩子在哪里。这似乎是一个非常简单的事情，重新排列页面上的元素，但我一直坚持了几个小时。

任何帮助，非常感谢。

Answer 1

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

Answer 2

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

例如，持原“在店内循环个体项目”模板

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

并将其复制到

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

对复印的任何变化。它会覆盖原始布局，而不会与WooCommerce更新（通常）搞砸。

More Info

Answer 3

在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(); ?>）下方移动即可达到您想要的效果。