Posted on

Move the attributes after the “Add to Cart” button

A customer on our support desk asked for this customization. I though it was a nice idea, so I wrote a quick snippet to do so.
It could be useful in some cases, when you don’t want to use the tab “Additional Information” or you want the information to appear immediately, without the need to scroll all the way down to the tabs and then click to the Additional Information tab to see it.

As usual, open the file functions.php located in wp-content/themes/your-theme-name and add this code at the end of the file:

This will show the attributes table just after the Add to Cart button, it will look like this using the theme Storefront:

storefront-attributes

The code won’t remove the tab Additional Information too, if you want to do so you will need some extra code and you can find a tutorial about this here: https://docs.woothemes.com/document/editing-product-data-tabs/

5 thoughts on “Move the attributes after the “Add to Cart” button

  1. […] Mustone published two WooCommerce tutorials this week: How to move product attributes to after the “add to cart” button, and how to bulk edit products from the […]

  2. Thanks this is awesome! What about moving it before the Add to cart button, right after the short description? How can I do that? Thanks again

    1. Hi Matigas,
      Replace add_action( 'woocommerce_single_product_summary', 'wc_custom_show_attributes_outside_tabs', 35 ); with this code:

      add_action( 'woocommerce_single_product_summary', 'wc_custom_show_attributes_outside_tabs', 25 );

      You may need to add some CSS too though.

  3. What about making them linkable to archive page?

Leave a Reply

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