Last active
August 17, 2024 10:56
-
-
Save mtx-z/021d092442f43e895e7fc740ef058f84 to your computer and use it in GitHub Desktop.
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
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<?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 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 );
}
}
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Hi @mtx-z, I am asking about this variation image. Each variation value has separate images. I need to show them in frontend
Backend
![variation-backend](https://user-images.githubusercontent.com/71083220/203689047-1d0130d7-c4f7-4b3a-8b0e-06ec05ca7ee3.png)
Frontend
![variation-frontend](https://user-images.githubusercontent.com/71083220/203682868-9c9f9443-6826-461f-a39a-27f97c5cb639.png)