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/


More Posts That You Might Like…


9 responses to “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?

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

    1. I have found the answer:

      add_action ( ‘woocommerce_product_meta_start’, ‘show_attributes’, 25 );
      function show_attributes() {
      global $product;
      wc_display_product_attributes( $product );
      }

      1. Thank you! I’ve been looking for an answer to this.

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

    For single attribute, it’s:

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

Leave a Reply

Categories

Newsletter

Receive new articles from this blog directly in your inbox!

No spam guaranteed!

Blog at WordPress.com.

%d bloggers like this: