Woocommerce: Funktion hinzugefügt, um das Erfolgsmeldungs-Popup „In den Warenkorb“ zu schließen

Lesezeit: 4 Minuten

Dies ist mein erster Beitrag, also seid bitte sanft. Ich beende gerade eine Woocommerce-basierte Website, und meine Kunden haben darum gebeten, dass das kleine Popup-Banner für die Meldung „Erfolgreich in den Warenkorb gelegt“ auf dem Produkt geschlossen werden kann (z. B. mit einer kleinen „x“-Schaltfläche). Seiten. (Derzeit gibt es über dieses Popup nur die Option „Warenkorb anzeigen“.) Dies scheint keine integrierte Einstellung dafür in WooCommerce zu sein.

Um zu sehen, wovon ich spreche, können Sie zu gehen https://www.drinkreorient.com/product/rose-root/ und dieses Produkt in den Warenkorb legen (kein Kauf notwendig ;-)). Sie sollten dann das Popup sehen.

Ich habe einige Versuche unternommen, indem ich herumgegoogelt und mit der functions.php und der Funktion “wc_add_to_cart_message” herumgespielt habe, aber ohne Erfolg. Ich bin nicht sehr fließend in PHP (oder Javascript), das notwendig ist, um dies zu ermöglichen. Danke im Voraus!

Ich hatte eine ähnliche Anfrage von einem Kunden. aber anstelle eines “x”, um das Popup zu schließen, sollte es nach x Sekunden ausgeblendet werden.

siehe diesen Link: http://ausauraair.com.au/product/ausaura-air/

Durch Hinzufügen von jQuery konnte ich die Box verblassen lassen.

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

Sie könnten möglicherweise eine ähnliche Technik verwenden, aber eine “x”-Schaltfläche und dann eine On-Click-Funktion hinzufügen, um das Feld beim Klicken zu schließen.

  • Sehr cool, danke. Hatte nicht daran gedacht auszublenden; wird dies am Kunden vorbeiführen, um zu sehen, ob dies eine noch bessere Lösung für ihn ist.

    – Gefrorene Weite

    12. Dezember 2016 um 20:02 Uhr

  • Es ist möglich und ziemlich cool, beides zu tun. Aber siehe meinen Kommentar zur obigen Antwort.

    – Chris Pink

    17. Februar 2017 um 10:42 Uhr

Du solltest nicht wirklich mit dem herumspielen müssen wc_add_to_cart_message. Stattdessen sollten Sie die überschreiben woocommerce/templates/notices/success.php Template, und passen Sie es an Ihre Bedürfnisse an, indem Sie eine Schließen-Schaltfläche hinzufügen, zusammen mit etwas Javascript, um diese Aktion auszuführen.

Um die Vorlage zu überschreiben, sollten Sie zunächst die Anweisungen in der Dokumentation für befolgen Vorlagenstrukturkonkret:

Kopieren Sie es in ein Verzeichnis innerhalb Ihres Designs mit dem Namen /woocommerce, wobei Sie die gleiche Dateistruktur beibehalten, aber das Unterverzeichnis /templates/ entfernen.

Sobald Sie dies kopiert haben [your-theme]/woocommerce/notices/success.php Datei an Ort und Stelle, so etwas sollte dem, was Sie suchen, ziemlich nahe kommen:

<?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; ?>

Diese beiden Schritte sollten Ihnen genau das bringen, wonach Sie suchen.

  • Das hat genau das getan, was ich brauchte, danke. Ich weiß es zu schätzen, dass Sie die vollständige Lösung von Anfang bis Ende anbieten!

    – Gefrorene Weite

    12. Dezember 2016 um 20:01 Uhr

  • Froh zu hören! Wenn Sie nichts dagegen haben, akzeptieren Sie bitte meine Antwort als die beste Antwort. Vielen Dank!

    – YellowShark

    12. Dezember 2016 um 20:44 Uhr

  • Ein interessanter Nebeneffekt. Diese Vorlage wird auf der Warenkorbseite für Nachrichten verwendet, aber … (es ist eine große) das Javascript wurde aus irgendeinem Grund entfernt. Ich kann nirgends einen Hinweis darauf finden. Hilfe!

    – Chris Pink

    17. Februar 2017 um 10:40 Uhr


Zusätzlich zum Christian Caltabiano-Code könnte dies nützlicher sein, um Nachrichten einige Sekunden zu verzögern …

<script>jQuery(document).ready(function( $ ) {  $('.woocommerce-message').fadeTo(300,1).delay(3000).fadeOut(300);   }); </script>

$('#go').click(function(){
$('#para').fadeOut().delay(3000).fadeIn();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p><input id="go" type="button" value="Go" /></p>
<p id="para">This text will fade out and pause</p>

1427760cookie-checkWoocommerce: Funktion hinzugefügt, um das Erfolgsmeldungs-Popup „In den Warenkorb“ zu schließen

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy