How to add subscriptions to existing WooCommerce products?

WooCommerce
How to add subscriptions to existing WooCommerce products?

How to add subscription plans to your existing products on WooCommerce?

How can I set this up so customers can purchase the product one-time as well as see the options to subscribe every month, every 2 months, or every 3 months? All on one product page?

In this guide, you will learn best practices for setting up the All Products for WooCommerce Subscriptions extension on your WooCommerce site.

For example, I have a WooCommerce store that sells 100% all-natural bar soaps. Currently, my customers have the option of purchasing one bar soap for $10. How can I provide an option for them to subscribe and have their bar soap shipped every month, every 2 months, or every 3 months?

Let’s begin!

Setup All Products for WooCommerce Subscriptions

  1. Download and activate WooCommerce Subscriptions and All Products for WooCommerce Subscriptions plugins
  2. Add subscription to existing products
  3. Make sure payment methods work and do a test checkout

If helpful, I also created a video that goes through this process.

Step 1. Download and activate WooCommerce subscription plugins

The first step is to purchase, download and activate the following plugins on your WooCommerce store:

Yes, I know these are paid plugins but will save a lot of time and ensure that your subscriptions are setup and working correctly.

Before going to Step 2, make sure both plugins are not only installed but also activated.

Step 2. Copy/paste this code snippet below and override the product-subscription-options.php template file

To get this functionality, you will need to rewrite file product-subscription-options.php (see the below code snippet).

  1. First, go to your active WordPress theme via FTP or SSH.
  2. Next, create a woocommerce folder inside your active WordPress theme if you have not already. This will allow you to override WooCommerce files.
  3. Then, inside the /woocommerce/ folder, create another folder called single-product.
  4. Next, create a file inside your /woocommerce/single-product/ folder product-subscription-options.php.
  5. Copy the code snippet below and paste into product-subscription-options.php and Save your file.

The file path will be [your-active theme]/woocommerce/single-product/product-subscription-options.php.

<style>
.page.product .purchase-options{
	margin-bottom: 20px;
	max-width: 480px;
}

.page.product .purchase-options li{
	min-height: 60px;
	margin-bottom: 0;
	padding: 10px;

	-webkit-align-items: center;
	align-items: center;

	display: -webkit-flex;
	display: flex;
}

.page.product .purchase-options li.selected{
	background-color: #edebe6;
}

.page.product .purchase-options li::before{
	display: none;
}

.page.product .purchase-options label{
	-webkit-tap-highlight-color: transparent;
	cursor: pointer;

	font-family: 'Proxima Nova Lt';
	font-weight: 600;
	color: #322c2c;
}

.page.product .purchase-options select{
	margin-left: 15px;
	padding: 4px 8px;
	height: 40px;
}

.page.product .purchase-options .help-icon{
	margin-left: 15px;
}

.page.product .wcsatt-options-product{
	display: none;
}

@media only screen and (max-width: 767px){

	.page.product .purchase-options{
		margin-bottom: 18px;
	}

	.page.product .purchase-options li{
		min-height: 56px;
		padding: 9px;
	}

	.page.product .purchase-options select{
		padding: 3px 7px;
		height: 38px;
	}

}

@media only screen and (max-width: 479px){

	.page.product .purchase-options{
		margin-bottom: 16px;
	}

	.page.product .purchase-options li{
		min-height: 52px;
		padding: 8px;
	}

	.page.product .purchase-options select{
		padding: 2px 6px;
		height: 36px;
	}

}
</style>

<script>
    (function($){
        $(document).ready(function(){
   			// purchase options
			$('.purchase-options input').change(function(){

				if ($(this).val() == 'one-time') updatePurchaseOptions(0);
				else updatePurchaseOptions($('.purchase-options select').val());

				$(this).closest('li').addClass('selected')
					.siblings().removeClass('selected');

			});

			$('.purchase-options select').change(function(){
				$('.purchase-options input[value="subscription"]').prop('checked', true).change();
			});

			function updatePurchaseOptions(v){
				$('.wcsatt-options-product input[value="'+ v +'"]').prop('checked', true).change();
			}
        });
    });
</script>

<?php

