CODEWITHSUNDEEP
wordpresswoocommerce
cbra
cbra

Reputation: 77

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.

Upvotes: 1

Views: 312

Answers (2)

Ashish
Ashish

Reputation: 182

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

Upvotes: 0

gvgvgvijayan
gvgvgvijayan

Reputation: 2506

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.

Upvotes: 1

Related Questions