WooCommerce에서 항목이 장바구니에있을 때 새로운 스타일의 장바구니 버튼

Question

상품이 이미 장바구니에있는 경우 제품의 "장바구니에 추가"버튼의 텍스트를 변경하는 코드를 사용합니다.

/* for single product */
add_filter( 'woocommerce_product_single_add_to_cart_text', 'single_product_button_text' );
 
function single_product_button_text( $text ) { if( WC()->cart->find_product_in_cart( WC()->cart->generate_cart_id( get_the_ID() ) ) ) { $text = 'Product in cart';
    }
 
    return $text; } /* for archive/category pages */ add_filter( 'woocommerce_product_add_to_cart_text', 'products_button_text', 20, 2 ); function products_button_text( $text, $product ) { if( $product->is_type( 'simple' )
       && $product->is_purchasable() && $product->is_in_stock()
       && WC()->cart->find_product_in_cart( WC()->cart->generate_cart_id( $product->get_id() ) ) ) { $text = 'Product in cart';
 
    }
 
    return $text;
 
}

제품이 이미 장바구니에 추가 된 경우 제품의 "장바구니에 추가"버튼의 스타일을 변경하는 방법을 알려주십시오.

여기에 표시된대로 /loop/add-to-cart.php 파일에 코드를 추가하려고 시도했습니다. 제품이 Woocommerce에서 장바구니에있을 때 장바구니에 추가 버튼 스타일을 변경 했지만 작동하지 않습니다.

내 질문을 해결하는 데 도움이되는 다른 코드 옵션이 있습니까?

나는 당신의 도움에 기뻐할 것입니다!

Answer 1

한 가지 방법은 jQuery특정 요소 (장바구니에 추가 버튼)에 특정 텍스트가 포함되어 있는지 확인하는 것입니다 CSS. 이 경우을 통해 스타일을 지정할 수있는 추가 클래스를 추가합니다 .

: contains () 선택기 -지정된 텍스트를 포함하는 모든 요소를 ​​선택합니다.

따라서 다음을 얻을 수 있습니다.

function action_wp_footer() {
    ?>
    <script>
        jQuery(document).ready(function($) { var selector = '.add_to_cart_text:contains("Product in cart")'; // Selector contains specific text if ( $( selector ).length > 0 ) {
                $( selector ).addClass( 'product-is-added' ); } else { $( selector ).removeClass( 'product-is-added' );            
            }
            
        });
    </script>
    <?php
}
add_action( 'wp_footer', 'action_wp_footer' );

---

참고 : 선택기 (클래스)는 사용중인 테마에 따라 다른 이름을 지정할 수 있습니다.