Rearrange Product Add-ons & Product Variation Selectors

Please consider leaving a donation if you appreciate this information. Lightning network now available

- +

Donate Bitcoin

You have a variable product and that product also has Product Add-ons – but you want to change the display order, i.e. the add-ons should be presented to the viewer above the product variations. How can this be done? Template overrides is one answer.

Here is the default output – the product variations come first, followed by the product add-ons input.

This is the default

To change this, you can use a template override. There’s some documentation about how that works here: Template Structure + overriding templates via a theme.

In this case the default template that will be modified is called variable.php and can be found in wp-content/plugins/woocommerce/templates/single-product/add-to-cart/ The path to override this template would be wp-content/themes/YOUR-THEME/woocommerce/single-product/add-to-cart Your theme may already be overriding that file, so be cautious here, if there already is an override in place don’t overwrite it and take care when editing it. I can’t possibly know all of the different customizations that may have been done to that file. The edits I am going to list are applicable to the default template, you may need to adjust to fit the customizations already in place.

Product add-ons hooks into the WooCommerce provided action named woocommerce_before_add_to_cart_button so the first thing that needs to be done is to unhook that. This can get a bit tricky since Product Add-ons uses a callback function within a class context. Fortunately, however, Product Add-ons also provides a way to access the class object via putting the object in the $GLOBALS array with a key of Product_Addon_Display. So to unhook it, the code would look like this: remove_action( ‘woocommerce_before_add_to_cart_button’, array( $GLOBALS[‘Product_Addon_Display’], ‘display’ ), 10 ); This code would go on line 13 of the default variable.php (template version 2.1.0). Once it’s unhooked, now you can output the Product Add-ons within the add to cart form, but before the dropdowns for the product variables. Once you’ve added the above code to line 13, you will see a conditional statement on line 19 – on a new line immediately after that, place this code to display the add-ons at the top of the add-to-cart form: <?php $GLOBALS[‘Product_Addon_Display’]->display(); ?>

With that, the add-ons and variation dropdown have switched places:

If you would like to download the template file, Register or Login

Please consider leaving a donation if you appreciate this information. Lightning network now available

- +

Donate Bitcoin