// exit if accessed directly
if (!defined('ABSPATH')) exit;

$subscription_options = $hidden_options = array();

$tip_text = sprintf(__('We’ll ship your favorite %s products based on the schedule that you select. This way, you will never run out. You can change the schedule, pause, or cancel anytime.', 'bdl'), get_company_name());

foreach ($options as $option) {
	// visible controls
	if ($option['value'] == 0) {

		$one_time_option = "<li". ($option['selected'] ? " class='selected'" : "") .">".
			"<input type='radio' id='one-time-purchase' name='purchase-options' value='one-time'". ($option['selected'] ? " checked" : "") ." />".
			"<label for='one-time-purchase'>". __('One-Time Purchase', 'bdl') ."</label></li>\n";

	} else {

		if ($option['selected'])
			$selected_subscription_option = $option['selected'];

		$subscription_options[] = "<option value='". $option['value'] ."'". ($option['selected'] ? " selected" : "") .">".
			sprintf('%d %s', $option['data']['subscription_scheme']['interval'], ucfirst($option['data']['subscription_scheme']['period'])) ."</option>\n";
	}

	// hidden controls
	$hidden_options[] = sprintf('<li class="%1$s"><label><input type="radio" name="convert_to_sub_%2$d" data-custom_data="%3$s" value="%4$s" %5$s autocomplete="off" />'.
		'<span class="%1$s-details">%6$s</span></label></li>',
			esc_attr($option['class']),
			absint($product_id),
			esc_attr(json_encode($option['data'])),
			esc_attr($option['value']),
			checked($option['selected'], true, false),
			$option['description']
	);
}

echo
"<ul class='purchase-options'>\n".

	(isset($one_time_option) ? $one_time_option : "").

	($subscription_options ? "<li". (isset($selected_subscription_option) ? " class='selected'" : "") .">".
		"<input type='radio' id='subscriptions-list' name='purchase-options' value='subscription'". (isset($selected_subscription_option) ? " checked" : "") ." />\n".
		"<label for='subscriptions-list'>". ($prompt ? strip_tags($prompt) : __('Choose a subscription plan:', 'bdl')) ."</label>\n".
		"<select name='subscription-options'>". implode('', $subscription_options) ."</select>\n" : "").
		get_help_icon($tip_text) ."</li>\n".

"</ul>\n".

"<div class='wcsatt-options-wrapper'". (count($options) == 1 ? " style='display: none;'" : '') .">\n".

	"<ul class='wcsatt-options-product'>\n".
		implode('', $hidden_options).
	"</ul>\n".

"</div>\n";

Step 3. Add subscription to existing product

Next, on your WooCommerce dashboard, navigate to Products and choose a product you want to offer a subscription.

Edit the product, scroll down to the Product Data section, and click the “Subscriptions” tab.

woocommerce-subscriptions-tab-edit-product

Then, click “Add Plan” to add your subscription plans.

woocommerce-subscriptions-add-plan-to-existing-product

For example, in my store, I want to offer a subscription on a product with the following intervals:

  • Every month
  • Every two months
  • Every three months

Because subscriptions mean more recurring revenue, I’m going to offer my customers 10% off if they choose a subscription. See the screenshot below for how my setup looks like:

woocommerce-subscriptions-add-to-existing-product-simple

Finally, I’m going to click “Save” and view my product on my store.

When I navigate to my product page, I see the one-time option as well as the subscription options.

woo-subscriptions-one-time-subscription-options-product-page

Congrats! You have setup a subscription for an existing product.

Step 4. Check payment methods and do test checkout

First, navigate to WooCommerce > Settings and click the “Payments” tab.

Next, look at the Automatic Recurring Payments column. Does your current payment methods support subscriptions?

woo-subscriptions-payments-automatic-recurring-payments

If you are using Stripe, it automatically supports subscriptions.

Then, go back to your shop and go to a product page where you are offering a subscription.

Choose a subscription option you have setup and go through the Checkout process and complete a test order.

Did everything come through correctly?

Finally, navigate back to the backend of your WooCommerce store and click “Orders”.

Because this was the first subscription order you created, you should see the parent order icon.

