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

Woocommerce – Changing text of Add To Cart button before color and size

for the past few days I was trying to figure out, how can I change the text of my Add To Cart button before the customer selects an option.

https://www.surendra.sk/shop/accessories/arizona-sandals-2/ here is the Product Page.

So basically, before selecting the color and size there should be another text, like ‘please choose options’ and after the users selects it it will change to Add To Cart.

There is already another class being called, which changes the background color of the CTA before any selection is made. I was trying to modify this first through Javascript; 

jQuery(document).ready(function(){
jQuery('div.summary.entry-summary > form > div > div.woocommerce-variation-add-to-cart.variations_button.woocommerce-variation-add-to-cart-disabled > button').html('Vyberte farbu a veľkosť');

});

no result.

Then, I was trying to implement it directly into the functions.php

add_action( 'woocommerce_before_add_to_cart_button', 'test' );

function test(){
    echo 'Vyberte farbu a veľkosť';
}

Which displayed the text above the CTA.

So i tried playing with the filters and used

woocommerce_product_add_to_cart_text

which got me no results,again.

So then, I tried to find the “woocommerce-variation-add-to-cart.variations_button.woocommerce-variation-add-to-cart-disabled” in the .php files to alter the text directly there.

Sadly, only thing I found was a .js which was replacing the classes, basically this: 

VariationForm.prototype.onHide = function( event ) {
    event.preventDefault();
    event.data.variationForm.$form.find( '.single_add_to_cart_button' ).removeClass( 'wc-variation-is-unavailable' ).addClass( 'disabled wc-variation-selection-needed' );
    event.data.variationForm.$form.find( '.woocommerce-variation-add-to-cart' ).removeClass( 'woocommerce-variation-add-to-cart-enabled' ).addClass( 'woocommerce-variation-add-to-cart-disabled' );

I know I somehow have to call $product and $args if I want to implement it with the functions.php, but I am novice in PHP and I just cant get my heard around this.

Could you please help me with this one?

Thank you very much.

Tags:

2

Answers


  1. 0

    Why don’t you just change the text trough the WC language file? Use Loco Translate plugin if you find it hard to do.

    About the color – simply put some CSS in the theme additional CSS filed like:

    .woocommerce div.product .cart .button.disabled {
    background: #ff0000;
}
    Login or Signup to reply.
  2. 0

    Add the follows code snippet in your active theme’s functions.php to achieve the above task-

    add_action( 'wp_footer', 'wc_modify_variation_atc_text' );
function wc_modify_variation_atc_text() {
    ?>
    <script type="text/javascript">
        (function( $ ) { 
            var $form = $( '.product form.variations_form' );
            $form.find( '.single_add_to_cart_button' ).html('Vyberte farbu a veľkosť');
            $form.on( 'show_variation', function( event, variation, purchasable ) { 
                $form.find( '.single_add_to_cart_button' ).html('Add to cart');
            } );
        } )( jQuery );
    </script>
    <?php
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search