I’ve recently been working on a new product offering for my job at Agent Evolution. The product is for SEM management, where we will help manage SEM efforts for our clients and charge a monthly management fee using WooCommerce Subscriptions. We needed to be able let the customer define what their monthly ad budget would be and auto select a subscription variation based on that number. I learned quite a few things in the process so I wanted to document how this was accomplished.
Our store uses WooCommerce, so in discovery of what would be needed to offer this, here are the basic requirements:
- Add a product as a variable subscription, where the subscription variation changes based on a custom user input on the product page.
- Add a custom user input on the product page where the customer could define their monthly ad budget.
- Add this user input value as custom meta data to the SEM product line item, carrying it over to the cart and checkout.
- Create a new order fee line item with this custom user input value.
What we’re creating
A custom user input, which uses a jQuery UI slider, for a customer to choose an arbitrary amount they want to budget per month for SEM ad spend. The amount they enter will determine the WooCommerce Subscription variation they need to purchase and automatically select it for them.
The code provided here is a simplified version of what was actually implemented.
Adding custom user input slider to WooCommerce product page
This part is fairly straightforward and achieved with the
woocommerce_before_add_to_cart_button product template hook. In this example, I use
woocommerce_form_field() to output a text field, but for more styling and control over the appearance in production I chose to write my own form field.
I also needed to add a message if the value was over a certain number which was added using
To turn the input into a slider I opted to use jQuery UI Slider, since it’s in WP core, and coupled that with jQuery UI Slider Pips for a better UI.
Select WooCommerce product variation based on slider input
Add WooCommerce product user input as meta data to cart and checkout
Here is where it started to go into uncharted territory for me. Basically once the user has selected their budget, which auto-selects the product variation they need to purchase, and added it to the cart, we need to capture that value and carry it over into the cart and checkout.
In the first function we use the
woocommerce_add_cart_item_data filter to grab our custom value from the POST and add it to the cart item data.
Next, we get the session data and add our custom value to the session using the
Then, to display our custom value as meta data in the cart, we use the
Add order fee line item from cart meta value
Lastly, on checkout, we want to add a fee line item to the order with the budget value from the cart. This is done by hooking into
Here, we first add the value as meta data to the primary product on the order. Then we create a new fee line item with the same value. Here in our example, because we don’t want to charge them for their budget when they order (the actual amount spent per month will be added to the subscription later) the total is set to $0.
Wrapping it up
In summary, we’ve added a custom user slider input which auto-selects a WooCommerce subscription variation based on the value. That value is then added to the cart session data as item meta data and added to checkout. Finally, that value is added as a new line item on the order.
Note: All of the above code was pulled from the production code which is all in a class, so a copy/paste of any of it may not work without some customization.