Wibble and WooCommerce

Firstly, what is WooCommerce? Basically, it is an out-of-the-box e-commerce solution that will work on almost every WordPress site, with ease. It is exceptionally popular and Wibble are proud to call ourselves e-commerce experts in its design, development and management. We have created 1000s of bespoke websites, functions and features in WooCommerce and they have been used by our clients to turnover millions of pounds in their stores. Our portfolio demonstrates some of the e-commerce websites that we have designed, developed and hosted.

The WordPress bulk editor

Bulk editing in WordPress is actually a very handy and easy tool to add to one’s repertoire. Things get even better when it comes to doing this with WooCommerce products, as WooCommerce gives the ability to edit nearly every aspect of the product from the quick editor.

WooCommerce default Bulk Edit Options
Default WooCommerce Bulk Edit

The Scenario

What if you want to have the ability to bulk edit custom WooCommerce options? I’ll give you a scenario, you have an online store with hundreds to thousands of products. You recently added a new custom option to apply a product offer using an ACF select field. I won’t go into detail about the ACF plugin as it is a very well known and used plugin in most WordPress sites today (check out our blog on Creating Gutenberg Blocks with ACF).

WooCommerce Custom Options

You have now set up your product offer options but there is one issue. As already established, your site holds hundreds of products and going in and editing the products individually could take hours or even days. By default, custom ACF fields are not added to the quick edit option of a WooCommerce website. Now that we have established a use case for custom bulk edit options, please follow below to see how I implemented these options into the WooCommerce bulk edit options.

The implementation

The following code snippets should be added to your functions.php file, however, if you are using a bought WordPress theme, you will need to set up a child theme and add the code here, we strongly discourage adding any custom code to paid themes as you will lose everything if the theme updates.

Wibble Custom Bulk Edit Function

The above code uses the WooCommerce_product_bulk_edit_start action to run our custom function. The custom function uses minimal HTML to inline our new option, with the use of the Select tag we are pulling in our ACF select options. Now to dynamically pull in these values we first need to pull in the choices from the ACF field. We use the function get_field_object() to do this (more documentation on this can be found on the ACF site). Another thing we must get is the ACF field key, in order to use the get_field_object() function we must acquire this key (this is because we are pulling in the data of the ACF field and not what the user has selected).

Get the ACF Field Code Function

The above code queries the database to find the ACF field key from whatever value the user passes it in the $field_name, in our case we called the function like so get_acf_key(‘offer’). This returns the field key for the ACF field “Offer” (bear in mind this can cause issues if you have more than one ACF field with the same name). Once the field key has been found, I used a foreach to display each offer in the form of an HTML option tag. If you now go to the bulk edit options, you will now see your custom option at the top.

WooCommerce Custom Bulk Edit Options

We aren’t done yet however, we need to add a function that will save whatever value we select in the bulk editor to each product. In order to do this, I added the following snippet of code.

Wibble Custom Bulk Edit Save Function

Using the action WooCommerce_product_bulk_edit_save, I run a function that checks if a request has been made for ‘offer’ (you would add in your ACF field name here instead) and if so it updates the post meta for each product with your selected value. Now if we check any of the products we have bulk edited, they should now be displaying the new value for Product Offer.

WooCommerce Custom Bulk Edit Complete
Voila!

Further Development

Now, this is only scratching the surface of what you can potentially do in the WooCommerce bulk editor, and the code supplied is catered for a very specific example. With the right code but using the same WooCommerce actions you could potentially even add in a media uploader to the bulk edit settings.

On a completely different side note, but one of equal importance. From all of us here at Wibble, please stay safe during these difficult times. Feel free to have a read of this post from our MD about how we are conducting business during these times.