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

how to change woocommerce shop page details?

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>';        
}
}

here is the sample output

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

Tags:

2

Answers


  1. 0 
    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.

    Login or Signup to reply.
  2. 0

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

Back To Top
Search