CODEWITHSUNDEEP
phpwordpresswoocommercehook-woocommercetaxonomy-terms
TheRecruit
TheRecruit

Reputation: 184

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

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

    }

Upvotes: 1

Views: 1861

Answers (1)

LoicTheAztec
LoicTheAztec

Reputation: 253849

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.

enter image description here

Upvotes: 2

Related Questions