how to change woocommerce shop page details?

Question

I've used a snippet to display the weight of jewellery in shop page of woocommerce. I've inserted the snippet in function.php file. But its displaying the weight below add to cart button. It must be displayed above the button.

here is the snippet

add_action( 'woocommerce_after_shop_loop_item', 'bbloomer_show_product_dimensions_loop', 20 );

function bbloomer_show_product_dimensions_loop() {
global $product;
$dimensions = $product->get_dimensions();
if ( ! empty( $dimensions ) ) {
  echo '<div class="dimensions">';
  echo '<br><b>Weight:</b> ' . $product->get_weight() . get_option( 'woocommerce_weight_unit' );
  
  echo '</div>';        
}
} 

the weight must be printed above the add to cart button, what i've to change here.

Answer 1

add_filter( 'woocommerce_loop_add_to_cart_link', 'bbloomer_show_product_dimensions_loop', 10, 2 );
function bbloomer_show_product_dimensions_loop( $html, $product ) {

    $weight = '';

    $dimensions = $product->get_dimensions();

    if ( ! empty( $dimensions ) ) {
        $weight .= '<div class="dimensions">';
        $weight .= '<br><b>Weight:</b> ' . $product->get_weight() .
            esc_html( get_option( 'woocommerce_weight_unit' ) );
        $weight .= '</div>';
    }

    return $weight . $html;
}

You have to use the filter tag woocommerce_loop_add_to_cart_link and prepend your weight component HTML like this. Since it's filter hook no need to echo the output just return the output HTML the tag woocommerce_loop_add_to_cart_link will handle that.

Based on my own blog tutorial: How To Add Quantity Input In Shop Page

Visit source code if you want to learn how this filter woocommerce_loop_add_to_cart_link works internally.

Answer 2

You can take the help of flex css for example:

    .itemxyz{display: flex;flex-direction: column;}
    .itemxyz .desc{order: 1;}
    .itemxyz .price{order: 2;}
    .itemxyz .btn{ order: 4;}
    .itemxyz .weight{ order: 3;}