Reference the screenshot below for the difference between the parent order icons and the renewal order icons.

woocommerce-subscriptions-order-icons

Summary

So there you have it. That’s how you apply subscriptions to existing products on your WooCommerce store.

After setting up subscriptions on your store, let your customers know that you now offer subscriptions. Not only is this a good excuse to send a marketing email but a lot of your customers will be thrilled to know they do not have to worry about running low or out of your product!

If you would like to reference how the subscriptions are setup on a store, take a look at the sample product I setup here: Sample product

Pro tip: before publishing this live on your store, ensure you have gone through the “Subscriptions” tab in the WooCommerce Settings.

Frequently Asked Questions

Isn’t this possible with variable product subscription inside basic WooCommerce Subscriptions?

If you setup a variable product subscription all you can do is set variants for a specific billing period (i.e. every month, every 2 months, every 3 months). There is no option to offer a one-time purchase without making a new product and making the customer go to 2 different product pages. The All Products for WooCommerce Subscriptions extension allows you to make any simple/variable product available as one-time purchase and subscription, without changing the way your manage inventory. In addition, easily offer discounts as an extra incentive for subscribing, rather than using coupon plugins that may not always work well.

Comments

  1. Ollie August 15, 2019 | 1:04 am

    Hi – I left a comment on your youtube channel asking how to have a drop down box to select frequency of shipping and a hover Tooltip for information. Can you please send me instructions on how to do this? It would be greatly appreciated! Regards, Ollie

  2. Ollie September 3, 2019 | 9:16 pm

    Hi There,

    Is it possible for you to please provide me with the appropriate code to install the dropdown option on the subscription frequency, as shown in your youtube video?

    Regards, Ollie

    • Simon Gondeck September 16, 2019 | 12:21 pm

      Hi Ollie, I posted the code snippet in the blog post. You will need to paste this into your active WordPress theme with the file path: [active theme]/woocommerce/single-product/product-subscription-options.php. Thanks!

  3. MIke September 18, 2019 | 10:32 am

    Hey Ollie, will your solution work for this scenario?
    I have a product with 3 different quantities (30pack, 60pack, 90pack).
    I’d like to offer a one time purchase for each as well as 2 subscription options for the 60 and 90 pack (every month, every 2 months)
    is this possible with your code above?

    Mike

  4. Enamul Haque October 17, 2019 | 12:52 pm

    Hi I have followed your instruction and but it is showing an error. could you please check it. note:

    : Uncaught Error: Call to undefined function get_company_name() in /woocommerce/single-product/product-subscription-options.php:119
    Stack trace:
    #0 plugins/woocommerce/includes/wc-core-functions.php(249): include()
    #1 plugins/woocommerce-subscribe-all-the-things/includes/display/class-wcs-att-display-product.php(166): wc_get_template(‘single-product/…’, Array, false, ‘/home/customer/…’)
    #2 wp-content/plugins/woocommerce-subscribe-all-the-things/includes/display/class-wcs-att-display-product.php(249): WCS_ATT_Display_Product::get_subscription_options_content(Object(WC_Product_Simple))
    #3 wp-includes/class-wp-hook.php(286): WCS_ATT_Display_Product::show_subscription_options(”)
    #4 /home/customer/www/divinohair in

  5. Dale October 28, 2019 | 5:52 pm

    Hey Simon, thanks for the guide on this. I’ve been trying to accomplish having monthly subscription and one off orders on single product pages without any luck.

    I have tried using your code snippet on my child theme but I am receiving this error:

    “The site is experiencing technical difficult”

    ——–

    Would love to get some feedback, maybe the code works for a certain version of the plugins?

  6. Ryan November 4, 2019 | 10:04 pm

    Hi Ollie and Simon,

    Copying the code via ftp just as you said actually just causes an error and the page does not display at all. Is this dependent on what them or product template builder (elementor) is installed? I’d really like to implement this!

    Thank you

  7. Rocky November 5, 2019 | 6:58 pm

    Hi simon,
    After add that code in my child theme in this folder http://prntscr.com/pszvgo
    I got error http://prntscr.com/pszv6z
    could you please help?

Leave a reply

Your email address will not be published. Required fields are marked*