Align "Add to Cart" buttons better on WooCommerce X Theme

[frederikbf1]

Hey there!

Is it possible to align my archive buttons (on WooCommerce shop) so that they dont overlap the existing text? I want them to show as the last thing (after this price)

Here’s an example page: https://designerstuen.dk/vare-kategori/bord/sengebord

Cheers!

[paul.r]

Hi,

To prevent it from overlapping, please add the code below in Theme Options > CSS

.woocommerce .price {
    margin-bottom: 10px;
}
.woocommerce li.product .entry-header .button {
  top:0 !important;
}

Thanks

[frederikbf1]

Hey, thanks for this! Really effective and helpful as always. It worked

I have another problem: When I use the “woocommerce_after_shop_loop_item_title” hook in PHP to insert a text, the text gets inserted after all the product data:

Instead, I want the text (with the yellow marker) to be inserted between the product title and the price.

Do you know how I could achieve this?

Cheers

[paul.r]

Hi,

I tried that hook on my test site and it inserted the text after the title.

This is the code I tried.

function mytest() {
      echo "This is the test"    ;    
}
  
  add_action('woocommerce_after_shop_loop_item_title','mytest',1);

Do you mind trying that code and check where the text is inserted.

You can try other hooks as well.

WooCommerce Shop/Category Page Hooks: Visual Guide

Thanks

[frederikbf1]

Hey Paul,

Thanks for the answer and sorry for the late reply.

I’ve tried your code and it does add the text the right place. However I can’t my own custom code to be added the right place.

My code looks like this:

function mycode_display_extra_data_in_loop() {
	global $product;
	$datafeedr_product = dfrps_product( $product->get_id() );
	$datafeedr_product = is_string( $datafeedr_product ) ? [] : $datafeedr_product;
	// var_dump( $datafeedr_product ); Uncomment this line to view all fields for this product.
	if ( isset( $datafeedr_product['merchant'] ) ) {
		echo '<div class="feed-forhandler">' . $datafeedr_product['merchant'] . '</div>';
	}
	if ( isset( $datafeedr_product['leveringstid'] ) ) {
	echo '<div class="feed-leveringstid">Leveringstid: ' . $datafeedr_product['leveringstid'] . '</div>';
	}

}
add_action( 'woocommerce_after_shop_loop_item_title', 'mycode_display_extra_data_in_loop', 20 );

It’s basically supposed to pull out data from my WooCommerce products and show them on the archive page. The data is shown but it shows below the products - not below the title.

[ruenel]

Hello Frederik,

Please change the priority number from 20 to 1.

function mycode_display_extra_data_in_loop() {
	global $product;
	$datafeedr_product = dfrps_product( $product->get_id() );
	$datafeedr_product = is_string( $datafeedr_product ) ? [] : $datafeedr_product;
	// var_dump( $datafeedr_product ); Uncomment this line to view all fields for this product.
	if ( isset( $datafeedr_product['merchant'] ) ) {
		echo '<div class="feed-forhandler">' . $datafeedr_product['merchant'] . '</div>';
	}
	if ( isset( $datafeedr_product['leveringstid'] ) ) {
	echo '<div class="feed-leveringstid">Leveringstid: ' . $datafeedr_product['leveringstid'] . '</div>';
	}

}
add_action( 'woocommerce_after_shop_loop_item_title', 'mycode_display_extra_data_in_loop', 1 );

Hope this helps. Please let us know how it goes.

[frederikbf1]

Man, you make me want to watch Pokemon again.

Thanks !!

[Prasant]

You are most welcome.