2

Im looking for a way to add a custom class to the add-to-cart button on the single-product.php page in Woocommerce. I have tried the following without any result:

  1. Copy whole woocommerce-folder from the folder "plugins" to "themes/MY-THEME/woocommerce".
  2. Modifying the file "add-to-cart.php" in "themes/MY-THEME/woocommerce/loop/add-to-cart.php

if ( ! defined( 'ABSPATH' ) ) {
    exit; // Exit if accessed directly
}

global $product;

echo apply_filters( 'woocommerce_loop_add_to_cart_link',
    sprintf( '<a href="%s" rel="nofollow" data-product_id="%s" data-product_sku="%s" data-quantity="%s" class="button %s product_type_%s">%s</a>',
        esc_url( $product->add_to_cart_url() ),
        esc_attr( $product->id ),
        esc_attr( $product->get_sku() ),
        esc_attr( isset( $quantity ) ? $quantity : 1 ),
        $product->is_purchasable() && $product->is_in_stock() ? 'add_to_cart_button MY-TEST-CLASS-HERE' : '',
        esc_attr( $product->product_type ),
        esc_html( $product->add_to_cart_text() )
    ),
$product );

Allthough I cant see the "MY-TEST-CLASS-HERE" in the source-code. What am I doing wrong?

closed as off-topic by Mark Kaplun, TheDeadMedic, Mayeenul Islam, Nicolai, Howdy_McGee Nov 24 '15 at 17:06

This question appears to be off-topic. The users who voted to close gave this specific reason:

If this question can be reworded to fit the rules in the help center, please edit the question.

4

As explained in their documentation WooCommerce provides a templating structure. Copying WC in your theme won't get you anywhere.

  1. Create a woocommerce folder in your theme.
  2. Copy any template inside the templates folder of WC inside your woocommerce theme folder. Beware you need to keep the structure from templates folder intact in your woocommerce theme folder for this to work.
  3. Modify the templates in your theme's woocommerce folder to your liking. They have loading precendence over the ones inside plugin's templates.

Tip: do not copy all the templates from the plugin inside your theme! Only the ones you want to modify. From time to time WC updates their templates and adds functionality. WooCommerce will also let you know when a template you keep in your theme might have an upgraded version inside the plugin, after an upgrade.

And by the way, I suspect the downvote was not for the question itself, but for the title. I bet you know how to add a class to a button. What you didn't know was how to use the templating system of WooCommerce. Because you didn't google it, which I think you (technically) know how to do. Please, pardon my touch of sarcasm, it was either that or another downvote.

1

The easiest way I found (a little hacky) is wrap the button in a span tag, add the class to the span and then in your css apply the properties to the button inheriting from the span:

<span class="my-nice-class">
    <?php woocommerce_get_template( 'loop/add-to-cart.php' ); ?>
</span>

and then in css:

.my-nice-class .button {
    color: black;
}
0

Are you using a child theme? If not, I would suggest that. Then you can custom style the button in the child theme's "style.css" file by editing the style of "add_to_cart_button" vs creating a new class

  • Pretty sure this refers to something else not to woocommerce buttons which is a plugin not a theme.. – jnhghy - Alexandru Jantea Dec 12 '16 at 15:12

Not the answer you're looking for? Browse other questions tagged or ask your own question.