Display product attribute values for variable products under product image in Woocommerce shop

Question

I have a function and an action that does what I want it to do: Display available product sizes in the product archive page on my Woocommerce shop.

The problem is, that my outputted code is placed either:
a) above the product image, or…
b) below the add-to-basket-button.
I need it to be placed below the product image.

I have found all the different hooks in the Woocommerce documentation, and have tampered with all of them, but none of them works. At least not on my single product. I have managed to get the outputted sizes displayed below the entire archive-view, so something is working.

add_action( "woocommerce_after_shop_loop_item_title', 'ladiesfashion_show_product_size_loop', 10 );

function ladiesfashion_show_product_size_loop() {

    global $product;

    if ( ! empty( $sizes ) ) {   
        echo '<div style="color:black;"><b><br>Tilgængelige størrelser:</b> ' . $size = $product->get_attribute( 'pa_toej-stoerrelse' );
        echo '</div>';         
    }

}

I have a feeling that I somehow might need to do some sort of "remove_action", but I can't figure out how that part works, and what I'm supposed to remove before I add my own function?

SOLUTION

OceanWP (my theme) uses custom hooks for Woocommerce items. Changing the hook solved my problem:

add_action( 'ocean_after_archive_product_image', 'ladiesfashion_show_product_size_loop', 10 );

    function ladiesfashion_show_product_size_loop() {

        global $product;

        $sizes = $product->get_dimensions();

        if ( ! empty( $sizes ) ) {   
            echo '<div style="color:black;"><b><br>Tilgængelige størrelser:</b> ' . $size = $product->get_attribute( 'pa_toej-stoerrelse' );
            echo '</div>';         
        }

    }

Thanks so much for the tip! I am using OceanWP theme and was struggling with that too...I wanted my badges to display under the product title but the action hook using woocommerce hook just didn't respond. So here is the entire list of hooks name just in case someone is also having the same issue: docs.oceanwp.org/category/376-hooks — Lin

LoicTheAztec LoicTheAztec · Accepted Answer · 2019-04-04T21:13:01

There are some mistakes in your code and you are not using the right hook and priority. Try the following (where we display the sizes under the default Woocommerce product image location):

add_action( 'woocommerce_before_shop_loop_item_title', 'ladiesfashion_show_product_size_loop', 15 );
function ladiesfashion_show_product_size_loop() {
    global $product;

    if ( $product->has_dimensions() && $sizes = $product->get_attribute( 'toej-stoerrelse' ) ) {
        echo '<div style="color:black;"><strong>Tilgængelige størrelser:</strong> ' . $sizes . '</div><br>';
    }
}

Code goes in function.php file of your active child theme (or active theme). Tested and works.

Display product attribute values for variable products under product image in Woocommerce shop

1 Answers