KAZZABE
KAZZABE

Reputation: 207

Get product custom attributes to display them in WooCommerce product loop

I'm working in a woocommerce site (Real Estate) and I don't get to show product custom attributes on my front shop page (Eg. Square meters, Rooms, Toilets, etc). I'm trying to use the code below but I can make it work. With the code I have I'm just able to show product ID but when it comes to attributes it only shows the word "Array" or just "Nothing" when I put the attributes IDs in the code.

The is the code I have:

add_action('woocommerce_after_shop_loop_item_title', 'cstm_display_product_category', 5);

function cstm_display_product_category()
{
    global $product;

    $productAttribute = $product->get_id();

   //if(isset($productAttribute)){
       echo '<div class="items" style="color: #fff;"><p>Output: ' . $productAttribute . '</p></div>';
   //}
}

You can see the output live here

Whatever help or guide you can give me to be able to achieve this, will be so much appreciated. I'm a noob in this matters.

P.D. I'm inserting this code in my functions.php file.

Wordpress is up to date. Woocommerce is up to date.

Upvotes: 3

Views: 6143

Answers (1)

LoicTheAztec
LoicTheAztec

Reputation: 253784

Update 3

With product attributes (custom or not), you can use the WC_Product method get_attribute() where you can input an attribute name, slug or taxonomy. So in your code:

add_action('woocommerce_after_shop_loop_item_title', 'display_custom_product_attributes_on_loop', 5 );
function display_custom_product_attributes_on_loop() {
    global $product;

    $value1 = $product->get_attribute('Square meters');
    $value2 = $product->get_attribute('Rooms');
    $value3 = $product->get_attribute('Toilets');

    if ( ! empty($value1) || ! empty($value2) || ! empty($value3) ) {

        echo '<div class="items" style="color: red;"><p>';

        $attributes = array(); // Initializing

        if ( ! empty($value1) ) {
            $attributes[] = __("Square meters:") . ' ' . $value1;
        }

        if ( ! empty($value2) ) {
            $attributes[] = __("Rooms:") . ' ' . $value2;
        }

        if ( ! empty($value3) ) {
            $attributes[] = __("Toilets:") . ' ' . $value3;
        }

        echo implode( '<br>', $attributes ) . '</p></div>';
    }
}

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


Automate the code from a simple array of product attribute names:

The code below will gives the same output, but it's compacted, optimized and requires just an array of your desired product attributes:

add_action('woocommerce_after_shop_loop_item_title', 'display_custom_product_attributes_on_loop', 5 );
function display_custom_product_attributes_on_loop() {
    global $product;

    // Settings: Here below set your product attribute label names
    $attributes_names = array('Square meters', 'Rooms', 'Toilets');

    $attributes_data  = array(); // Initializing

    // Loop through product attribute settings array
    foreach ( $attributes_names as $attribute_name ) {
        if ( $value = $product->get_attribute($attribute_name) ) {
            $attributes_data[] = $attribute_name . ': ' . $value;
        }
    }

    if ( ! empty($attributes_data) ) {
        echo '<div class="items" style="color: red;"><p>' . implode( '<br>', $attributes_data ) . '</p></div>';
    }
}

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

Upvotes: 6

Related Questions