Change the WooCommerce variations layout to rotate things 90 degrees with labels on one row and variation drop downs on another.
When customising WooCommerce I recommend using actions and hooks as much as possible. If that isn’t sufficient, only then should you modify the template files.
On a recent project the client asked to change the layout of the variations, with the labels on one row and the variation drop downs below them. Unfortunately the code for these elements are in templates/single-product/add-to-cart/variable.php.
Minimal Modifications
Even when modifying a template file is required, I try to modify it as little as possible to make future maintenance easier. So, when I made the layout change commented out html elements that I didn’t need, though still leaving them in the template to help when the template needs to be updated in the future.
I also wanted to use as much of the existing code as possible so I use ob_start(), ob_get_contents() and ob_end_clean() to allow the html be created and captured before being displayed in a different order. I also included the code for a popup size chart for the ‘Size’ attribute.
For the item quantity field I copied its code from templates/single-product/add-to-cart/variation-add-to-cart-button.php.
Before and After
The Changes
If you are okay with a diff file, you can see my changes:
Alternatively, read the full file.
I realise that the new variations layout will likely break the page layout if the product has more than 2 attributes. For the client site this isn’t a problem. It would be great if the layout was created with CSS Grid as this might allow for reordering in an adaptive manner.
Hello,
Sorry for the questions but what does the ob_* functions do?
Furthermore did you in any of your projects managed to remove the table and replace it with divs? Does this code still works nowadays?
@Hugo: The ob_*() functions are Output Control Functions. They allow you to echo as normal but the output is put into a buffer that you can later retrieve (or delete).
I didn’t try to change from a table to divs. The variable.php template file has changed since I wrote this post. I would need to review my changes to update them to fit in the new version of that file. The changes might work but they might break something else.
Thanks for your explanation! Do you or someone else know why there my changes in my variable.php file is not taking action? I copied it to the template folder. It also works with the add to card template but I can even delete the whole content of the variable.php file and nothing is changing. Any hints?
@Christian – If you look in WooCommerce/Status page and go to the Templates section near the end. It will list the template file overrides that it has found in your theme’s woocommerce directory.
I see that my post does not tell you exactly where to put the variable.php file. It should be in
wp-content/<theme_dir>/woocommerce/single-product/add-to-cart/variable.phpIs that where you copied the file?Update: I emailed Christian and he found the problem – he needed to edit
variable-subscription.phpinstead ofvariable.php.