Customize Add to cart on archive pages like this

Hi there,

it uses a similar CSS method as the Niche Site does.

If you got a test site with that layout i can look at what CSS is required.

Hello David , how are you ?

Thanks i had forgot this template , just installed it fresh new.

Thank you for your help, i really apreciate.

Is this resolved ?

Hey There , to tell the truth not as i actually would like to be like this if possible

https://startertemplatecloud.com/g02/

There is any chance to help me with this one ?

Lot trickier to do as Woo doesn't make it easy to add a wrapper around the content.
You can try this on a default Woo install ( not Niche ) - but i can't say if thats going to cause other issues... i have minimised the risk where i can.

First a PHP Snippet to add the woo-summary-wrap and to give the title its own link:

// Add Woo Summary Wrap
remove_action( 'woocommerce_after_shop_loop_item', 'woocommerce_template_loop_product_link_close', 5 );
add_action( 'woocommerce_before_shop_loop_item_title', 'woocommerce_template_loop_product_link_close', 24 );
add_action( 'woocommerce_shop_loop_item_title', function() {
  ?>
  <div class="woo-summary-wrap">
  <?php
}, 9);

add_action( 'woocommerce_after_shop_loop_item', function() {
  ?>
  </div>
  <?php
}, 25);

// Add old woo template title link

remove_action( 'woocommerce_shop_loop_item_title', 'woocommerce_template_loop_product_title', 10, 2 ); 

if ( ! function_exists( 'codeless_woocommerce_template_loop_product_title' ) ) { 
	/**
	 * Show the product title in the product loop. By default this is an H2.
	 */
	function codeless_woocommerce_template_loop_product_title() {
		global $product;

		$link = apply_filters( 'woocommerce_template_loop_product_title', get_the_permalink(), $product );

		

		echo '<a href="' . esc_url( $link ) . '"><h2 class="' . esc_attr( apply_filters( 'woocommerce_product_loop_title_classes', 'woocommerce-loop-product__title' ) ) . '">' . get_the_title() . '</h2></a>'; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
	} 
}; 
         
add_action( 'woocommerce_shop_loop_item_title', 'codeless_woocommerce_template_loop_product_title', 10, 2 ); 

Note: reference link for adding the shop title link:
https://codeless.co/support/?topic=product-title-link#post-47248

Then some CSS for the effect:

.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
  max-height: calc(100% - 65px);
  overflow-y: hidden;
}

.woocommerce-page ul.products li.product .woo-summary-wrap {
  background-color: #fff;
  padding: 10px;
  margin: 0 5px;
  border-radius: 5px;
  transition: transform 0.3s;
}

.woocommerce-page ul.products li.product:hover .woo-summary-wrap {
  transform: translate3d(0, -65px, 0);
}

Note the -65px in the above CSS is based on the height of the button + some to hide it when the product is not hovered.

Hey David,

Dude I did not knew that it was so many things involved to make this work , i am so thankfull that you dive into this.

I guess that i can use a Child theme there and add in this template and transform a bit the markup and use your css styles.

I will update later for anyone interested on this kind of look that i think is very nice.

Once again Thank you so much David for your super help and guide on this !!!

Just need to add the PHP to your child themes functions.php :)

Glad to be of help!