WordPress WooCommerce 商店页面模板答案

【问题标题】：WordPress WooCommerce shop page templateWordPress WooCommerce 商店页面模板
【发布时间】：2017-01-01 19:00:12
【问题描述】：

我正在尝试编辑我的 WooCommerce WordPress 网上商店的商店页面布局。

现在在 WooCommerce 设置中，我将其设置为显示类别。现在我的目标是将<img /> 标签更改为<div>。所以我需要更改HTML。但我似乎找不到用于创建该页面的模板文件。我查看了我的主题文件夹和 WooCommerce 插件文件夹。

有谁知道我在哪里可以找到文件或如何更改 html 输出？

非常感谢！

【问题讨论】：

@LoicTheAztec 对不起，我认为我只是愚蠢，但它对我不起作用我尝试$output .= "<div class='category-div' style='background-image: url('".$cat_image_src."'); width: 100px; height: 300px;'></div>";，但它不起作用
@LoicTheAztec 现在我的所有产品图片都没有显示
我有 2 天的 WordPress/Woocommerce 经验......我只是不明白为什么我找不到 html 的渲染位置以输出特定的 html。无论如何感谢您的帮助:)

标签： php html wordpress woocommerce product

【解决方案1】：

签入此文件夹：wp-content/themes/your-theme-name/woocommerce/archive-product.php 如果您的主题缺少 woocommerce 文件夹，那么您可以在 wp-content/plugins/woocommerce/templates 到 wp-content/themes/your-theme-name/woocommerce/ 的所有（或仅您需要编辑的）模板文件和文件夹上创建并过去。

当您需要编辑网站的主题时，最好使用child theme，这样您在更新时不会丢失您的编辑。

希望这会有所帮助。

【讨论】：

您好朋友，我尝试编辑archive-product.php 模板文件，但在该文件中找不到我想要更改的html 元素。这基本上是我的目标
啊哈，我明白了，您可能需要检查 content-product.php。顺便说一句，您使用什么文本编辑器。应该有一种方法可以打开文件夹并搜索其所有文件。
你在 content-product_cat.php 中有什么有意义的东西吗？
我不确定。我从 woocommerce 插件中打开了文件，里面有很多东西
Ок，到目前为止，我已经搜索了 woocommerce 文件以查看我能找到什么，不幸的是我发现的东西并不好。但是在我们进一步提出一个问题之前：您只需要将类别的图片都设为相同大小吗？

【解决方案2】：

考虑到这一点..

我想使用一个具有固定宽度和高度的 div 并设置一个 bg 图像所以我可以将其设置为覆盖，因为图像都是不同的尺寸

试试这个，也许会奏效。这将用 div 包装图像。将其复制并粘贴到您主题的functions.php 上。

// Add the img wrap
add_action( 'woocommerce_before_shop_loop_item_title', create_function('', 'echo "<div class=\"img-wrap\">";'), 5, 2);
add_action( 'woocommerce_before_shop_loop_item_title',create_function('', 'echo "</div>";'), 12, 2);

【讨论】：