우커머스:주문 시 텍스트 변경 버튼

우커머스:주문 시 텍스트 변경 버튼

저는 비영리 웹사이트를 위해 WooCommerce를 사용하고 있으며 "주문하기" 버튼 텍스트를 "기부하기"로 변경하고 싶습니다.버튼은 WooCommerce의 payment.php 파일에 정의되어 있습니다.

<?php echo apply_filters( 'woocommerce_order_button_html', 
    '<input 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 ) . '" />' ); ?>

저는 제 기능에 다음을 추가했습니다.하위 테마의 php 파일:

function custom_order_button_text($order_button_text){
    $order_button_text = 'Place Donation';

    return $order_button_text;
}
add_filter('woocommerce_order_button_text', 'custom_order_button_text');

일시적으로 작동하는 것처럼 보이지만 페이지 로드가 완료되기 전에 '주문하기'로 다시 바뀝니다.출력 HTML은 다음과 같습니다.

<input type="submit" class="button alt" name="woocommerce_checkout_place_order" 
id="place_order" value="Place order" data-value="Place Donation">

*업데이트:javascript를 껐더니 버튼에 "Place Donation"이라고 적혀있었습니다.그런 다음 wocommerce/assets/js/frontend/checkout.js에서 payment_method_selected의 일부로 스크립트를 찾았습니다.

if ( $( this ).data( 'order_button_text' ) ) {
    $( '#place_order' ).val( $( this ).data( 'order_button_text' ) );
} else {
    $( '#place_order' ).val( $( '#place_order' ).data( 'value' ) );
}

이것을 무시할 수 있는 최선의 방법은 확실하지 않습니다.무슨 생각 있어요?

아래와 같이 간단한 우커머스 후크를 이용하여 "주문하기" 버튼 텍스트를 "기부하기"로 변경할 수 있습니다.

/* Add to the functions.php file of your theme/plugin */

add_filter( 'woocommerce_order_button_text', 'wc_custom_order_button_text' ); 

function wc_custom_order_button_text() {
    return __( 'Place Donation', 'woocommerce' ); 
}

이것이 다른 사람에게 도움이 되기를 바랍니다.감사해요.

저도 방금 같은 문제를 발견했습니다.그것을 해결하기 위해 내가 한 일은 당신의 해결책에 가깝습니다.

완전히 대기열을 해제하는 대신에 대기열을 해제하고 정확하게 동일한 스크립트를 자녀 테마에 업로드했습니다. + 코멘트를 달았습니다.

 `/* if ( $( this ).data( 'order_button_text' ) ) {
    $( '#place_order' ).val( $( this ).data( 'order_button_text' ) );
} else {
    $( '#place_order' ).val( $( '#place_order' ).data( 'value' ) );
}*/ `

PHP:

`add_action('wp_enqueue_scripts', 'override_woo_frontend_scripts');
function override_woo_frontend_scripts() {
    wp_deregister_script('wc-checkout');
    wp_enqueue_script('wc-checkout', get_template_directory_uri() . '/../storefront-child-theme-master/woocommerce/checkout.js', array('jquery', 'woocommerce', 'wc-country-select', 'wc-address-i18n'), null, true);
}    `

단추 텍스트를 변경하려는 시도는 유효하지만, WooCommerce는 발견한 것처럼 모든 것을 무시하는 끔찍한 자바스크립트를 가지고 있습니다.

그것을 피하기 위해 한 일은 기능에 있는 필터를 이용하여 주문 버튼의 ID를 바꾸는 것입니다.php 파일, 그래서 woCommerce javascript 결함은 영향을 주지 않습니다.

function so37729878_update_order_button_id( $button_html ) {
    $button_html = str_replace( 'id="place_order"', 'id="place_order_updated_to_fix_translation"', $button_html );
    return $button_html;
}
add_filter( 'woocommerce_order_button_html', 'so37729878_update_order_button_id' );

이렇게 하면 WooCommerce 스크립트를 교체할 필요가 없습니다.이 방법으로 다른 동작이 발생하는지 100% 확신할 수는 없지만 주문 양식은 여전히 올바르게 제출됩니다.

이 방법으로 텍스트를 대체할 수 있습니다.

add_filter( 'woocommerce_order_button_html', 'custom_button_html' );

function custom_button_html( $button_html ) {
    $button_html = str_replace( 'Place order', 'Submit', $button_html );
    return $button_html;
}

CSS를 사용하여 이 문제를 해결했습니다.

#place_order { 
    font-size: 0px !important;
}

#place_order::after {
  content: 'Place Donation';
  font-size: 15px;
}

CSS와 함께 텍스트 크기 변경 없이:

.woocommerce-cart .wc-proceed-to-checkout a{      
    color: rgba(0, 0, 0, 0);    
}
    
.woocommerce-cart .wc-proceed-to-checkout a:hover{    
            color: rgba(0, 0, 0, 0);    
    }
        
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button::after {    
          position:absolute;    
            content: 'Donate'; 
            left: 0px;
            right: 0px;
            margin: 0 auto;
            color: rgba(0, 0, 0, 1);    
}

언급URL : https://stackoverflow.com/questions/37729878/woocommerce-change-text-on-order-button