Nút giỏ hàng kiểu mới khi hàng có trong giỏ hàng trong WooCommerce

Question

Tôi sử dụng mã thay đổi văn bản của nút "Thêm vào giỏ hàng" cho một sản phẩm nếu sản phẩm đã có trong giỏ hàng.

/* 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;
 
}

Cho tôi biết làm cách nào bạn có thể thay đổi kiểu của nút "Thêm vào giỏ hàng" cho một sản phẩm nếu sản phẩm đã được thêm vào giỏ hàng?

Tôi đã thử thêm mã vào tệp /loop/add-to-cart.php như được hiển thị ở đây Thay đổi kiểu nút thêm vào giỏ hàng khi sản phẩm có trong giỏ hàng trong Woocommerce nhưng nó không hoạt động với tôi.

Có bất kỳ tùy chọn mã nào khác có thể giúp giải quyết câu hỏi của tôi không?

Tôi sẽ rất vui vì sự giúp đỡ của bạn!

Answer 1

Một cách là kiểm tra jQueryxem một phần tử nhất định (nút thêm vào giỏ hàng của bạn) có chứa một văn bản nhất định hay không, nếu đúng như vậy, chúng tôi sẽ thêm một lớp bổ sung mà bạn có thể định kiểu thông qua CSS.

: chứa () Bộ chọn - Chọn tất cả các phần tử có chứa văn bản được chỉ định.

Vì vậy, bạn nhận được:

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' );

---

Lưu ý: Bộ chọn (lớp) có thể được đặt tên khác nhau tùy thuộc vào chủ đề bạn đang sử dụng