UPDATED 9/29/2019: Noticed some code typos and updated some of the display sections for compatibility with WooCommmerce 3.7.
In this WooCommerce tutorial I will be showing you how to add a custom field to the front-end of a WooCommerce product. We’ll be adding a text input that a customer could use to enter some special instructions or a custom inscription, etc. In theory, you could expand this to do all kinds of customizations (like allow the customer to upload an image), but this is a tutorial so let’s keep it kind of simple. Or in lieu of banging your head against a wall you could just buy WooCommerce Product Add-ons (This is an affiliate link).
We’ll start with adding the input to the single product page template then add the custom text to the cart, order, and even the checkout emails!
Please note that all code could go in your theme’s functions.php but really, this is functionality, so please put it in a plugin! This is going to be pretty code-heavy, so if you need a refresher on actions and filters and the like then you might want to review the basics before diving in to this.
First step is to add the text input to the front end
You can technically add this input anywhere, but since it is a core WooCommerce hook, woocommerce_before_add_to_cart_button is about 99% likely to work with any theme. Nothing too special going on here. We’re just adding a text input. Pay attention the input’s name. We’re going to be using that a lot.
|
1 2 3 4 5 6 7 8 |
/** * Display input on single product page */ function kia_custom_option(){ $value = isset( $_POST['_custom_option' ] ) ? sanitize_text_field( $_POST['_custom_option'] ) : ''; printf( '<p><label>%s<input name="_custom_option" value="%s" /></label></p>', __( 'Enter your custom text', 'kia-plugin-textdomain' ), esc_attr( $value ) ); } add_action( 'woocommerce_before_add_to_cart_button', 'kia_custom_option', 9 ); |
Validate and sanitize the input data
If your field is optional, then you can delete this function completely. Or you could modify it to validate however, you’d like. For simplicity’s sake I’ve triggered an error if the customer tries to add the item to the cart without filling in any custom text.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
/** * Validate when adding to cart * * @param bool $passed * @param int $product_id * @param int $quantity * @return bool */ function kia_add_to_cart_validation( $passed, $product_id, $qty ){ if( isset( $_POST['_custom_option'] ) && sanitize_text_field( $_POST['_custom_option'] ) == '' ){ $product = wc_get_product( $product_id ); wc_add_notice( sprintf( __( '%s cannot be added to the cart until you enter some custom text.', 'kia-plugin-textdomain' ), $product->get_title() ), 'error' ); return false; } return $passed; } add_filter( 'woocommerce_add_to_cart_validation', 'kia_add_to_cart_validation', 10, 3 ); |
Add the custom data to the cart item
At first there’s a lot of mystery going on with the cart. Where the heck is that data coming from anyway? All the products are stored in an array in _$SESSION data. For the most part, Woo saves the product ID and the quantity and a handful of other things, but conveniently has a filter that will allow us to pass some of our own data to the cart item.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
/** * Add custom data to the cart item * * @param array $cart_item * @param int $product_id * @return array */ function kia_add_cart_item_data( $cart_item, $product_id ){ if( isset( $_POST['_custom_option'] ) ) { $cart_item['_custom_option'] = sanitize_text_field( $_POST[ '_custom_option' ] ); } return $cart_item; } add_filter( 'woocommerce_add_cart_item_data', 'kia_add_cart_item_data', 10, 2 ); |
Preserve the Cart Data
The cart is reloaded from the $_SESSION on every page load. This must be a security feature, but I am not actually 100% sure. I do know that the first time I started messing around I didn’t understand why the previous function was adding the info to the cart, but as soon as I loaded the cart it disappeared. That drove me crazy for a bit until someone pointed out the woocommerce_get_cart_item_from_session filter. Basically, we’ll just check if we already had the data in the $cart_item array, and if so, maintain it.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
/** * Load cart data from session * * @param array $cart_item * @param array $other_data * @return array */ function kia_get_cart_item_from_session( $cart_item, $values ) { if ( isset( $values['custom_option'] ) ){ $cart_item['custom_option'] = $values['custom_option']; } return $cart_item; } add_filter( 'woocommerce_get_cart_item_from_session', 'kia_get_cart_item_from_session', 20, 2 ); |
Save the Custom Data On Checkout
WooCommerce has improved quite a bit in how it handles this data. Now we can call a simple woocommerce_add_order_item_meta() and it kind of acts like post meta, but for the item in this specific order. The data ends up in its own table.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
/** * Add meta to order item * * @param int $item_id * @param array $values * @return void */ function kia_add_order_item_meta( $item_id, $values ) { if ( ! empty( $values['custom_option'] ) ) { wc_add_order_item_meta( $item_id, 'custom_option', $values['custom_option'] ); } } add_action( 'woocommerce_add_order_item_meta', 'kia_add_order_item_meta', 10, 2 ); |
Display all the Things!
Now that we actually have some usable data in the cart, it is time to display it to the customer. First, we’ll want to show it in the cart.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
/** * Display entered value in cart * * @param array $other_data * @param array $cart_item * @return array */ function kia_get_item_data( $other_data, $cart_item ) { if ( isset( $cart_item['custom_option'] ) ){ $other_data[] = array( 'key' => __( 'Your custom text', 'kia-plugin-textdomain' ), 'display' => sanitize_text_field( $cart_item['custom_option'] ) ); } return $other_data; } add_filter( 'woocommerce_get_item_data', 'kia_get_item_data', 10, 2 ); |
Then we’ll want to show it in the order overview page, which should also be the same template shown in the My Account area and all emails too.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
/** * Restore custom field to product meta when product retrieved for order item. * Meta fields will be automatically displayed if not prefixed with _ * * @param WC_Product $product * @param WC_Order_Item_Product $order_item * @return array */ function kia_order_item_product( $product, $order_item ){ if( $order_item->get_meta( 'custom_option' ) ){ $product->add_meta_data( 'custom_option', $order_item->get_meta( 'custom_option' ), true ); } return $product; } add_filter( 'woocommerce_order_item_product', 'kia_order_item_product', 10, 2 ); |
Update: Instead of having ‘order_item’ appear in the order table, we can customize the label with the following code:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
/** * Customize the display of the meta key in order tables. * * @param string $display_key * @param obj[] $meta * @param WC_Order_Item_Product $order_item * @return string */ function kia_order_item_display_meta_key( $display_key, $meta, $order_item ){ if( $meta->key == 'custom_option' ){ $display_key = __( 'Your custom text', 'kia-plugin-textdomain' ); } return $display_key; } add_filter( 'woocommerce_order_item_display_meta_key', 'kia_order_item_display_meta_key', 10, 3 ); |
Bonus, order again!
Should the customer want to order the exact same item with the exact same field we can do that too by adding the order item meta to the new cart item created when ordering again.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
/** * Order Again * * @param array $cart_item * @param WC_Order_Item_Product $order_item * @param WC_Order $order * @return array */ function kia_order_again_cart_item_data( $cart_item, $order_item, $order ){ if( $order_item->get_meta( 'custom_option' ) ){ $cart_item['custom_option'] = $order_item->get_meta( 'custom_option' ); } return $cart_item; } add_filter( 'woocommerce_order_again_cart_item_data', 'kia_order_again_cart_item_data', 10, 3 ); |
And that’s it! You can download the entire thing here.
I’ve expanded on the code I posted in my tutorial on how to customize the WooCommerce Checkout.
First you need to register the new checkout fields. This is where I’ve added a current_user_can() to test if the current user has the appropriate capabilities to see these extra fields. I’m using the manage_options capability because it was easier for me to test.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 |
// Add new checkout fields function kia_filter_checkout_fields( $fields ){ if( current_user_can( 'manage_options' ) ) { $fields['extra_fields'] = array( 'date_of_purchase' => array( 'type' => 'text', 'label' => __( 'Date of Purchase', 'your-plugin' ), 'placeholder' => _x ('MM/DD/YYYY', 'placeholder', 'your-plugin' ), 'required' => false, 'class' => array( 'form-row-wide' ), 'clear' => true ), 'place_of_purchase' => array( 'type' => 'select', 'label' => __( 'Place of Purchase', 'your-plugin' ), 'placeholder' => _x( 'Select Option', 'placeholder', 'your-plugin' ), 'required' => false, 'class' => array('form-row-wide' ), 'clear' => true, 'options' => array('option-1' => __( 'Option 1', 'your-plugin' ), 'option_2' => __( 'Option 2', 'your-plugin' ), 'option_3' => __( 'Option 3', 'your-plugin' ) ) ), 'color_item' => array( 'type' => 'select', 'label' => __( 'Product Color', 'your-plugin' ), 'placeholder' => _x( 'Select Option', 'placeholder', 'your-plugin' ), 'required' => false, 'class' => array( 'form-row-wide' ), 'clear' => true, 'options' => array( 'option-1' => __( 'Option 1', 'your-plugin' ), 'option_2' => __( 'Option 2', 'your-plugin' ), 'option_3' => __( 'Option 3', 'your-plugin' ) ) ), 'product_model' => array( 'type' => 'select', 'label' => __( 'Model', 'your-plugin' ), 'placeholder' => _x('Select Option', 'placeholder', 'your-plugin' ), 'required' => false, 'class' => array('form-row-wide'), 'clear' => true, 'options' => array( 'option-1' => __( 'Option 1', 'your-plugin' ), 'option_2' => __( 'Option 2', 'your-plugin' ), 'option_3' => __( 'Option 3', 'your-plugin' ) ) ), 'product_condition' => array( 'type' => 'multicheck', 'label' => __( 'Product Condition:', 'your-plugin' ), 'description' => __( 'Check All That Apply:', 'your-plugin' ), 'required' => false, 'clear' => true, 'options' => array( 'lightbulb_out' => __( 'Lightbulb is Out', 'your-plugin' ), 'not_turn_on' => __( 'Will Not Turn On', 'your-plugin' ), 'fan_not_running' => __( 'Fan Stopped Running', 'your-plugin' ), 'strange_noise' => __( 'Strange Noise', 'your-plugin' ), 'not_catching' => __( 'Not Catching Insectsn', 'your-plugin' ), 'csr_other' => __( 'Other', 'your-plugin' ), ), ), 'case_description' => array( 'type' => 'textarea', 'label' => __( 'Description of Case', 'your-plugin' ), 'placeholder' => _x( 'Please provide details', 'placeholder', 'your-plugin' ), 'required' => false, 'class' => array( 'form-row-wide' ), 'clear' => true, ), ); } return $fields; } add_filter( 'woocommerce_checkout_fields', 'kia_filter_checkout_fields' ); |
You will note that I’ve done something different with your “Fan Stopped”, etc checkboxes. You don’t have to do this, but I was curious and procrastinating. WooCommerce doesn’t support a multi-check set of checkboxes, but it does support defining your own custom field types. So with the following we create a new type of form field:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 |
function kia_multicheck_form_field( $field, $key, $args, $value ){ $field_html = '<fieldset>'; if( isset( $args['label'] ) ){ $field_html .= '<legend>' . $args['label'] . '</legend>'; } if ( ! empty( $args['options'] ) ) { foreach ( $args['options'] as $option_key => $option_text ) { $field_html .= '<input type="checkbox" class="input-multicheck ' . esc_attr( implode( ' ', $args['input_class'] ) ) . '" value="' . esc_attr( $option_key ) . '" name="' . esc_attr( $key ) . '[]" id="' . esc_attr( $args['id'] ) . '_' . esc_attr( $option_key ) . '"' . checked( $value, $option_key, false ) . ' />'; $field_html .= '<label for="' . esc_attr( $args['id'] ) . '_' . esc_attr( $option_key ) . '" class="multicheck ' . implode( ' ', $args['label_class'] ) . '">' . $option_text . '</label>'; } } if ( $args['description'] ) { $field_html .= '<span class="description">' . esc_html( $args['description'] ) . '</span>'; } $field_html .= '</fieldset>'; $container_class = esc_attr( implode( ' ', $args['class'] ) ); $container_id = esc_attr( $args['id'] ) . '_field'; $after = ! empty( $args['clear'] ) ? '<div class="clear"></div>' : ''; $field_container = '<p class="form-row %1$s" id="%2$s" data-sort="' . esc_attr( $sort ) . '">%3$s</p>'; $field = sprintf( $field_container, $container_class, $container_id, $field_html ) . $after; return $field; } add_filter( 'woocommerce_form_field_multicheck', 'kia_multicheck_form_field', 10, 4 ); |
Next we display the new fields on the checkout page…. but only if they exist, because harkening back to the first code block, they won’t be in the checkout fields array if the user doesn’t have the right permissions.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
// Display the extra field on the checkout form function kia_extra_checkout_fields(){ $checkout = WC()->checkout(); if( isset( $checkout->checkout_fields['extra_fields'] ) ) { ?> <div class="extra-fields"> <h3><?php _e( 'CSR Information' ); ?></h3> <?php // because of this foreach, everything added to the array in the previous function will display automagically foreach ( $checkout->checkout_fields['extra_fields'] as $key => $field ) : woocommerce_form_field( $key, $field, $checkout->get_value( $key ) ); endforeach; ?> </div> <?php } } add_action( 'woocommerce_checkout_after_customer_details' ,'kia_extra_checkout_fields' ); |
Now you’ll probably need to add some CSS to make this look better, and you need a way to save the multicheck data. You can review my tutorial on how to save the rest, and perhaps figure out the multicheck on your own.
WooCommerce has a small army of filters and hooks that you could customize almost every aspect of the plugin. If you have a grouped product the default display method is by menu_order. But recently, someone wanted to display the grouped items by the date they were published.
This is very easily accomplished by filtering the $args being passed through the woocommerce_grouped_children_args filter. WooCommerce queries for the child products in the grouped product via WP_Query so you can essentially use any parameter supported by WP_Query. In this case, we only need to change the orderby parameter to date and since we’d like the most recent items first, we swap the order parameter to descending.
|
1 2 3 4 5 6 7 |
add_filter( 'woocommerce_grouped_children_args', 'kia_grouped_children_args' ); function kia_grouped_children_args( $args ){ $args['orderby'] = 'date'; $args['order'] = 'DESC'; return $args; } |
If you need help understanding filters, I wrote what I think is a pretty good tutorial on how to use filters. It took me a while to understand them, but once you do they are very powerful and let you make a lot of customizations.
If you aren’t seeing any changes, chances are that the grouped product’s children have already been stored in a transient. You will need to delete this transient to see changes right away. You can clear all WooCommerce product transients via the Admin. Navigate to WooCommerce>System Status>Tools and click on the button to clear transients.
When I am not coding WooCommerce-related things, my other career as an international athlete. From a purely logical standpoint it has been a terrible career choice because it tends to pay negatively and has put a lot of wear and tear on my body. There have been times when I’ve seriously considered buying a cane because my feet hurt so badly. There was also that time I dislocated my sterno-clavicular joint and couldn’t raise my arm over my head. My clavicles are permanently uneven now. But at the same time, I’ve represented my country in international sports for 10 years, which is something very few people get to do. WooCommerce definitely pays the bills, but as one of my teammates put it, handball is my side hustle.
Four defenders in frame? Someone must be open, but I’m so desperate for action shots that I will post one where I almost assuredly should have passed.
I play handball on the USA national team and recently, we placed third at the North American and Caribbean Championships in Puerto Rico, which qualified us to participate in the Pan-American Championships this month in Cuba. Unfortunately, getting to Cuba is not cheap and Handball is still almost completely unknown in the USA so we’re not bringing in the big sponsors. We’ve been training for these games for 2 years. Many of my teammates moved to Auburn, AL to train full-time together and I’ve been playing semi-professionally in France. There are 12 countries going to Cuba and 5 get to leave with a ticket to the World Championships!
We won bronze at the North American and Caribbean Championships! Check out the black eye I got from a flying headbutt!
So What’s the Deal
In honor of my “side hustle”, for the next TEN DAYS (ending 15 May) I am going to be putting my main hustle in service of handball. I will answer any WooCommerce question, or complete any small WooCommerce-related project in exchange for a donation to the USA Women’s Quest to Cuba. I’m not officially billing you, so what you donate is up to you, but please don’t expect me to write a huge 3rd-party integration for a $5 donation. We’ve only got 10 days, so things I can turn around for you in 1-3 hours is perfect.
Any question that you can’t figure out on your own, I will answer (or tell you I can’t). Any place you’re stuck trying to code your own solution, I will help you solve. Any tweak to your web store that you haven’t gotten around to finding a developer for, I’m here.
You get a little WooCommerce help and the satisfaction of knowing that you are supporting the group of really dedicated and hard-working ladies on Team USA.
or get in touch:
UPDATE 9/28/2019: Example 2 no longer works as WooCommerce now links the product in a grouped product via meta data instead of via post_parent.
I recently answered a few questions on Stack Overflow and they all seemed to related to how to change what products show up in the shop loop… or any other of the shop archives. I figured I would compile them altogether for reference and inspiration.
WooCommerce builds a custom query for products in its WC_Query class by hooking into the classic pre_get_posts hook and changing WordPress’s query parameters to get the desired products. WooCommerce then removes itself from the query afterwards. I’m not 100% sure of why, but I presume there is a good reason. It might be running in WooCommerce, but it is still a regular WordPress query and so the regular WP_Query Parameters apply.
Like most WooCommerce code there is a convenient action hook right in the middle of the product_query() method which will allow us to hook in and make whatever changes we might like to the product query. Note that $q is the query and $this is the WC_Query class instance.
|
1 |
do_action( 'woocommerce_product_query', $q, $this ); |
Example 1: Display Only On-Sale products in Shop
WooCommerce has a shortcode for displaying the most recent on-sale products. So I took a look at how it sets up it’s query args for get_posts(). Turns out WC has a built-in function that returns the IDs of any on-sale products: wc_get_product_ids_on_sale(). So we get grab those ids and then query for those specific posts using the post__in parameter of WP_Query.
|
1 2 3 4 5 |
function so_20990199_product_query( $q ){ $product_ids_on_sale = wc_get_product_ids_on_sale(); $q->set( 'post__in', (array) $product_ids_on_sale ); } add_action( 'woocommerce_product_query', 'so_20990199_product_query' ); |
As is typical in dealing with WordPress query objects we can use get() and set() methods to retrieve info about the query or set new parameters.
Example 2: Hide Products that are Part of a Grouped Product
The person who asked this question has a lot of products that part of other grouped products and didn’t want to display the items individually and in their grouped versions. Turns out that items that are part of a group have the grouped product as their post_parent. Any grouped product (or other top-level, non-grouped product) will have 0 as a post parent. Therefore, we can set the query argument to require a post parent of 0 and effectively eliminate any grouped items.
|
1 2 3 4 |
function so_27975262_product_query( $q ){ $q->set( 'post_parent', 0 ); } add_action( 'woocommerce_product_query', 'so_27975262_product_query' ); |
Example 3: Hide Specific Out of Stock Items
WooCommerce has a setting that allows you to hide all out of stock items from your store. But what if you don’t want a nuclear option and want to have a little finer control over which items are going to be hidden.
We can’t skip straight to the query, because WooCommerce doesn’t have this data. So we need to add some meta. You could use a custom field, but that isn’t as friendly as adding a little checkbox to the product data metabox. I thought it would be appropriate if we placed it near the stock status inputs. WooCommerce already has functions for creating most of the standard input types so we’ll use that to our advantage.
|
1 2 3 4 5 6 7 8 9 |
function so_27971630_hide_if_out_of_stock() { woocommerce_wp_checkbox( array( 'id' => '_hide_if_out_of_stock', 'wrapper_class' => 'show_if_simple show_if_variable', 'label' => __( 'Hide this product from archives when out of stock?', 'your-plugin-domain' ) ) ); } add_action( 'woocommerce_product_options_stock_status', 'so_27971630_hide_if_out_of_stock' ); |
Then we need to save this data. Normally, I’d save a checkbox as ‘yes’ versus ‘no’ like WooCommerce does. However, getting the product query correct (as you’ll see a little later on), required that the meta exist when you wanted to hide the item and not exist at all otherwise… hence the if/else update_post_meta() versus delete_post_meta()
|
1 2 3 4 5 6 7 8 |
function so_27971630_save_product_meta( $product ) { if( isset( $_POST['_hide_if_out_of_stock'] ) ) { $product->update_meta_data( '_hide_if_out_of_stock', 'yes' ); } else { $product->delete_meta_data( '_hide_if_out_of_stock' ); } } add_action( 'woocommerce_admin_process_product_object', 'so_27971630_save_product_meta' ); |
And now we can get to the query. Because WooCommerce already has a few keys in its default meta query and the default meta query operator is AND (meaning my conditions had to be met in addition to what WooCommerce was already looking for), I couldn’t figure out a way to query for posts that had meta equal to a specific key. But because WordPress supports EXISTS and NOT EXISTS comparisons, we can look for posts that way. What I’ve done is in the case where you aren’t mass hiding all out of stock items via the plugin option, this code will modify the meta query so that any item that does not have the meta key _hide_if_out_of_stock will be shown. That is a counter-intuitive way of saying that any product where the box “hide when out of stock” is checked will be hidden.
|
1 2 3 4 5 6 7 8 |
function so_27971630_product_query( $q ) { $meta_query = $q->get( 'meta_query' ); if ( get_option( 'woocommerce_hide_out_of_stock_items' ) == 'no' ) { $meta_query[] = array( 'key' => '_hide_if_out_of_stock', 'compare' => 'NOT EXISTS' ); $q->set( 'meta_query', $meta_query ); } } add_action( 'woocommerce_product_query', 'so_27971630_product_query' ); |
Those are the three uses of modifying WooCommerce’s product query that I have encountered in the past few days. Anybody else doing anything interesting to the product query?
Note: This was updated for compatibility with WooCommerce 3.0+. This will cause fatal errors if used with older versions of WooCommerce.
I was digging around in WooCommerce while trying to come up with a quote for a client. Part of the scope had me wondering if you could remove some fields from the checkout process. If you aren’t selling physical products a billing address can be too much information and could even be off-putting to potential customers.
I eventually tracked the fields down from the checkout template, to the checkout class to the get_address_fields() method in the WC_Countries class.
Removing Billing Address
Like a lot of things in WooCommerce you can modify values via filter. To remove all the physical address fields from the billing address here is the code I used:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
// Remove some checkout billing fields function kia_filter_billing_fields($fields){ unset( $fields["billing_country"] ); unset( $fields["billing_company"] ); unset( $fields["billing_address_1"] ); unset( $fields["billing_address_2"] ); unset( $fields["billing_city"] ); unset( $fields["billing_state"] ); unset( $fields["billing_postcode"] ); unset( $fields["billing_phone"] ); return $fields; } add_filter( 'woocommerce_billing_fields', 'kia_filter_billing_fields' ); |
Yes this could go in functions.php but that kind of locks you into a specific theme. If this is a permanent change then you probably want to create a site-specific plugin and put it in the wp-content/mu-plugins/ folder.
Add a Custom Checkout Field
While I was fooling around I figured I would see if I could add a custom checkout field. Turns out this is a bit more complex, but ultimately do-able. The following code will add the field to the checkout page, save the data to order meta and display the order meta in the orders admin.
Update: After receiving multiple contacts about adding more than one field I have modified the sample code to add 2 fields.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 |
// Add a new checkout field function kia_filter_checkout_fields($fields){ $fields['extra_fields'] = array( 'some_field' => array( 'type' => 'text', 'required' => true, 'label' => __( 'Some field' ) ), 'another_field' => array( 'type' => 'select', 'options' => array( 'a' => __( 'apple' ), 'b' => __( 'bacon' ), 'c' => __( 'chocolate' ) ), 'required' => true, 'label' => __( 'Another field' ) ) ); return $fields; } add_filter( 'woocommerce_checkout_fields', 'kia_filter_checkout_fields' ); // display the extra field on the checkout form function kia_extra_checkout_fields(){ $checkout = WC()->checkout(); ?> <div class="extra-fields"> <h3><?php _e( 'Additional Fields' ); ?></h3> <?php // because of this foreach, everything added to the array in the previous function will display automagically foreach ( $checkout->checkout_fields['extra_fields'] as $key => $field ) : ?> <?php woocommerce_form_field( $key, $field, $checkout->get_value( $key ) ); ?> <?php endforeach; ?> </div> <?php } add_action( 'woocommerce_checkout_after_customer_details' ,'kia_extra_checkout_fields' ); |
Note: there is no foreach() in the rest of the function so we must save and display each field individually
Save the extra data on checkout
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
// save the extra field when checkout is processed function kia_save_extra_checkout_fields( $order, $data ){ // don't forget appropriate sanitization if you are using a different field type if( isset( $data['some_field'] ) ) { $order->update_meta_data( '_some_field', sanitize_text_field( $data['some_field'] ) ); } if( isset( $data['another_field'] ) && in_array( $data['another_field'], array( 'a', 'b', 'c' ) ) ) { $order->update_meta_data( '_another_field', $data['another_field'] ); } } add_action( 'woocommerce_checkout_create_order', 'kia_save_extra_checkout_fields', 10, 2 ); |
Display the extra data to users
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
// display the extra data on order recieved page and my-account order review function kia_display_order_data( $order_id ){ $order = wc_get_order( $order_id ); ?> <h2><?php _e( 'Additional Info' ); ?></h2> <table class="shop_table shop_table_responsive additional_info"> <tbody> <tr> <th><?php _e( 'Some Field:' ); ?></th> <td><?php echo $order->get_meta( '_some_field' ); ?></td> </tr> <tr> <th><?php _e( 'Another Field:' ); ?></th> <td><?php echo $order->get_meta( '_another_field' ); ?></td> </tr> </tbody> </table> <?php } add_action( 'woocommerce_thankyou', 'kia_display_order_data', 20 ); add_action( 'woocommerce_view_order', 'kia_display_order_data', 20 ); |
Display extra data in admin
|
1 2 3 4 5 6 7 8 9 10 11 |
// display the extra data in the order admin panel function kia_display_order_data_in_admin( $order ){ ?> <div class="order_data_column"> <h4><?php _e( 'Extra Details', 'woocommerce' ); ?></h4> <?php echo '<p><strong>' . __( 'Some field' ) . ':</strong>' . $order->get_meta( '_some_field' ) . '</p>'; echo '<p><strong>' . __( 'Another field' ) . ':</strong>' . $order->get_meta( '_another_field' ) . '</p>'; ?> </div> <?php } add_action( 'woocommerce_admin_order_data_after_order_details', 'kia_display_order_data_in_admin' ); |
Alternatively, display extra data as editable data (and save)
This should function like the shipping and billing address data and reveal inputs when the little pencil icon is clicked. Make sure to delete the previous function as two functions with the same name will cause a PHP error.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
// display the extra data in the order admin panel function kia_display_order_data_in_admin( $order ){ ?> <div class="order_data_column"> <h4><?php _e( 'Extra Details', 'woocommerce' ); ?><a href="#" class="edit_address"><?php _e( 'Edit', 'woocommerce' ); ?></a></h4> <div class="address"> <?php echo '<p><strong>' . __( 'Some field' ) . ':</strong>' . $order->get_meta( '_some_field' ) . '</p>'; echo '<p><strong>' . __( 'Another field' ) . ':</strong>' . $order->get_meta( '_another_field' ) . '</p>'; ?> </div> <div class="edit_address"> <?php woocommerce_wp_text_input( array( 'id' => '_some_field', 'label' => __( 'Some field' ), 'wrapper_class' => '_billing_company_field' ) ); ?> <?php woocommerce_wp_text_input( array( 'id' => '_another_field', 'label' => __( 'Another field' ), 'wrapper_class' => '_billing_company_field' ) ); ?> </div> </div> <?php } add_action( 'woocommerce_admin_order_data_after_order_details', 'kia_display_order_data_in_admin' ); function kia_save_extra_details( $order_id, $post ){ $order = wc_get_order( $order_id ); $order->update_meta_data( '_some_field', wc_clean( $_POST[ '_some_field' ] ) ); $order->update_meta_data( '_another_field', wc_clean( $_POST[ '_another_field' ] ) ); $order->save_meta_data(); } add_action( 'woocommerce_process_shop_order_meta', 'kia_save_extra_details', 45, 2 ); |
Add the field to order emails
The easiest way to add data to the emails is to add our meta to the list of meta that WooCommerce will print out automatically. For WooCommerce 2.3 and after, you will do it the following way:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
// WooCommerce 3.0+ function kia_email_order_meta_fields( $fields, $sent_to_admin, $order ) { $fields['some_field'] = array( 'label' => __( 'Some field' ), 'value' => $order->get_meta( '_some_field' ), ); $fields['another_field'] = array( 'label' => __( 'Another field' ), 'value' => $order->get_meta( '_another_field' ), ); return $fields; } add_filter( 'woocommerce_email_order_meta_fields', 'kia_email_order_meta_fields', 10, 3 ); |
If you’d rather customize the output in the emails you can add some text to any of the hooks available in the email templates.
|
1 2 3 4 5 6 7 8 9 10 11 12 |
function kia_display_email_order_meta( $order, $sent_to_admin, $plain_text ) { $some_field = $order->get_meta( '_some_field' ); $another_field = $order->get_meta( '_another_field' ); if( $plain_text ){ echo 'The value for some field is ' . $some_field . ' while the value of another field is ' . $another_field; } else { echo 'The value for <strong>some field</strong> is ' . $some_field. ' while the value of <strong>another field</strong> is ' . $another_field . '; } } add_action('woocommerce_email_customer_details', 'kia_display_email_order_meta', 30, 3 ); |
Hope that helps you. I think there are a few plugins out there now if this was too intimidating, so I would suggest using one of those.
The release of WordPress 3.9 saw the update of the included TinyMCE editor to version of 4.0 and this caused no small amount of havoc for people who’d been customizing the text editor. In the past, one was able to define one’s own custom styles and modify the block formats like so:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
function my_mce_buttons_2( $buttons ) { array_unshift( $buttons, 'styleselect' ); return $buttons; } add_filter('mce_buttons_2', 'my_mce_buttons_2'); function mce_mod( $init ) { $init['theme_advanced_blockformats'] = 'p,h3,h4'; $init['theme_advanced_styles'] = "Big Header=bigheaderclass; Red Header=redheaderclass"; return $init; } add_filter('tiny_mce_before_init', 'mce_mod'); |
You’re a Real Button Now
But surprise! With the update this doesn’t work any more. Digging into the TinyMCE scripts, the formats appear to now be a custom tinyMCE button. You can see that the formatselect button is added to mce_buttons_2; in the class-wp-editor.php;. And then I tracked that to tinymce.js :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
editor.addButton('formatselect', function() { var items = [], blocks = createFormats(editor.settings.block_formats || 'Paragraph=p;' + 'Address=address;' + 'Pre=pre;' + 'Heading 1=h1;' + 'Heading 2=h2;' + 'Heading 3=h3;' + 'Heading 4=h4;' + 'Heading 5=h5;' + 'Heading 6=h6' ); |
With that in mind, it appears that to modify the block formats, we’ll need to change the editor.settings.block_formats. And theme_advanced_syles; has now become style_formats; in the TinyMCE init object.
Putting it All Together
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
function mce_mod( $init ) { $init['block_formats'] = 'Paragraph=p;Heading 3=h3;Heading 4=h4'; $style_formats = array ( array( 'title' => 'Bold text', 'inline' => 'b' ), array( 'title' => 'Red text', 'inline' => 'span', 'styles' => array( 'color' => '#ff0000' ) ), array( 'title' => 'Red header', 'block' => 'h1', 'styles' => array( 'color' => '#ff0000' ) ), array( 'title' => 'Example 1', 'inline' => 'span', 'classes' => 'example1' ), array( 'title' => 'Example 2', 'inline' => 'span', 'classes' => 'example2' ) ); $init['style_formats'] = json_encode( $style_formats ); $init['style_formats_merge'] = false; return $init; } add_filter('tiny_mce_before_init', 'mce_mod'); function mce_add_buttons( $buttons ){ array_splice( $buttons, 1, 0, 'styleselect' ); return $buttons; } add_filter( 'mce_buttons_2', 'mce_add_buttons' ); |
Small caveat: I’m not sure where to add the styles for the drop-down items themselves. In the TinyMCE sample, the “Red Headline“ option is red. I couldn’t figure this out. If you do please let me know in the comments!
In the summer of 2012, I was visiting one of my best friends in New Orleans… cooking lots of tacos and mixing lots of margaritas. While there, one of my earliest clients contacted me and wanted to be able to sell his books for whatever the customer was willing to pay. Did I know a way to do that with WooCommerce he asked? Well no, but I’m only working on my taco recipes at the moment so maybe I can look into it?
I started to poke around and ask some questions at Github and someone else contacted me to tell me that he’d buy this right away if it existed. I took these two people as the least-scientific version of “Idea Validation” imaginable and decided to give this thing a whirl.
About a month later I had a working prototype up and for sale at WooThemes. It only worked on simple products and then with a little more effort on subscriptions. I was pretty content to leave it at that, but one request kept coming back… can this work with variable products?
For a long time the answer was no, or maybe, or I’m working on it, but mostly no. You see, I’m also a semi-professional athlete so I am not a full-time coder… and variable products are complicated! But after an extremely long “beta” process I am pumped to announce that Name Your Price 2.0 now supports variable products! You can pick and choose which variations will be Name Your Price enabled, so you can all customers to set a price on all a product’s variations or just one. This feature does require WooCommerce 2.1 or greater. Version 2.0 was a pretty major overhaul, so be careful if you were overriding any templates. There’s some documentation coming on that.
Finally, Name Your Price for variable products
So if this was holding you back from purchasing Name Your Price, head over to Woothemes and pick up your copy!
Important: Support requests are not handled in the comments and must go through WooThemes.
This plugin has been out in the wild for some time now and it seemed appropriate to give it a post on my blog. Once upon a time I was working on a magazine site with a lot of authors and my client wanted to display all the authors in a cool way. Every other plugin I found was too rigid in its output, either markup or CSS or both. I needed to be able to customize and style this list to fit my theme. And while the original site I working on is now defunct, Simple User Listing lives on.
Basic Usage
Once you’ve installed and activated the plugin you only have to add the shortcode to any page (or post) where you’d like to display a full list of all your blog’s users. By default the plugin will display all of the blog’s users and ‘paginate’ the list based on the “Posts per Page” setting.
[userlist]
A directory list of users ready for your own custom styles
Custom Templates
I created this plugin to use templates that can be overridden and customized by theme developers. There are 4 templates in the plugin’s templates folder: content-author.php, navigation-author.php, none-author.php and search-author.php. The templates should be relatively self-explanatory and I suspect most of the customizations will happen in content-author.php which is responsible for how each user in the user loop is displayed.
To modify a template simply copy the template file from the simple-user-listing/templates folder of the plugin and paste it into a simple-user-listing folder in the root of your theme (so my-theme/simple-user-listing). Now you can change the markup any way you please and the plugin will know to use your template instead of the default.
It will be similar to template parts for post loops, except you will have access to each user’s $user object instead of the $post object. For more details on what is available in the $user object see the Codex reference on WP_User()
Custom Lists
Simple User Listing relies on the WP_Query class and supports almost all of WP_Query’s parameters. Here’s a full list of all parameters:
'query_id' => 'simple_user_listing',
'role' => '',
'include' => '',
'exclude' => '',
'blog_id' => '',
'number' => get_option( 'posts_per_page', 10 ),
'order' => 'ASC',
'orderby' => 'login',
'meta_key' => '',
'meta_value' => '',
'meta_compare' => '=',
'meta_type' => 'CHAR',
'count_total' => true
To use any WP_Query parameter merely add it to the shortcode. For example:
List of Authors
[userlist role="author"]
List of Specific Users
[userlist include="1,2,3,4"]
Order Users by Last Name
As of version 1.5.2 meta query parameters were rolled into the core of the plugin…. well single meta queries anyway. You can sort by any any meta key (much like querying posts).
[userlist meta_key="last_name" orderby="meta_value" order="ASC"]
WP-Pagenavi Bonus
Simple User Listings works with WP-Pagenavi out of the box. Simply activate WP-Pagenavi and your user lists will be paginated with numbers instead of the default previous/next links.
Search by Display Name
By default the search relies on username, but we can change this with some trickery via the pre_user_query hook. Similar to pre_get_posts this is your last chance to change the WP_User_Query query before it is executed. I’ve built in a query_id variable so that you don’t go willy-nilly filtering all user queries which could have some unintended side effects.
|
1 2 3 4 5 6 7 8 9 10 |
// Switch user search from user_login to display_name via query_where function kia_search_users_by_display_name( $query ) { if ( isset( $query->query_vars['query_id'] ) && $query->query_vars['query_id'] == 'simple_user_listing' ) { $query->query_where = str_replace( "user_login", "display_name", $query->query_where ); } } add_action( 'pre_user_query', 'kia_search_users_by_display_name' ); |
Search by User Meta
And finally, I’ll try to walk you through setting up a custom search.
First we’ll create a new search-author.php template in our theme’s simple-user-listing folder. This template will have a pair of radio buttons that will allow the user to decide between traditional search and searching by a meta field…. in this case “city”, but it really could be whatever you want.
You don’t have to change your search template, but I thought it might be nice.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 |
<?php /** * The Template for displaying Author Search */ if ( ! defined( 'ABSPATH' ) ) exit; // Exit if accessed directly $search = get_query_var( 'as' ) ? get_query_var( 'as' ) : ''; $method = get_query_var( 'method' ); $method = $method && in_array( $method, array( 'default', 'city' ) ? $method : 'default'; ?> <div class="author-search"> <h2><?php _e('Search authors by user name or by city');?></h2> <form method="get" id="sul-searchform" action="<?php the_permalink(); ?>"> <label for="as" class="assistive-text"><?php _e( 'Search' ); ?></label></p> <p><input type="radio" name="method" value="default" <?php checked( $method, 'default' ); ?> /> <?php _e( 'By Username' );?></p> <p><input type="radio" name="method" value="city" <?php checked( $method, 'city' );?> /> <?php _e( 'By City' );?></p> <p><input type="text" class="field" name="as" id="sul-s" placeholder="<?php _e('Search Authors');?>" value="<?php echo $search;?>" /></p> <p><input type="submit" class="submit" id="sul-searchsubmit" value="<?php _e('Search Authors');?>" /?></p> </form?>; <?php if( $search ){ ?> <h2><?php printf( __('Search Results for: %s'), '<em>;' . $search .'</em>;' );?></h2>; <a href="<?php the_permalink();"?>;<?php _e('Back To Author Listing');?></a?>; <?php } <?php </div><!-- .author-search --> |
Next we’ll register a query variable. This belongs in your theme’s functions.php or better still a site-specific mu-plugin, so that it isn’t tied to you theme. Remember that themes are for presentation. Plugins are for manipulating data in ways that should persist through theme changes.
Technically if you don’t change the search template you don’t need to do this either, but I’m going whole-hog here. Did someone say Bacon?
|
1 2 3 4 5 6 7 |
// register an additional SUL search variable function kia_search_users_allowed_vars( $vars ) { $vars[] = 'method'; return $vars; } add_filter( 'sul_user_allowed_search_vars', 'kia_search_users_allowed_vars' ); |
And finally, we need to adjust the Simple User Listing args before they are sent to WP_Query.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
// Switch the WP_User_Query args to a meta search if "by company" is selected function function kia_meta_search( $args ){ $method = ( get_query_var( 'method' ) == 'company' ) ? 'company' : 'name'; $search = ( isset( $_GET['as'] ) ) ? sanitize_text_field( $_GET['as'] ) : false; // if set to search by company switch to a meta query if ( $search && $method == 'company' ){ $args['search'] = ''; //kill default search $args['query_id'] = 'simple_user_listing_meta'; $args['meta_key'] = 'company_name'; $args['meta_value'] = $search; $args['meta_compare'] = 'LIKE'; } return $args; } add_filter('sul_user_query_args', 'kia_meta_search'); |
Support
That should do it. This plugin isn’t in particularly ‘active’ development. Essentially meaning that I’m not looking to add features. However, if it breaks somewhere do let me know.
I apologize in advance but I can’t help you with your custom implementations via the comments or WordPress support forums. I am open to contract work though. Please contact me if you’d like to hire me.
Let me know where you are using my plugin. I’d love to see how you are styling it!
I found I constantly needed a way for clients to mark a post as something they wanted to feature and I’ve never found sticky posts particularly intuitive. In fact, the sticky post UI is about the least obvious thing possible for a WordPress newbie. The simplest solution was a checkbox in prominently located metabox.
View of the metabox in the post edit screen.
So I packaged up a quick metabox, with some good quick edit support. The plugin, by itself, will not change how the posts are displayed. It just gives the UI to users and a meta key to theme developers to query for, though I am not 100% convinced that meta is the best way to go here. I have at times used a taxonomy for grouping featured posts, though this plugin is currently configured for post meta.
Simply click on the star to “feature” a post
You can decide which post types should support this metabox directly from the plugin options. But of course, the best part of this plugin is that shortly after submitting it to the WordPress repo, I realized someone else had already built something practically identical! #Doh! Sometimes that happens, but it was a good exercise nonetheless. If you need a way to mark posts as featured, then grab it from the repo: