Note on “Add to cart” button if no attribute selected

  • Resolved perlfan

    (@perlfan)


    4 years, 1 month ago

    Hi there,

    I have a question concerning variable products. Some website users don’t understand why they can’t add a product to the cart by clicking “Add to cart” as long as they haven’t selected the product attributes. Yes, there is a warning note that appears if they try to click the button (“Please first choose your product attributes etc.)”. But some users don’t even try to click because they see the crossed red circle if they hover over the button, making them leave the shop. Is it possible to maybe replace the “Add to cart” caption with “Please choose your product attributes first” as long as no product attributes are selected?

    Thanks for help, Frank

Viewing 2 replies - 1 through 2 (of 2 total)

  • Hello,

    You can apply the code below to conditionally change the add to cart button text. I would recommend using a plugin like?Code Snippets?to add that snippet to your site.

    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('Please first choose your product attributes');
            $form.on( 'show_variation', function( event, variation, purchasable ) { 
                $form.find( '.single_add_to_cart_button' ).html('Add to cart');
            } );
        } )( jQuery );
    </script>
    <?php
}
    Thread Starter perlfan

    (@perlfan)

    Works like a charm ?? Brilliant, thank you. BTW: My button is German: “In den Warenkorb”. So whoever wants to use the code, might have to adapt it to the language version. Thanks a lot!

    Frank

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Note on “Add to cart” button if no attribute selected’ is closed to new replies.