Woocommerce: use non-variation attributes from frontend - allow customers to select term (option) from non-variation attributes on variable or simple products frontend pages, add selection to cart item, display it in cart, add it to order item

wp-woocommerce-allow-non-variation-attributes-frontend-selection.php

<?php
/**
 * Inspired from: https://gist.github.com/dazecoop/548b2621e86fb030da8e5adb1bfe484f
 * 
 * How to use:
 * - add to your function.php or related
 *
 * What you can use it for:
 * Variable products:
 * - you have variable product with some attributes not used for variations
 * - you still want to let your users choose some of those attributes values on frontend
 * - eg: your have an attribute that don't impact prices, and that is required or not, and don't want to create useless variations for those attributes
 *
 * Simple product:
 * - you have a single product, and want to allow user to select some of its attributes values from frontend
 */

/**
 * List available attributes on product page in a drop-down selection
 */
function list_attributes_on_product_page() {
    global $product;
    $attributes = $product->get_attributes();

    if ( ! $attributes ) {
        return;
    }

    //uncomment this if you only want fields to be displayed for non-variable products
    /*if ($product->is_type( 'variable' )) {
        return;
    }*/

    echo '<div style="padding-bottom:15px;">';

    foreach ( $attributes as $attribute ) {

        //If product is variable, and attribute is used for variation: woocommerce already handle this input
        if($product->is_type( 'variable' ) && $attribute['variation']) {
            continue;
        }

        //get taxonomy for the attribute - eg: Size
        $taxonomy = get_taxonomy($attribute['name']);

        //get terms - eg: small
        $options = wc_get_product_terms( $product->get_id(), $attribute['name'], array( 'fields' => 'all' ) );
        $label = str_replace('Product ', '', $taxonomy->label);
        //display select input
        ?>
        <div style="padding-bottom:8px;">
            <label for="attribute[<?php echo $attribute['id']; ?>]"><?php echo $label; ?></label>
            <br />
            <!-- add required attribute or not, handle default with "selected" attribute depending your needs -->
            <select name="attribute[<?php echo $attribute['id']; ?>]" id="attribute[<?php echo $attribute['id']; ?>]">
                <option value disabled selected>Choose an option</option>
                <?php foreach ( $options as $pa ): ?>
                    <option value="<?php echo $pa->name; ?>"><?php echo $pa->name; ?></option>
                <?php endforeach; ?>
            </select>
        </div>
        <?php
    }

    echo '</div>';
}
//update the "woocommerce_before_add_to_cart_button" to change the position of the HTML output
add_action('woocommerce_before_add_to_cart_button', 'list_attributes_on_product_page');

/**
 * Add selected attributes to cart items
 */
add_filter('woocommerce_add_cart_item_data', 'add_attributes_to_cart_item', 10, 3 );
function add_attributes_to_cart_item( $cart_item_data, $product_id, $variation_id ) {
    $attributes = $_POST['attribute'] ?? null;

    if (empty( $attributes ) ) {
        return $cart_item_data;
    }

    $cart_item_data['attributes'] = serialize($attributes);

    return $cart_item_data;
}

/**
 * Display attributes in cart
 */
add_filter( 'woocommerce_get_item_data', 'display_attributes_in_cart', 10, 2 );
function display_attributes_in_cart( $item_data, $cart_item ) {
    if ( empty( $cart_item['attributes'] ) ) {
        return $item_data;
    }

    foreach (unserialize($cart_item['attributes']) as $attributeID => $value) {
        $attribute = wc_get_attribute($attributeID);
        $item_data[] = array(
            'key'     => $attribute->name,
            'value'   => $value,
            'display' => '',
        );
    }

    return $item_data;
}

/**
 * Add attribute data to order items
 */
add_action( 'woocommerce_checkout_create_order_line_item', 'add_attributes_to_order_items', 10, 4 );
function add_attributes_to_order_items( $item, $cart_item_key, $values, $order ) {
    if ( empty( $values['attributes'] ) ) {
        return;
    }

    foreach (unserialize($values['attributes']) as $attributeID => $value) {
        $attribute = wc_get_attribute($attributeID);
        $item->add_meta_data( $attribute->name, $value );
    }
}

Hi,
this is great, for avoiding unnecessary variations, thank you for this code.

Is it possible to limit this code to 2-3 attributes and specific category, or just products where those specific attributes are available?

Thank you

@LevelUpGit Yes of course. From the list_attributes_on_product_page() method, you have the $product and $attribute variables. Dump them to check content, and you can then make some new conditions based on product ID, or variation ID, etc... Just return an empty value like return; to prevent any output to the page. Conditioning in this method only should be enough (not tested).

Hi,
thanks for the code.
Is it possible to set the mandatory attribute (to be filled in to add the product to the cart)?
thank you

Hi @treativa,
well, it is, to me it would require two things:

