Gaya baru tombol keranjang saat item ada di keranjang di WooCommerce

Question

Saya menggunakan kode yang mengubah teks tombol "Tambahkan ke Keranjang" untuk suatu produk jika item tersebut sudah ada di keranjang.

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

Beritahu saya bagaimana Anda dapat mengubah gaya tombol "Tambahkan ke Keranjang" untuk suatu produk jika produk tersebut telah ditambahkan ke keranjang?

Saya mencoba menambahkan kode ke file /loop/add-to-cart.php seperti yang ditunjukkan di sini Ubah gaya tombol tambahkan ke keranjang saat produk ada di keranjang di Woocommerce tetapi tidak berhasil untuk saya.

Apakah ada opsi kode lain yang akan membantu menjawab pertanyaan saya?

Saya akan senang atas bantuan Anda!

Answer 1

Salah satu caranya adalah dengan memeriksa jQueryapakah elemen tertentu (tombol add-to-cart Anda) berisi teks tertentu, jika demikian, kami akan menambahkan kelas tambahan yang dapat Anda gunakan untuk mengatur gaya CSS.

: berisi () Selector - Pilih semua elemen yang berisi teks tertentu.

Jadi Anda mendapatkan:

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

---

Catatan: Pemilih (kelas) dapat diberi nama berbeda tergantung pada tema yang Anda gunakan