Woocommerce Buttons ändern
-
Guten Tag,
wie kann ich alle Buttons von Woocommerce z.B „Zum Warenkorb hinzufügen“ oder „Checkout“ etc.. umändern in animierte Buttons von Codepen.io zb?
Hier mal ein beispiel button
https://codepen.io/Namys/pen/XWJJrvXDie CSS weiss ich wo ich die einfügen muss nur den HTML?
Kann mir jemand helfen? Würde auch was spenden
-
Moderationshinweis: Jobangebote sind in den WordPress-Supportforen nicht erwünscht. Darauf bist du bereits hingewiesen worden.
Hier bieten dir andere AnwenderInnen Hilfe zur Selbsthilfe an, keine Dienstleistungen „gegen Spende“.hi, ja das bin ich war aber der meinung das eine Spende dazu nicht gehört.
Na dann würde ich mich hier im Forum über hilfe freuen.Ich hab die CSS in die style.css eingefügt und die class bzgl in der single-product seite definiert
<button type="submit" class="animated-button1"><?php echo esc_html( $product->single_add_to_cart_text() ); ?></button>
Ich versuche dieses button einzufügen.
https://codepen.io/Alexb98/pen/XWrqpxB?editors=1100
nun zeigt es zwar diesen Button an aber es fehlt die Animation.
Kann das sein das es was mit den Keyframes und WordPress zu tun hat?
Oder wieso keine animation mit CSS möglich?Kann das sein das es was mit den Keyframes und WordPress zu tun hat?
Oder wieso keine animation mit CSS möglich?sicher nicht.
Du hast das dann wohl falsch umgesetzt. An sich reicht, wenn du das HTML-Element (Button) über die developer console (F12) findest und dann die CSS-Regeln für das Element in angepasster Form über Design > Customizer > Zusätzliches CSS einfügst.
Was du oben angegeben hast, ist von der Form (HTML) und auch an der Stelle falsch.
Allerdings muss ich darauf hinweisen, dass dieses Forum WordPress-Probleme behandelt.
Bei CSS-Problemen (und das ist hier ein CSS-Problem) musst du dich an andere Foren wenden.
Weitere Infos: https://developer.mozilla.org/de/docs/Web/CSS
Wie man CSS in WordPress bearbeitet: https://kinsta.com/de/blog/wordpress-css/Hi @hage,
In der Tat habe ich das vor meiner Frage hier so versucht wie du das beschrieben hast. Es hat bei mir aber nicht funktioniert auch hier fehlte die komplette animation.
Denke daher nicht das es am CSS liegt aber nun gut werde mich woanders nach hilfe umschauen
-
Diese Antwort wurde vor 4 Jahren, 6 Monaten von
minati88 geändert.
Ich versuche dieses button einzufügen.
Wenn du mal genau hinsehen würdest, dann würde dir auffallen, dass dort überhaupt kein Button benutzt wird, sondern ein Link. Und deswegen wirst du das so auch nicht hinbekommen.
PS und ein wenig OT: solche Animationen sind eher was für Kinderseiten, aber nicht für ein Shop-System, zumal Animatonen vom Wesentlichen ablenken. Außerdem sind knapp 1700 Zeilen CSS-Code nur für einen Button völlig überzogen.
-
Diese Antwort wurde vor 4 Jahren, 6 Monaten von
bscu geändert.
Tolle Antwort 🙂
Ich kann da kein Link erkennen und wenn du mal genau hinschaust sind es weniger Zeilen CSS-Code für 1 Button.
Dennoch würde ich mich freuen wenn es den ein oder anderen hier gibt der sich da etwas besser auskennt.
Man will mir doch nicht erzählen können das man nicht diesen Button einfügen kann 🙂
Ich bin seit gestern Abend am versuchen und sollte ich das hinkriegen werde ich hier die anleitung posten.
Gruss
Uiuiui …
Also.
<a href="https://example.com">Website Example</a>
ist ein Link und daraus wird auch kein<button>
, wenn der Link (wie in dem zitierten Code-Beispiel auf Codepen) eine CSS-Klasse zugefügt bekommt:<a href="#" class="animated-button1">…</a>
. Der Code zeigt also die Gestaltung eines Links, der dann aussieht wie ein Button.Ob es sinnvoll ist, einen solchen Button zu verwenden (Stichworte Performance, Usability und Barrierefreiheit), ist ein anderes Thema, das wir hier nicht erörtern sollten.
WooComerce liefert einige Templates zur Darstellung der Produkte und auch des Warenkorbs. Die Templates sind Bestandteil des Plugins und du findest sie im Plugin-Verzeichnis templates. Diese Templates können Entwickler in ein Theme übernehmen und nach eigenen Wünschen anpassen. Wie das geht, wird in der WooCommerce-Dokumentation beschrieben: How to Edit Files . Auf diese Weise sollte sich auch der auf Codepen genannte Code einbauen lassen.
Nochmal zur Erinnerung: Wir bieten hier Hilfe zur Selbsthilfe an, programmieren aber nicht auf Zuruf Änderungen – auch nicht gegen Spende. Theme und Plugins werden auf WordPress.org kostenlos so, wie sie sind, zur Verfügung gestellt. Sie können nach den eigenen Wünschen und Bedürfnissen angepasst werden, was aber entsprechende Kenntnisse erfordert. Wir können hier keine Grundlagen in HTML, PHP, CSS oder JavaScript vermitteln, weil es den Rahmen sprengen würde.
Wir freuen uns auf eine freundliche und sachliche Fortsetzung des Threads. 🌼
Ich kann da kein Link erkennen
Dann würde ich nochmal auf https://codepen.io/Alexb98/pen/XWrqpxB?editors=1100 genauer hinsehen, denn da steht:
<a href="#" class="animated-button1"> <span></span> <span></span> <span></span> <span></span> Button </a>
Das ist ein Link und kein Button!
Sag ich doch. 😉
Es kann sein das ich mich irre aber bin der Meinung das ihr da was verwechselt.
Die Class „animated-button1“ ist der button. und die href ist der link für die weiterleitung des buttons.
Ob da ein Link ist oder nicht tut nichts zur Sache, fakt ist nun mal das die CSS nicht so übernommen werden bei WordPress bzgl die Animation.
Sieht für mich nicht nur nach einem reinen CSS problem aus weil die CSS ist ja korrekt.
Aber bin jetzt auch kein Profi was das angeht dennoch bedanke ich mich bei euch für eure Zeit hier zu antworten.
Aber nun gut, versuche mir hilfe bei einem anderen Forum zu holen.
Mal doof gefragt wo kann ich hier jobangebote anbieten gegen „Spende“?
-
Diese Antwort wurde vor 4 Jahren, 6 Monaten von
minati88 geändert.
… aber bin der Meinung das ihr da was verwechselt.
Die HTML-Tags sind da eigentlich ganz eindeutig:
If the a element has an href attribute, then it represents a hyperlink.
Quelle: W3C HTML5 Reference: 4.3.6.1 The a element
und
The button element represents a button.
Quelle: W3C HTML5 Reference: 4.3.10.5 The button element
Die Angaben des W3C werden von Programmierern weltweit als Vorgabe angenommen.
Ob da ein Link ist oder nicht tut nichts zur Sache, fakt ist nun mal das die CSS nicht so übernommen werden bei WordPress bzgl die Animation.
Auch dazu hatte ich dir etwas geschrieben. Vielleicht magst du nochmal nachlesen?
Mal doof gefragt wo kann ich hier jobangebote anbieten gegen „Spende“?
„Hier“ (also auf WordPress.org) gar nicht.
Ob sich Dienstleister mit einer Spende zufriedengeben, mag ich hier nicht beurteilen. Aber es gibt diverse Freelancer-Portale, auf denen auch Dienstleistungen für WordPress angeboten werden. Ohne jetzt für eines der Portale Werbung zu machen, würde ich mal hier anfangen: Fiverr > Programmierung & Technik > WordPress.
-
Diese Antwort wurde vor 4 Jahren, 6 Monaten von
- Das Thema „Woocommerce Buttons ändern“ ist für neue Antworten geschlossen.