Woocommerce - 将标题移到类别页面中的产品缩略图上

Question

我需要在浏览类别页面时将产品标题移动到缩略图上

详情：

我创建了一个只显示类别的商店页面。 每个类别包含 1 到 10 个产品。

单击某个类别后，我会进入一个页面，在该页面上我会看到该类别中的所有产品。

我希望看到这些产品的标题显示在它们的缩略图上。

谢谢

Answer 1

需要更多与您的 parituclar 设置相关的详细信息才能给出正确的答案。但是，我假设您拥有默认的一切。这是您需要添加到活动主题文件夹中 functions.php 末尾的内容：

remove_action( 'woocommerce_before_shop_loop_item_title', 'woocommerce_template_loop_product_thumbnail', 10 );
add_action( 'woocommerce_after_shop_loop_item_title', 'woocommerce_template_loop_product_thumbnail', 10 );

作为参考，检查 https://github.com/woothemes/woocommerce/blob/master/templates/content-product.php and https://github.com/woothemes/woocommerce/blob/master/includes/wc-template-hooks.php

如果这不起作用，请检查：

• 您使用的是最新版本的 woocommerce。实际上几个版本之前应该工作相同，但不是太远。
• 您的 woocommerce 模板没有被覆盖。检查您的主题文件夹中是否有名为 content-product.php 的文件或位于子文件夹 woocommerce/content-product.php 中。如果已更改，您需要相应地进行调整，也许可以直接进行更改。
• 您的主题还没有混淆产品展示挂钩。如果有，找出不同之处。

请注意，这会更改所有 woocommerce 循环的行为，例如您可能正在使用的任何简码和单个产品视图中的 "related products" 部分（如果已启用）。要仅影响类别，更改应包含在条件检查 ( is_product_category() ) 中。

Answer 2

如果将代码放入插件中，则必须等待 WooCommerce 加载：

add_action('plugins_loaded', function()
{
    // move product's title before product thumbnail instead of next to that
    remove_action('woocommerce_single_product_summary', 'woocommerce_template_single_title', 5);
    add_action('woocommerce_before_single_product_summary', 'woocommerce_template_single_title');
}

Answer 3

为产品标题添加了这个 CSS，它对我来说效果很好。我当然用了媒体查询。

position: absolute;
top: 0px;