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和https://github.com/woothemes/woocommerce/blob/master/includes/wc-template-hooks.php

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

• 你使用最新版的woocommerce。实际上一些版本应该可以正常工作，但不能太远。
• 您的woocommerce模板不会被覆盖。检查主题文件夹中是否有名为content-product.php的文件或子文件夹woocommerce/content-product.php。如果已经改变了，你需要相应地调整，也许通过在那里进行更改。
• 你的主题还没有弄乱产品展示挂钩。如果确实如此，找出不同的东西。

请注意，这会改变所有woocommerce循环的行为，例如您可能正在使用的任何短代码以及单个产品视图中的“相关产品”部分（如果已启用）。要仅影响类别，更改应包含在条件检查（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;