Woocommerce：機能を追加して "カートに追加"を成功させるメッセージのポップアップを

Question

これは私の最初の投稿ですので、優しくしてください。私はWoocommerceベースのサイトを完成させています。顧客は、製品に表示される「カートに追加されました」メッセージの小さなポップアップバナーを閉じられるように要求していますページ。 （現在のところ、そのポップアップを介して「カートを見る」オプションが存在するだけです）。これは、WooCommerceの組み込みの設定ではないようです。

https://www.drinkreorient.com/product/rose-root/に行って、この商品をカートに入れることができます（購入不要;-)）。ポップアップが表示されます。

functions.phpと "wc_add_to_cart_message"関数を使って試してみましたが、成功しませんでした。私はこれを実現させるために必要なphp（またはjavascript）にひどく流暢ではない。前もって感謝します！

Answer 1

wc_add_to_cart_messageを本当に混乱させる必要はありません。代わりに、woocommerce/templates/notices/success.phpテンプレートを上書きして、閉じるボタンを追加することでニーズに合わせて修正し、そのアクションを実行するためのJavaScriptをいくつか追加する必要があります。

まず、テンプレートを上書きするには、具体的には、Template Structureのドキュメントで見つかった指示に従ってください：

は/ woocommerceという名前のあなたのテーマ内のディレクトリにコピーし、同じファイル構造を維持するが、削除/ templates /サブディレクトリ。

あなたはこのようなものは、あなたが探しているものにかなり近いはず、所定の場所にこの[your-theme]/woocommerce/notices/success.phpファイルをコピーしたら：

<?php 
/* Modified version of [your-theme]/woocommerce/notices/success.php */ 

if (! defined('ABSPATH')) { 
    exit; // Exit if accessed directly 
} 

if (! $messages){ 
    return; 
} 
?> 
<style> 
    .woocommerce-message .close-button { 
     /* customize the close button */ 
     float:right; 
     display:inline-block; 
     color:white; 
     cursor:pointer; 
    } 
</style> 
<script> 
    (function($){ 
    $(document).ready(function(){ 
     $('.woocommerce-message .close-button').on('click', function(){ 
     $('.woocommerce-message').fadeOut(function(){$(this).remove();}); 
     }); 
    }); 
    }(jQuery)); 
</script> 
<?php foreach ($messages as $message) : ?> 
    <div class="woocommerce-message"> 
     <?php echo wp_kses_post($message); ?>  
     <span class="close-button">X</span> 
    </div> 
<?php endforeach; ?> 

これら二つのステップは、あなたがしている正確に何を取得する必要があります探している。

Answer 2

私はクライアントから同様のリクエストを受けました。 ポップアップを閉じる "x"の代わりに、x秒後に消えるようにしました。私はボックスのフェードを作ることができたいくつかのjQueryを追加することにより、http://ausauraair.com.au/product/ausaura-air/

：

は、このリンクを参照してくださいを参照してください。

jQuery(document).ready(function($) { 
$('.woocommerce-message').fadeTo(7000,1).fadeOut(2000); 
}); 

あなたはおそらく同様の手法を使用していますが、[閉じる]をクリックしますのボックスを作るために「×」ボタンを押して、上のクリック機能を追加することができます。