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'); ?>