• in list_attributes_on_product_page method: you can edit HTML output to add required attribute depending your needs (based on the $attribute you want to apply on)
• hook on the "add to cart" to detect this product is added to cart, and POST contain the required field
• you can also add some JS to disable the add to cart button

ok. I add required attribute.
thanks

@treativa careful, as you also need to validate the "add to cart" action. Or a user could remove the "required" attribute in the HTML and submit (add to cart) anyway. Check how to create a "custom add to cart validation" like here.

Also, the "required" HTML attribute should maybe not be added to all attribute inputs, so you can create condition in the list_attributes_on_product_page based on the $attribute variable properties.

Good luck!

@mtx-z
I still need your help (to pay the job).
Now I would like to replace the color drop-down menu, with a view of the color options such as:
https://pnt.sc/h3bgy5fdwk_s
To create attributes I used this plugin:
https://codecanyon.net/item/super-product-variation-swatches-for-woocommerce/24566625

it's possible?

It is - but it maybe would be easier to find a woocommerce Variation Swatches plugin that enables and allows usage of non-variation attributes.
If you only have one attribute type and inputs, I would do it manually by editing the HTML output in the list_attributes_on_product_page method.
If you have many and need the "dynamic" that any type of non-variation attribute can have a customized swatch: I would look for a plugin that does all of this.

Thank you for your code. How can I get variation image? I saw array only for name.

@rselvainkrefuge a variation being a combination of attribute values: the user must first select attributes to "select" a matching variation.
I believe you would like to display/update the picture when the user selects options.
Here's what you could do :

• on the product page, create and store an array of product variations and their attributes (mostly this data is already stored as an attribute on the add_to_cart form by woocommerce default, but not the variation image I guess);
• when the user change options, check if all options combination match an existing variation
• if match: display the image

Hi @mtx-z, I am asking about this variation image. Each variation value has separate images. I need to show them in frontend

Backend

Frontend

Hi I've been trying using your code on product variations but somehow it didn't work on woo 8.5.2
The following code modifications work without using wc_get_attribute()

//attributes dropdown without variation
function list_attributes_on_product_page() {
    global $product;
    $attributes = $product->get_attributes();
    //uncomment this if you only want fields to be displayed for non-variable products
    if ($product->is_type( "variable" ) && isset($attributes)) {

        echo "<div style="padding-bottom:15px;">";

        foreach ( $attributes as $id=>$attribute ) {

            //If product is variable, and attribute is used for variation: woocommerce already handle this input
            if($product->is_type( "variable" ) && $attribute["variation"]) {
                continue;
            }

            //get terms - eg: small
            $attribute_options = $attribute->get_options();  
            $label = $attribute->get_name();
            $attribute_name = urlencode($label);
            //display select input
            ?>
            <div style="padding-bottom:8px;">
                <label for="<?php echo $id; ?>"><?php echo $label; ?></label>
                <br />
                <!-- add required attribute or not, handle default with "selected" attribute depending your needs -->
                <select name="attribute[<?php echo $id; ?>]" id="attribute[<?php echo $id; ?>]">
                    <option value disabled selected>Choose an option</option>
                    <?php foreach ( $attribute_options as $key => $attribute_option ): ?>
                        <option value="<?php echo $attribute_option; ?>"><?php echo $attribute_option; ?></option>
                    <?php endforeach; ?>
                </select>
            </div>
            <?php
        }

        echo "</div>";

    }
}
//update the "woocommerce_before_add_to_cart_button" to change the position of the HTML output
add_action("woocommerce_before_add_to_cart_button", "list_attributes_on_product_page");



/**
 * Add selected attributes to cart items
 */
add_filter("woocommerce_add_cart_item_data", "add_attributes_to_cart_item", 10, 3 );
function add_attributes_to_cart_item( $cart_item_data, $product_id, $variation_id ) {
    $attributes = $_POST["attribute"] ?? null;

    if (empty( $attributes ) ) {
        return $cart_item_data;
    }

    $cart_item_data["attributes"] = serialize($attributes);

    return $cart_item_data;
}


/**
 * Display attributes in cart
 */
add_filter( "woocommerce_get_item_data", "display_attributes_in_cart", 10, 2 );
function display_attributes_in_cart( $item_data, $cart_item ) {
    if ( empty( $cart_item["attributes"] ) ) {
        return $item_data;
    }

    foreach (unserialize($cart_item["attributes"]) as $name => $value) {
        $item_data[] = array(
            "key"     => $name,
            "value"   => $value,
            "display" => "",
        );
    }

    return $item_data;
}

/**
 * Add attribute data to order items
 */
add_action( "woocommerce_checkout_create_order_line_item", "add_attributes_to_order_items", 10, 4 );
function add_attributes_to_order_items( $item, $cart_item_key, $values, $order ) {
    if ( empty( $values["attributes"] ) ) {
        return;
    }

    foreach (unserialize($values["attributes"]) as $name => $value) {
        $item->update_meta_data( $name, $value );
    }
}