Woocommerce Question posted in
The official Woocommerce documentation can be found here.

Changing the HTML of the add to cart button in WooCommerce

I have this piece of code which I use for my checkout/order button. Which is pretty convenient, I can style the button and add custom text and classes. I know this won’t work with translated content but that is of no importance here because the website is and will stay in only 1 language. 

// Filter for adding extra custom line to order button
add_filter('woocommerce_order_button_html', 'mbm_custom_button_html');

function mbm_custom_button_html($button_html)
{

$button_html = '<button type="submit" class="button alt" name="woocommerce_checkout_place_order" id="place_order">Lidmaatschap starten<br /><span class="extra-text-checkout-button">Betaal pas na gratis proefperiode</span></button>';

return $button_html;
}

I was wondering can I also use the same method for the add to cart button? But then something like add_filter('woocommerce_add_to_cart_button_html', 'mbm_custom_atc_button_html');
I tried to search it in the docs but could not find my answer.

Tags:

4

Answers


  1. 0

    Add below code in your active theme’s function.php

    add_filter( 'woocommerce_order_button_html', 'ro_custom_cart_button_html' );

function ro_custom_cart_button_html( $button_html ) {
    $order_button_text = 'Submit';
    //add your html below where there is button tag
    $button_html = '<button type="submit" class="button alt" 
    name="woocommerce_checkout_place_order" id="place_order" value="' . esc_attr( 
    $order_button_text ) . '" data-value="' . esc_attr( $order_button_text ) . '">' . 
    esc_html( $order_button_text ) . '</button>';
    $button_html = str_replace( 'Place order', 'Submit', $button_html );
    return $button_html;
}

    Tested and works well

    Login or Signup to reply.
  2. 0

    For “Add to Cart” part, you may try this hooks: woocommerce_loop_add_to_cart_link and woocommerce_product_single_add_to_cart_text.

    I believe, the first one provides a better solution for you. You may check the detailed usage via: https://stackoverflow.com/a/56179393/11003615 and http://hookr.io/filters/woocommerce_loop_add_to_cart_link/

    Hope those helps. Best regards.

    Login or Signup to reply.
  3. 0

    for loop page

    add_filter('woocommerce_product_add_to_cart_text', 'custom_woocommerce_product_add_to_cart_text', 100);

    for product single page 

    add_filter('woocommerce_product_single_add_to_cart_text', 'custom_woocommerce_product_add_to_cart_text', 100);

function custom_woocommerce_product_add_to_cart_text(){
    return 'Add to catd 111';
}
    Login or Signup to reply.
  4. 0

    There does not exists filter to change the ‘ADD TO CART’ button HTML.
    If you need to do changes in HTML of ‘ADD TO CART’ button, you need to override the templates from plugin to your theme.

    For example, for simple product ‘ADD TO CART’ button HTML, you need to override /plugins/woocommerce/templates/single-product/add-to-cart/simple.php to /theme/woocommerce/single-product/add-to-cart/simple.php and do changes in simple.php which is in a theme folder.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search