So verschieben Sie Preis und Zwischensumme unter den Produktnamen im WooCommerce-Warenkorb скачать в хорошем качестве

So verschieben Sie Preis und Zwischensumme unter den Produktnamen im WooCommerce-Warenkorb

Erfahren Sie, wie Sie Ihr WooCommerce-Warenkorb-Layout anpassen können, indem Sie Preis und Zwischensumme unter dem Produktnamen für mobile Nutzer anzeigen und gleichzeitig das ursprüngliche Layout für Desktop-Benutzer beibehalten. --- Dieses Video basiert auf der Frage https://stackoverflow.com/q/62280955/ gestellt von dem Nutzer 'Cray' ( https://stackoverflow.com/u/1788961/ ) sowie auf der Antwort https://stackoverflow.com/a/62281288/ bereitgestellt von dem Nutzer '7uc1f3r' ( https://stackoverflow.com/u/11987538/ ) auf der Website 'Stack Overflow'. Vielen Dank an diese großartigen Nutzer und die Stackexchange-Community für ihre Beiträge. Besuchen Sie diese Links, um den Originalinhalt und weitere Details zu sehen, z. B. alternative Lösungen, aktuelle Entwicklungen zum Thema, Kommentare, Versionsverlauf usw. Der ursprüngliche Titel der Frage lautete beispielsweise: WooCommerce: Move price and subtotal under product name in cart Außerdem steht der Inhalt (außer Musik) unter der Lizenz CC BY-SA https://meta.stackexchange.com/help/l... Der ursprüngliche Fragenbeitrag steht unter der Lizenz 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/... ), und der ursprüngliche Antwortbeitrag steht unter der Lizenz 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/... ). Falls Ihnen irgendetwas auffällt oder Unstimmigkeiten bestehen, schreiben Sie mir bitte an vlogize [AT] gmail [DOT] com. --- Anpassung Ihres WooCommerce-Warenkorbs: Preis und Zwischensumme unter dem Produktnamen anzeigen Im heutigen Zeitalter des Online-Shoppings ist es entscheidend, die Benutzererfahrung auf verschiedenen Geräten zu optimieren. Wenn Sie einen WooCommerce-Shop betreiben, möchten Sie möglicherweise Ihr Warenkorb-Layout anpassen, um eine bessere Darstellung auf mobilen Geräten zu gewährleisten. Insbesondere möchten Sie vielleicht den Preis und die Zwischensumme jedes Produkts direkt unter dem Produktnamen im Warenkorb anzeigen. Dieser Blogbeitrag zeigt Ihnen Schritt für Schritt, wie Sie diese Anpassung effektiv vornehmen können. Egal, ob Sie ein erfahrener Entwickler oder ein WooCommerce-Shopbetreiber mit etwas Programmierkenntnissen sind, die Schritte sind einfach nachvollziehbar. Problemübersicht Das Ziel ist Folgendes: Für mobile Viewports: Preis und Zwischensumme direkt unter dem Produktnamen anzeigen. Für Desktop-Viewports: Die bestehende Tabellenzellen-Struktur zur Anzeige von Preisen und Zwischensummen beibehalten. Bei der Umsetzung sind Sie auf den Hook woocommerce_after_cart_item_name gestoßen, der sich perfekt eignet, um Inhalte direkt unter dem Produktnamen im Warenkorb hinzuzufügen. Allerdings war es schwierig, den Produktpreis und die Zwischensumme korrekt abzurufen. Lösungsschritte Um dieses Problem zu lösen, erstellen wir eine eigene Funktion, die in WooCommerce eingehängt wird. Hier die einzelnen Schritte im Detail: Schritt 1: Produktpreis und Zwischensumme abrufen In Ihrer eigenen Funktion verwenden Sie WooCommerce-eigene Methoden, um die benötigten Daten zu erhalten: [[Siehe Video, um diesen Text oder Codeausschnitt anzuzeigen]] Schritt 2: Funktion in WooCommerce einhängen Anschließend müssen Sie WooCommerce mitteilen, diese Funktion direkt nach dem Produktnamen auszuführen. Dies erreichen Sie mit dem folgenden add_action Aufruf: [[Siehe Video, um diesen Text oder Codeausschnitt anzuzeigen]] Erklärung zum Code get_price(): Diese Methode ruft den Produktpreis aus den Warenkorb-Daten ab. line_subtotal: Diese Eigenschaft liefert die Zwischensumme für die angegebene Menge des Produkts. Bedingte Logik: Prüft, ob die Menge zwei oder mehr beträgt. Falls ja, wird die Zwischensumme angezeigt. Das sorgt für mehr Klarheit, besonders wenn Kunden mehrere gleiche Artikel kaufen. Zusätzliches CSS für mobile Ansicht Damit diese neue Anordnung nur auf mobilen Geräten erscheint, müssen Sie etwas CSS nutzen. Sie können die vorhandenen Preis- und Zwischensummenzellen auf kleineren Bildschirmen ausblenden. Hier ein einfaches CSS-Beispiel: [[Siehe Video, um diesen Text oder Codeausschnitt anzuzeigen]] Fazit Mit diesen einfachen Code-Anpassungen passen Sie Ihr WooCommerce-Warenkorb-Layout bequem für mobile Nutzer an. Dies verbessert nicht nur die Benutzerfreundlichkeit, sondern kann auch zu mehr Conversions führen, da Kunden ihre ausgewählten Artikel leichter einsehen können. Bei Fragen zur Umsetzung oder für weiterführende Erklärungen hinterlassen Sie gerne einen Kommentar! Viel Erfolg beim Programmieren!