• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

Damien Carbery - Website Development

Getting You Online & Keeping You There

Getting You Online & Keeping You There Get Started
  • Home
  • Services
  • Maintenance Plans
  • Portfolio
  • Blog
  • About Me
  • Contact
You are here: Home / Website Development / Change WooCommerce variations layout

Change WooCommerce variations layout

Published: November 6, 2017

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.

Reader Interactions

Comments

  1. Hugo Manuel de Almeida Vaz Pereira says

    June 24, 2020 at 9:21 am

    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?

    Reply
  2. damien says

    June 24, 2020 at 10:57 am

    @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.

    Reply
  3. Christian says

    September 21, 2022 at 3:08 pm

    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?

    Reply
    • damien says

      September 22, 2022 at 12:09 pm

      @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.php Is that where you copied the file?

      Reply
      • damien says

        September 22, 2022 at 12:10 pm

        Update: I emailed Christian and he found the problem – he needed to edit variable-subscription.php instead of variable.php.

        Reply

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *


The reCAPTCHA verification period has expired. Please reload the page.

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Primary Sidebar

Blog Categories

  • Being Green
  • Food
  • Grammar
  • Just Strange
  • Laziness
  • Personal
  • Portfolio
  • Race Reports
  • Shudder
  • Typo
  • Website Development
  • WooCommerce Tips
  • Facebook
  • Twitter

Copyright © 2013–2023 Damien Carbery · Using Genesis Framework · Privacy Policy