WooCommerce Extra Options With Custom Price

Are you searching for the best way to update the product price automatically when a customer selects an extra option? In today’s tutorial, we will show you how to update the product price programmatically in WooCommerce. This means that we will not be using any plugin or installing an extra tool.

Table of Contents

It is important to note that you can include many extra options for products in your store. For example, you may want to charge a fee for extra packaging in your store. This is a great way to improve the customer shopping experience.

WooCommerce Extra Options With Custom Price

Yes, many plugins provide you with this functionality. However, it is worth mentioning that too many plugins can bloat your site. As a result, your website loading speed is negatively affected. This is why we made custom code snippets to help you solve this problem.

Keep in mind that we will be using several WooCommerce hooks. This means that you need to have some coding skills to implement this solution. However, we will try to explain each step in detail to help you out.

Before we proceed, it is worth mentioning that we will be making some modifications to some of the core files. Therefore, we recommend installing a child theme on your site. You can also create one. This will ensure that your changes are not lost during an update.

We will have a look at one example and apply some logic to update the price. The main aim of this tutorial is to help you understand the logic. If you understand it well, you can customize the scripts and apply them to your store.

Let us get right into it.

How To Update The Product Price Programmatically When a Checkbox is Selected in WooCommerce

In this section, we will add a checkbox input. This way, we can apply custom logic to update the price when the checkbox is selected.

Here are the simple steps you need to follow:

Log into your WordPress site and access the Dashboard as the admin user.
From the Dashboard menu, click on Appearance Menu > Theme Editor Menu. When the Theme Editor page is opened, look for the theme functions file to add the function to add the checkbox input field to the products page.
Add the following code to the php file:

[php] add_action(‘woocommerce_after_add_to_cart_button’, ‘njengah_check_box_to_product_page’, 30 );
function njengah_check_box_to_product_page(){ ?>
<div style="margin-top:20px">
<label for="extra_pack"> <?php _e( ‘Extra packaging’, ‘njengah’ ); ?>
<input type="checkbox" name="extra_pack" value="extra_pack">
</label>
</div>
<?php
}

[/php]

This is the outcome:
After that, we need to update the price when the user adds a product to the cart with the extra packaging option. Add the following code:

[php] add_filter( ‘woocommerce_add_cart_item_data’, ‘njengah_cart_item_data’, 10, 3 );
function njengah_cart_item_data( $cart_item_data, $product_id, $variation_id ) {
// get product id & price
$product = wc_get_product( $product_id );
$price = $product->get_price();
// extra pack checkbox
if( ! empty( $_POST[‘extra_pack’] ) ) {
$cart_item_data[‘new_price’] = $price + 20;
}
return $cart_item_data;
}
[/php]

The next step is to recalculate the total price of the cart. This will help to avoid undesired results such as prices being updated multiple times or every time a user adds a product. Add the following code:

[php] add_action( ‘woocommerce_before_calculate_totals’, ‘njengah_calculate_totals’, 10, 1 );
function njengah_calculate_totals( $cart_obj ) {
if ( is_admin() && ! defined( ‘DOING_AJAX’ ) ) {
return;
}
// Iterate through each cart item
foreach( $cart_obj->get_cart() as $key=>$value ) {
if( isset( $value[‘new_price’] ) ) {
$price = $value[‘new_price’];
$value[‘data’]->set_price( ( $price ) );
}
}
}
[/php]

This is the outcome if you only update the price when a product matches our conditional logic (that the user selects the extra packaging checkbox):

Wrapping Up

In summary, we have shared a solution to update the price when the user selects the extra packaging checkbox. If all the conditions are met, the function will automatically add an extra $20 to the original price.

To avoid cart abandonment, we recommend displaying the price to customers before they select the extra option.

We hope that this post helped you solve the problem.

Editorial Staff

How to Add Extra Options With Custom Price WooCommerce

WooCommerce Extra Options With Custom Price

How To Update The Product Price Programmatically When a Checkbox is Selected in WooCommerce

Wrapping Up

Similar Articles

Related