Add to Cart text on Floating bar

  • Resolved nyashing

    (@nyashing)


    5 months, 1 week ago

    Hi,
    I’m using Oceanwp demo site, STORE.
    I would like to change the text “Add to cart” or “Select options” button which are on floating bar.

    I tryed the code below and it changed the text on th ebuttons, but I need to change only the text on floating bar.

    Thank you!!

    /// Change add to cart text on single product page
    add_filter( ‘woocommerce_product_single_add_to_cart_text’, ‘woocommerce_add_to_cart_button_text_single’ );
    function woocommerce_add_to_cart_button_text_single() {
    return __( ‘Add to Cart’, ‘woocommerce’ );
    }

    // Change add to cart text on product archives page
    add_filter( ‘woocommerce_product_add_to_cart_text’, ‘woocommerce_add_to_cart_button_text_archives’ );
    function woocommerce_add_to_cart_button_text_archives() {
    return __( ‘See Detail’, ‘woocommerce’ );
    }

    // Change add to cart text on single product page
    add_filter(‘woocommerce_product_single_add_to_cart_text’, ‘woocommerce_add_to_cart_button_text’, 10, 2);

    function woocommerce_add_to_cart_button_text($button_text, $product) {
    if (‘external’ == $product->get_type()) {
    $button_text = __(‘Reproduction Available’, ‘woocommerce’);
    }
    return $button_text;
    }

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

  • Hello @nyashing,

    Thank you for reaching out,

    The solution to achieve this is using a JS, I’ve included jQuery into the function.php, so please add the code below in the function.php of the child theme

    

// Add jQuery script directly
add_action('wp_footer', 'custom_jquery_script_in_footer');
function custom_jquery_script_in_footer() {
    ?>
    <script type="text/javascript">
        jQuery(document).ready(function($) {
            $('.owp-floating-bar .button.top').each(function() {
                var buttonText = $(this).text();
                if (buttonText === 'Add to cart') {
                    $(this).text('Your New Text for Add to Cart');
                } else if (buttonText === 'Select Options') {
                    $(this).text('Your New Text for Select Options');
                }
            });
        });
    </script>
    <?php
}

    Please recheck your issue and keep us posted.

    I hope it helps.
    Best Regards

    Thread Starter nyashing

    (@nyashing)

    Hi Shahin,

    The code worked perfectly, thank you very much!
    Could you help me a little further, please?

    Would it be possible to change the button text depend on the product’s category?
    If not, would it be possible to disable the floating bar for certain category products?

    Thank you.

    Hello @nyashing,

    You’re most welcome. I’m glad it is solved.

    The solution to achieve it is the following code for example.

    /* Add Category clases to the body of the single product*/
add_filter( 'body_class', 'wc_cat_names' );
function wc_cat_names( $classes ) {
  if ( is_product() ) {
    global $post;
    $terms = get_the_terms( $post->ID, 'product_cat' );
    if ( $terms ) {
      foreach ( $terms as $term ) {
        $classes[] = $term->slug;
      }
    }
  }
  return $classes;
}

// Add jQuery script directly
add_action('wp_footer', 'custom_jquery_script_in_footer');
function custom_jquery_script_in_footer() {
    ?>
    <script type="text/javascript">
        jQuery(document).ready(function($) {
            $('body.cosmetics #wrap .owp-floating-bar .button').each(function() {
                var buttonText = $(this).text();
                if (buttonText === 'Add to cart') {
 ? ? ? ? ? ? ? ? ? ?$(this).text('Cosmetics — Add to Cart');
                } else if (buttonText === 'Select Options') {
 ? ? ? ? ? ? ? ? ? ?$(this).text('Cosmetics — Select Options');
                }
            });
        });
        jQuery(document).ready(function($) {
            $('.owp-floating-bar .button').each(function() {
                var buttonText = $(this).text();
                if (buttonText === 'Add to cart') {
                    $(this).text('Your New Text for Add to Cart');
                } else if (buttonText === 'Select Options') {
                    $(this).text('Your New Text for Select Options');
                }
            });
        });	
    </script>
    <?php
}

    Please check this screenshot:
    https://postimg.cc/Fdp0nvyz

    1. It will add categories to the body classes
    2. It will change the button to the custom text for the category – ensure to add your custom category instead of my text
    3. Will change the button to general text

    Note: ensure to add #2 and then #3, also, you must put the category class from the body classes, or product ID.

    I hope it helps.
    Best Regards

    Thread Starter nyashing

    (@nyashing)

    Hi Shahin,

    Thanks a lot for the code and image!!

    Shahin

    (@skalanter)

    You’re welcome.
    I’m glad we could help.

Viewing 5 replies - 1 through 5 (of 5 total)
  • You must be logged in to reply to this topic.