Woocommerce Question posted in
The official Woocommerce documentation can be found here.

Woocommerce – How to put product title inside product thumbnail

from this

I want to change the position of the product title in archive-product page from below the thumbnail to the inside of the thumbnail.

enter image description here

i have a plugin telling me that the file responsible for this content is archive-product.php and inside i found the code 

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();

What is the right way to style it as on the example ?

Any advice on what i am doing wrong will be hardly appreciated​

Tags:

2

Answers


  1. 0

    You have to override archive-product.php in your theme. For that, you have to create a woocommerce folder and place this template inside that folder by following the same folder structure of the woocommerce.
    After doing that place your custom code in that file. Add some custom class and apply CSS to it.

    Login or Signup to reply.
  2. 0

    CSS version

    .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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search