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.
Leave a Reply