Website Building » WooCommerce » How to Configure Extra Custom Product Options for WooCommerce?

How to Configure Extra Custom Product Options for WooCommerce?

Last updated on January 23, 2023 @ 11:21 am

If you want to add extra product options in WooCommerce, you’ll need to use a plugin. There are many plugins available that will allow you to add custom fields to your products, and they vary in terms of price and features. For this tutorial, we’ll be using the Advanced Custom Fields (ACF) plugin.

Once you’ve installed and activated the ACF plugin, head to Custom Fields > Add New in your WordPress dashboard. From here, you’ll need to create a new field group and add the fields that you want to appear on your product pages. In our example, we’re going to add a text field for a product’s SKU and a select field for choosing the product’s color.

Once you’ve created your fields, scroll down and click on the ‘Location’ rule. Here, you’ll need to select ‘Product’ from the ‘Show this field group if’ dropdown. This will ensure that your custom fields only appear on product pages.

Finally, click on the ‘Publish’ button to save your changes.

Your custom fields will now appear on the product page in the backend of WordPress. Now let’s take a look at how to output these fields on the frontend of your site.

In your theme’s functions.php file, you’ll need to add the following code:

function my_acf_add_to_cart_item( $cart_item ) {if( isset( $cart_item['acf'] ) ) {$cart_item['data']->set_sku( $cart_item['acf']['sku'] );}
return $cart_item;}
add_filter( 'woocommerce_add_cart_item', 'my_acf_add_to_cart_item', 10, 1 );
function my_acf_get_price( $price, $product ) 


{if( isset( $product->sku ) && ! empty( $product->sku ) ) 
{return get_post_meta( $product->id, 'sku', true );
return $price;} 
add_filter( 'woocommerce_get_price', 'my_acf_get_price', 10, 2 );
function myacfwooextras() 
{?><p class="form-row form-row-wide"><label for="pa__color">Color</label> <select class="select" name="pa__color" id="pa__color"> <option value="">Select..</option> <option value="red">Red</option> <option value="blue">Blue</option> <option value="green">Green</option> </select>   </p>  <?php } add_action('WooCommerce extras','myacfwooextras');  ?>
PRO TIP: This note is to warn you that the 'How to Configure Extra Custom Product Options for WooCommerce?' article may not be up to date, and may not work with the latest version of WooCommerce.
Drew Clemente

Drew Clemente

Devops & Sysadmin engineer. I basically build infrastructure online.