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/

9 replies
  1. Matias Ighani
    Matias Ighani says:

    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

    Reply
    • Nicola Mustone
      Nicola Mustone says:

      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.

      Reply
  2. walter
    walter says:

    Hello!
    It worked for me!
    But in the debug log this is appearing. Can you help me?
    PHP Notice: WC_Product::list_attributes is deprecated since version 3.0! Use wc_display_product_attributes instead. in /home/public_html/domain.com/wp-includes/functions.php on line 3837

    Reply
  3. Alex
    Alex says:

    Thanks, just what i needed to show the availability attribute.

    For single attribute, it’s:

    global $product;
    echo $product->get_attribute(‘yourattributename’);

    Reply

Trackbacks & Pingbacks

  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 […]

Leave a Reply

Want to join the discussion?
Feel free to contribute!

Leave a Reply