We have created a site using WooCommerce and WordPress with predefined products.
However, Product A must have variations, to resolve this, we added custom fields such as Colors, Dimensions, etc...
Now once the end-users are navigating to the product, we are able to fetch the custom field values. We also modified the UI so that users can pick and choose from these custom fields. (We have a preview of the modifications done via JS/CSS), so for instance, if they choose a green color we use JS to add a layer of green so that the preview is real time.
Now, we have one challenge.
-> What is the best way to go about adding this product PLUS all modifications done to the cart?
So for instance Product A was modified (on the front-end) using data pulled from the custom fields to include Color: Green and Size: 100x100 instead of defaults values. How do we store this and pass the customized product to the cart?
Appreciate the help!. Glad to add more details if something is not clear.
(There are plugins out there that can provide this functionality; Things similar to WooCommerce Product Add-On, etc... However, we have to custom develop the feature.)
It requires some steps.
1). For your product page:
First you might need to add hidden fields to the add to cart form for each custom field like (example):
add_action( 'woocommerce_before_add_to_cart_button', 'add_hidden_empty_input_fields' );
function add_hidden_empty_input_fields() {
?>
<input type="hidden" name="hidden_color" id="hidden_color" value="">
<input type="hidden" name="hidden_dimensions" id="hidden_dimensions" value="">
<?php
}
Then you will have to make some changes to your Javascript code to set the custom fields chosen values in those hidden fields.
2). Pass the custom fields selected values as custom cart item data (example):
add_filter('woocommerce_add_cart_item_data', 'add_custom_field_data', 10, 3 );
function add_custom_field_data( $cart_item_data, $product_id, $variation_id ) {
if ( isset($_POST['hidden_color']) && ! empty($_POST['hidden_color']) ) {
$cart_item_data['color'] = esc_attr($_POST['hidden_color']);
}
if ( isset($_POST['hidden_dimensions']) && ! empty($_POST['hidden_dimensions']) ) {
$cart_item_data['dimensions'] = esc_attr($_POST['hidden_dimensions']);
}
return $cart_item_data;
}
And optionally display values on cart items (example):
add_filter( 'woocommerce_get_item_data', 'display_custom_cart_item_data', 10, 2 );
function display_custom_cart_item_data( $cart_data, $cart_item ) {
if ( isset($cart_item['color']) ) {
$cart_data[] = array( "name" => __("Color"), "value" => $cart_item['color'] );
}
if ( isset($cart_item['dimensions']) ) {
$cart_data[] = array( "name" => __("Dimensions"), "value" => $cart_item['dimensions'] );
}
return $cart_data;
}
3). Save the custom cart item data as custom order item meta data (example):
add_action( 'woocommerce_checkout_create_order_line_item', 'save_custom_order_item_meta_data' , 10, 4 );
function save_custom_order_item_meta_data( $item, $cart_item_key, $values, $order ) {
if ( isset($values['color']) ) {
$item->add_meta_data( __("Color"), $values['color'] );
}
if ( isset($values['dimensions']) ) {
$item->add_meta_data( __("Dimensions"), $values['dimensions'] );
}
}
Note: The data is going to be displayed on everywhere on orders and email notifications.
Code goes in functions.php file of the active child theme (or active theme). It should work.
The variations have a post_id, you would just use the variation post_id instead of the main product one.
Related
I'm trying to do a special logic for my custom plugin. If the user has added a specific product type in their cart, in the checkout page there must be radio inputs that determine whether the user wants the specific product type to be shipped or stored in vault. I've done everything for the frontend part (creating the radio inputs, built the JavaScript logic to remove from the DOM what's not necessary and so on...) but I now need to programatically remove the shipping from the order and remove the "Shipping" row inside the order preview in the checkout page. I tried the following filter
add_filter( 'woocommerce_cart_shipping_method_full_label', 'remove_shipping_labels', 10, 2 );
function remove_shipping_labels( $label, $method ) {
return '';
}
But it's removing just the label text "Free Shipping" but not the entire shipping row inside the order preview in the checkout page. How can I programatically remove the shipping availability from an order through AJAX and update the user interface inside the checkout page?
function hide_shipping_based_on_prod_type( $rates ) {
global $woocommerce;
$items = $woocommerce->cart->get_cart();
foreach ( $items as $item => $values ) {
$product_id = $values['data']->get_id();
$product_type = WC_Product_Factory::get_product_type( $values['data']->get_id() );
if ( 'simple' === $product_type ) { //check product types of woocommerce to add more conditions
unset( $rates['free_shipping:1'] );
}
}
return $rates;
}
add_filter( 'woocommerce_package_rates', 'hide_shipping_based_on_prod_type', 100 );
add_action(
'after_setup_theme',
function() {
WC_Cache_Helper::get_transient_version( 'shipping', true );
}
);
I have created my woocommerce products (fruits and vegetables) with a bunch of custom meta data I can correctly input and display them on my website. One of this data is the unit (ie kilos, box of 6, etc.).
On the Admin order page, I'd like to display this "unit" field right below the name of the products (ex : Strawberry - kilo / Eggs - box of 6, etc.).
I have tried the following code and have the following result (see screenshot) :
add_action( 'woocommerce_before_order_itemmeta', 'unit_before_order_itemmeta', 10, 3 );
function unit_before_order_itemmeta( $item_id, $item, $_product ){
if( $unit = $_product->get_meta('unite') ) {
echo '<p>'.$unit.'</p>';}
}
And here is the result :
Screemshot single order page
=> The meta field 'unit' is correctly displayedunder each product, but for some reason it breaks the page and I have a critical error mesage (highlited in red) at the bottom of the page.
I have read a lot of posts here about different way to catch and display (return, print...) my meta data, but I always end up having this critical error.
Could someone help me understand what is wrong with my code?
You need to target order "line" items only and admin to avoid errors, as follow:
add_action( 'woocommerce_before_order_itemmeta', 'unit_before_order_itemmeta', 10, 3 );
function unit_before_order_itemmeta( $item_id, $item, $product ){
// Only "line" items and backend order pages
if( ! ( is_admin() && $item->is_type('line_item') ) ) return;
$unit = $product->get_meta('unite');
if( ! empty($unit) ) {
echo '<p>'.$unit.'</p>';
}
}
It should better work now without errors.
I'm selling Gift Cards via WooCommerce on Wordpress. My customer should be able to set a value for the gift card amount by himself. I just was able to do this via a plugin. Is there a possibilty to do this by changing some code or via functions.php?
Installed Pimwick Gift Card Pro
Yes, but it's a fairly complex process if doing so from a completely fresh WooCommerce installation with no additional plugins. You will need to do the following things to achieve it:
Add a custom input field to the product to add the custom price
Save the data from the custom input field to the session (cart) when that product is added to the cart
Add the cart meta (created above in #2) to the order when the order is created
Adjust the cost of the product based on the custom price meta (added above in #3).
Step 1: Add a custom input field:
You can add the input field using the woocommerce_before_add_to_cart_button filter as shown below.
Alternatively you can use the woocommerce_wp_text_input - here's an example.
add_action( 'woocommerce_before_add_to_cart_button', 'add_custom_price_input', 100 );
function add_custom_price_input() {
if(get_the_ID() != 123) { //use the product ID of your gift card here, otherwise all products will get this additional field
return;
}
echo '<input type="number" min="50" placeholder="50" name="so_57140247_price">';
}
Step 2: Save custom price to Cart/Session
Next, we need to make sure that your custom input field data is carried over to the cart/session data. We can make use of the woocommerce_add_cart_item_data ( docs | example ) filter to that:
add_filter( 'woocommerce_add_cart_item_data', 'add_custom_meta_to_cart', 10, 3 );
function add_custom_meta_to_cart( $cart_item_data, $product_id, $variation_id ) {
$custom_price = intval(filter_input( INPUT_POST, 'so_57140247_price' ));
if ( !empty( $custom_price ) && $product_id == 123 ) { //check that the custom_price variable is set, and that the product is your gift card
$cart_item_data['so_57140247_price'] = $custom_price; //this will add your custom price data to the cart item data
}
return $cart_item_data;
}
Step 3: Add cart meta to the order
Next we have to add the meta from the cart/session to the order itself so that it can be used in the order-total calculations. We use the woocommerce_checkout_create_order_line_item ( docs | example ) to do this:
add_action( 'woocommerce_checkout_create_order_line_item', 'add_custom_meta_to_order', 10, 4 );
function add_custom_meta_to_order( $item, $cart_item_key, $values, $order ) {
//check if our custom meta was set on the line item of inside the cart/session
if ( !empty( $values['so_57140247_price'] ) ) {
$item->add_meta_data( '_custom_price', $values['so_57140247_price'] ); //add the value to order line item
}
return;
}
Step 4: Adjust total of gift card line item
Finally, we simply adjust the cost of the line item of the gift card based on the value entered into the input field. We can hook into woocommerce_before_calculate_totals ( docs | example ) to do this.
add_action( 'woocommerce_before_calculate_totals', 'calculate_cost_custom', 10, 1);
function calculate_cost_custom( $cart_obj ) {
foreach ( $cart_obj->get_cart() as $key => $value ) {
$price = intval($value['_custom_price']);
$value['data']->set_price( $price );
}
}
I am trying to redirect my custom shop page to cart page after user select custom attributes (liability and hours) and then clicks the purchase button.
I have written custom JS code which retrieves the variation_id and attributes value and append it to the URL so that it automatically gets added to cart and get's redirected to cart page.
href="yourdomain.com/?add-to-cart=47&variation_id=88&quantity=3&attribute_pa_colour=blue&attribute_pa_size=m"
This is the URL format which I have found in a blog: (https://businessbloomer.com/woocommerce-custom-add-cart-urls-ultimate-guide/) and I made my link in this format.
My link is:
localhost/wordpress/cart/?add-to-cart=1185&variation_id=1641&quantity=1&attribute_pa_liability=2_million&attribute_pa_hours=500_hours
Where liability and hours is my custom attribute which has values as 1 million, 2 million and 500 hours, 750 hours respectively.
But when it get's redirected to cart page woocommerce give me an error and shows it's alert box which shows the error message as "liability and hours are required fields".
I think woocommerce is unable to get the attribute values through my URL.
Can anyone explain why is this happening and what is the error if there is any?
Updated
This "Business Bloomer" guide is a little outdated… You need 2 things:
1). The correct URL
You don't need to addto cart the product and the variation Id with all related attributes. You just need to add to cart the variation ID + your custom attributes like this: localhost/wordpress/cart/?add-to-cart=1641&quantity=1&pa_liability=2_million&pa_hours=500_hours
2). Registering (and display) your custom attributes:
// Store the custom data to cart object
add_filter( 'woocommerce_add_cart_item_data', 'save_custom_product_data', 10, 2 );
function save_custom_product_data( $cart_item_data, $product_id ) {
$bool = false;
$data = array();
if( isset( $_REQUEST['pa_liability'] ) ) {
$cart_item_data['custom_data']['pa_liability'] = $_REQUEST['pa_liability'];
$data['pa_liability'] = $_REQUEST['pa_liability'];
$bool = true;
}
if( isset( $_REQUEST['pa_hours'] ) ) {
$cart_item_data['custom_data']['pa_hours'] = $_REQUEST['pa_hours'];
$data['pa_hours'] = $_REQUEST['pa_hours'];
$bool = true;
}
if( $bool ) {
// below statement make sure every add to cart action as unique line item
$cart_item_data['custom_data']['unique_key'] = md5( microtime().rand() );
WC()->session->set( 'custom_variations', $data );
}
return $cart_item_data;
}
// Displaying the custom attributes in cart and checkout items
add_filter( 'woocommerce_get_item_data', 'customizing_cart_item_data', 10, 2 );
function customizing_cart_item_data( $cart_data, $cart_item ) {
$custom_items = array();
if( ! empty( $cart_data ) ) $custom_items = $cart_data;
// Get the data (custom attributes) and set them
if( ! empty( $cart_item['custom_data']['pa_liability'] ) )
$custom_items[] = array(
'name' => 'pa_liability',
'value' => $cart_item['custom_data']['pa_liability'],
);
if( ! empty( $cart_item['custom_data']['pa_hours'] ) )
$custom_items[] = array(
'name' => 'pa_hours',
'value' => $cart_item['custom_data']['pa_hours'],
);
return $custom_items;
}
Code goes in function.php file of your active child theme (or theme) or also in any plugin file.
Tested and works
You will need to add this data to the order items too
First uncheck the ajax add to cart option from admin panel
Then you need to make variation with your attributes then find out product id, quantity, attribute slug and attribute name(used to show in cart) and variation id and then make your cart url like given below.
The add to cart link with attribute is : https://www.your-domain.com/?add-to-cart=(product id)&quantity=(numeric quantity)&attribute_pa_(attribute slug)=(attribute name)&variation_id=(variation id)
For more details you can visit http://www.codemystery.com/wordpress-woocommerce-add-cart-link-variations/
The other answers are correct in regards to the add to cart url format (should be: /add-to-cart=product_id&my_custom_attr=whatever&my_custom_attr2=somthing)
Then there is a very good plugin to handle this type of functionality for storing the custom product attributes called WC Fields Factory.
And the writer of the plugin also has a great article on how to do this w/o need of a plugin. As well as an answer on a similar question here.
On woocommerce, I am using the code below to render some product custom fields, on cart and on checkout:
add_filter( 'woocommerce_get_item_data', 'rendering_meta_field_on_cart_and_checkout', 10, 2 );
function rendering_meta_field_on_cart_and_checkout( $cart_data, $cart_item ) {
$custom_items = array();
if( !empty( $cart_data ) ) {
$custom_items = $cart_data;
}
if( isset( $cart_item['wccpf_enter_product_id'] ) ) {
$diamond = $cart_item['wccpf_enter_product_id'];
$pacolor = get_the_terms($diamond, 'pa_color');
foreach ( $pacolor as $pacolor ) {
$color= $pacolor ->name;
}
$custom_items[] = array( "name" => "color", "value" => $color);
}
return $custom_items;
}
How can I display that custom product fields wccpf_enter_product_id' value in orders?
Thanks.
You can use a custom function hooked in woocommerce_add_order_item_meta action hook to achieve this.
You will need first to add an attribute in your products to get a "readable clean label" for your custom field value that is going to appear as order items meta data.
For that you have to create an attribute first and then set it in your product with any value (as you will replace this value in the code below).
See HERE some more explanations about that process…
You will have to replace in my code the 'custom_field_key' by your specific custom key that you will find on wp_woocommerce_order_itemmeta MySQL table for the corresponding item ID for your specific Order ID.
To find the corresponding item ID for the order, you can search in wp_woocommerce_order_items MySQL table with the Order ID…
You will have also to set your correct attribute slug instead of 'pa_your_attribute' to display in your orders the correct label text for this custom field value.
(see below other similar answers references).
So your code will be something like this:
// ADD THE INFORMATION AS META DATA SO THAT IT CAN BE SEEN AS PART OF THE ORDER
add_action('woocommerce_add_order_item_meta','add_and_update_values_to_order_item_meta', 1, 3 );
function add_and_update_values_to_order_item_meta( $item_id, $item_values, $item_key ) {
// Getting your custom product ID value from order item meta
$custom_value = wc_get_order_item_meta( $item_id, 'custom_field_key', true );
// Here you update the attribute value set in your simple product
wc_update_order_item_meta( $item_id, 'pa_your_attribute', $custom_value );
}
}
Code goes in function.php file of your active child theme (or theme) or also in any plugin file.
This should work
Related answers:
Adding user custom field value to order items details
Add custom Product data dynamically as item meta data on the Order
Displaying custom product data in Order items view