css - 如何将产品标题放入产品缩略图

Question

我想将存档产品页面中产品标题的位置从缩略图下方更改为缩略图内部。

我有一个插件告诉我负责此内容的文件是 archive-product.php，我在里面找到了代码

if ( woocommerce_product_loop() ) {

    /**
     * Hook: woocommerce_before_shop_loop.
     *
     * @hooked woocommerce_output_all_notices - 10
     * @hooked woocommerce_result_count - 20
     * @hooked woocommerce_catalog_ordering - 30
     */
    do_action( 'woocommerce_before_shop_loop' );

    woocommerce_product_loop_start();

    if ( wc_get_loop_prop( 'total' ) ) {
        while ( have_posts() ) {
            the_post();

            /**
             * Hook: woocommerce_shop_loop.
             *
             * @hooked WC_Structured_Data::generate_product_data() - 10
             */
            do_action( 'woocommerce_shop_loop' );

            wc_get_template_part( 'content', 'product' );
        }
    }

    woocommerce_product_loop_end();

按照示例设置样式的正确方法是什么？

任何关于我做错的建议都不会受到赞赏

Answer 1

CSS 版本

.product {
  position: relative;
}

.product img {
  width: 100%;
}

.product p {
  position: absolute;
  top: 5px;
  left: 0;
  width: 100%;
  font-size: 15px;
  font-weight: bold;
  color: white;
  text-align: center;
}

<div class="product">
  <img src="https://dummyimage.com/600x400/000/fff" />
  <p>Product Title</p>
</div>