{"id":54934,"date":"2022-11-03T07:00:36","date_gmt":"2022-11-03T14:00:36","guid":{"rendered":"https:\/\/dhblog.dream.press\/blog\/?p=54934"},"modified":"2025-01-16T11:31:37","modified_gmt":"2025-01-16T19:31:37","slug":"erstellen-eines-woocommerce-child-themes","status":"publish","type":"post","link":"https:\/\/www-dev.dreamhost.com\/blog\/de\/erstellen-eines-woocommerce-child-themes\/","title":{"rendered":"Wie man ein WooCommerce Child-Theme erstellt"},"content":{"rendered":"\n<p>Nehmen wir an, Sie haben einen <a href=\"https:\/\/wordpress.org\/plugins\/woocommerce\/\" target=\"_blank\" rel=\"noopener\">WooCommerce-Shop<\/a> eingerichtet und betriebsbereit.<\/p>\n\n\n\n<p>Wenn Sie das offizielle <a href=\"https:\/\/woocommerce.com\/storefront\/\" target=\"_blank\" rel=\"noopener\">Storefront-Theme<\/a> verwenden, k\u00f6nnte es sogar recht professionell aussehen. Sie m\u00f6chten jedoch m\u00f6glicherweise das Erscheinungsbild Ihres WooCommerce-Shops anpassen, um es Ihrer Vision anzupassen.<\/p>\n\n\n\n<p>Die beste L\u00f6sung ist oft, ein WooCommerce <a href=\"https:\/\/www.dreamhost.com\/blog\/de\/warum-sie-ein-child-theme-benotigen\/\" target=\"_blank\" rel=\"noopener\">Child-Thema<\/a> zu erstellen. Das liegt daran, dass ein Child-Thema es Ihnen erm\u00f6glicht, \u00c4nderungen an Ihrem urspr\u00fcnglichen Thema vorzunehmen, ohne es direkt zu bearbeiten. Es vereinfacht den Prozess der Anpassung des Erscheinungsbildes Ihres Gesch\u00e4fts und eliminiert potenzielle Risiken f\u00fcr Ihr Thema und Ihren Laden.<\/p>\n\n\n\n<p>In diesem Artikel werden wir uns ansehen, wie Sie Ihren WooCommerce-Shop mit Themes gestalten k\u00f6nnen. Anschlie\u00dfend zeigen wir Ihnen, wie Sie in nur f\u00fcnf Schritten Ihr eigenes Child-Theme erstellen k\u00f6nnen. Anfangen!<\/p>\n\n\n\n<h2 id=\"h-a-quick-look-at-woocommerce-themes\" class=\"wp-block-heading\"><b>Ein schneller Blick auf WooCommerce-Themes<\/b><\/h2>\n\n\n\n<p>Mit dem Start des <a href=\"https:\/\/wordpress.org\/plugins\/woocommerce\/\" target=\"_blank\" rel=\"noopener\">WooCommerce Plugins<\/a> im Jahr 2011 wurde WordPress zur beliebtesten E-Commerce-Plattform. WooCommerce wird derzeit verwendet, um <a href=\"https:\/\/trends.builtwith.com\/shop\" target=\"_blank\" rel=\"noopener\">25% aller Online-Shops<\/a> zu betreiben, was es 6% beliebter macht als seinen n\u00e4chsten Konkurrenten.<\/p>\n\n\n\n<p><style>.embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; } .embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }<\/style><\/p>\n\n\n\n<div class=\"embed-container\"><iframe data-src=\"https:\/\/www.youtube.com\/embed\/2TVJi7IpwxA\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" class=\"lazyload\" data-load-mode=\"1\"><\/iframe><\/div>\n\n\n\n<p>Eines der Elemente, die WooCommerce so erfolgreich gemacht haben, ist, wie einfach es ist, mit minimalem Aufwand einen einzigartigen Laden zu erstellen. Dies allein erkl\u00e4rt jedoch nicht die Beliebtheit der Plattform.<\/p>\n\n\n\n<p>Ein weiterer gro\u00dfer Faktor f\u00fcr den Erfolg von WooCommerce sind die nahezu unendlichen Anpassungsm\u00f6glichkeiten, die es bietet. In Kombination mit dem richtigen Thema haben Sie Zugang zu viel gestalterischer Flexibilit\u00e4t.<\/p>\n\n\n\n<p>WooCommerce ist mit fast allen <a href=\"https:\/\/www.dreamhost.com\/blog\/de\/wie-man-wp-themes-findet\/\" target=\"_blank\" rel=\"noopener\">WordPress-Themes<\/a> kompatibel. Die meisten von ihnen sind jedoch nicht optimiert, um die einzigartigen Funktionen des Plugins zu handhaben.<\/p>\n\n\n\n<p>Gl\u00fccklicherweise ist <a href=\"https:\/\/woocommerce.com\/storefront\/\" target=\"_blank\" rel=\"noopener\">das Storefront-Theme<\/a> eine ausgezeichnete Option. Dies ist das offizielle WooCommerce-Theme, das speziell entwickelt wurde, um sich in das Plugin zu integrieren. Es sieht direkt aus der Box heraus \u00fcberzeugend aus, mit einem einfachen und sauberen Design, das den Fokus auf Ihre Produkte legt:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" width=\"1200\" height=\"765\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2022\/11\/woocommerce-storefront-theme.jpg\" alt=\"das WooCommerce Storefront-Theme\" class=\"wp-image-37882 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/11\/woocommerce-storefront-theme.jpg.webp 1200w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/11\/woocommerce-storefront-theme-300x191.jpg 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/11\/woocommerce-storefront-theme-1024x653.jpg 1024w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/11\/woocommerce-storefront-theme-768x490.jpg 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/11\/woocommerce-storefront-theme-600x383.jpg.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/11\/woocommerce-storefront-theme-750x478.jpg.webp 750w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/11\/woocommerce-storefront-theme-100x64.jpg 100w\" data-sizes=\"(max-width: 1200px) 100vw, 1200px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1200px; --smush-placeholder-aspect-ratio: 1200\/765;\" \/><\/figure><\/div>\n\n\n<p>Dieses minimalistische Design macht Storefront auch zu einer idealen Basis f\u00fcr Anpassungen. Hier kommen Child-Themes ins Spiel, die wir als N\u00e4chstes betrachten werden.<\/p>\n\n\n\n<h2 id=\"h-why-you-might-want-to-create-a-woocommerce-child-theme\" class=\"wp-block-heading\"><b>Warum Sie ein WooCommerce Child-Theme erstellen m\u00f6chten<\/b><\/h2>\n\n\n\n<p>Wenn Sie viel Zeit damit verbracht haben, sich \u00fcber WordPress zu informieren, sind Ihnen wahrscheinlich bereits Child-Themes begegnet.<\/p>\n\n\n\n<p>Kurz gesagt, beginnt ein Child-Theme sein Leben als Kopie eines anderen Themes, das als &#8216;Eltern-Theme&#8217; bekannt ist. Sie k\u00f6nnen dann \u00c4nderungen am Child-Theme vornehmen und diese testen, ohne das Eltern-Theme direkt zu bearbeiten. Dies ist wichtig, da das \u00c4ndern des Original-Themes zu irreversiblen Fehlern und sogar zu Sch\u00e4den an Ihrer Website f\u00fchren kann.<\/p>\n\n\n\n<p>Sie k\u00f6nnten ein Child-Theme erstellen, weil Sie ein anderes Theme als Basis verwenden m\u00f6chten, anstatt ein neues Theme komplett von Grund auf neu zu erstellen. Alternativ m\u00f6chten Sie vielleicht nur einige kleinere \u00c4nderungen am Branding oder der Gesamta\u0308sthetik eines Themes vornehmen. Der Himmel ist wirklich die Grenze, abh\u00e4ngig davon, wie viel Zeit Sie bereit sind, in das Projekt zu investieren.<\/p>\n\n\n\n<p>Wenn es um WooCommerce geht, basieren die meisten Child-Themes auf Storefront:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" width=\"1999\" height=\"1286\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2022\/11\/woocommerce-theme-store.jpg\" alt=\"Optionen f\u00fcr Child-Themes im offiziellen WooCommerce-Store\" class=\"wp-image-37883 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/11\/woocommerce-theme-store.jpg.webp 1999w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/11\/woocommerce-theme-store-300x193.jpg 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/11\/woocommerce-theme-store-1024x659.jpg 1024w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/11\/woocommerce-theme-store-768x494.jpg 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/11\/woocommerce-theme-store-1536x988.jpg 1536w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/11\/woocommerce-theme-store-600x386.jpg.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/11\/woocommerce-theme-store-750x482.jpg.webp 750w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/11\/woocommerce-theme-store-100x64.jpg 100w\" data-sizes=\"(max-width: 1999px) 100vw, 1999px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1999px; --smush-placeholder-aspect-ratio: 1999\/1286;\" \/><\/figure><\/div>\n\n\n<p>Sie k\u00f6nnen mehrere Child-Themes aus <a href=\"https:\/\/woocommerce.com\/product-category\/themes\/storefront-child-theme-themes\/\" target=\"_blank\" rel=\"noopener\">dem offiziellen WooCommerce-Store<\/a> oder von anderen <a href=\"https:\/\/themeforest.net\/category\/wordpress\/ecommerce\/woocommerce\" target=\"_blank\" rel=\"noopener\">Websites wie ThemeForest<\/a> herunterladen. Es ist jedoch m\u00f6glich, dass keines der vorhandenen Child-Themes Ihren Bed\u00fcrfnissen entspricht oder Sie einfach ein einzigartiges Aussehen kreieren m\u00f6chten. Dar\u00fcber hinaus m\u00f6chten Sie vielleicht kein Geld f\u00fcr ein Premium-Theme ausgeben, wenn Sie denken, dass Sie es selbst besser machen k\u00f6nnten.<\/p>\n\n\n\n<p>In <a href=\"https:\/\/woocommerce.com\/2015\/07\/why-child-themes-matter\/\" target=\"_blank\" rel=\"noopener\">einem Beitrag im offiziellen WooCommerce-Blog<\/a> diskutieren die Entwickler des Plugins die h\u00e4ufigsten Gr\u00fcnde f\u00fcr die Verwendung eines Child-Themes f\u00fcr Ihren Online-Shop:<\/p>\n\n\n\n<p>\u201eDas Ziel unserer eigenen Storefront Child-Themes ist es, ein perfektes Shop-Erlebnis f\u00fcr Ihre spezielle Nische zu bieten. Nach der Installation von <a href=\"https:\/\/woocommerce.com\/products\/galleria\/\" target=\"_blank\" rel=\"noopener\">Galleria<\/a> und ohne \u00c4nderung irgendwelcher Einstellungen haben Sie sofort einen Shop, der sich f\u00fcr den Verkauf von hochwertigen Modeartikeln eignet. Mit <a href=\"https:\/\/woocommerce.com\/products\/proshop\/\" target=\"_blank\" rel=\"noopener\">ProShop<\/a> k\u00f6nnen Sie schnell einen stilvollen Sportgesch\u00e4ft einrichten.\u201c<\/p>\n\n\n\n<p>Der eigentliche Prozess des <a href=\"https:\/\/www.dreamhost.com\/blog\/install-wordpress-child-theme\/\" target=\"_blank\" rel=\"noopener\">Erstellens eines Child-Themes<\/a> ist derselbe, egal ob Sie eines speziell f\u00fcr WooCommerce oder f\u00fcr eine allgemeinere WordPress-Website erstellen. Sie m\u00fcssen jedoch den Zweck Ihres Stores im Kopf behalten, w\u00e4hrend Sie Ihr Child-Theme anpassen. Eine E-Commerce-Website erfordert schlie\u00dflich eine andere Designphilosophie als ein Blog. Lassen Sie uns sehen, wie dieser Prozess in der Praxis aussieht!<\/p>\n\n\n\n<h2 id=\"h-how-to-create-a-woocommerce-child-theme-in-5-steps\" class=\"wp-block-heading\"><b>Wie man ein WooCommerce Child-Theme in 5 Schritten erstellt<\/b><\/h2>\n\n\n\n<p>Jetzt werden wir Ihnen zeigen, wie Sie ein WooCommerce Child-Theme erstellen. In diesem Beispiel erstellen wir ein einfaches Theme, das Storefront als Eltern-Theme verwendet, obwohl Sie jedes Theme als Basis verwenden k\u00f6nnen.<\/p>\n\n\n\n<p>Wir zeigen Ihnen, wie der Prozess funktioniert, wenn Sie von Grund auf beginnen. Wenn Sie jedoch einige dieser Schritte \u00fcberspringen und direkt mit der Anpassung Ihrer Website beginnen m\u00f6chten, k\u00f6nnen Sie auch ein <a href=\"https:\/\/github.com\/stuartduff\/storefront-child-theme\" target=\"_blank\" rel=\"noopener\">Beispiel-Storefront-Child-Theme<\/a> herunterladen und installieren.<\/p>\n\n\n\n<p>Schlie\u00dflich empfehlen wir dringend, vor dem weiteren Vorgehen <a href=\"https:\/\/www.dreamhost.com\/blog\/back-up-wordpress-website\/\" target=\"_blank\" rel=\"noopener\">eine Sicherungskopie Ihrer Website zu erstellen<\/a>. Dies wird Ihren Shop sicher halten, falls w\u00e4hrend des Entwicklungsprozesses etwas kaputt geht.<\/p>\n\n\n\n<p>Es ist auch klug, eine <a href=\"https:\/\/www.dreamhost.com\/blog\/de\/anfangerleitfaden-zum-staging-von-websites\/\" target=\"_blank\" rel=\"noopener\">Staging-Umgebung zu nutzen<\/a>, um Ihr Child-Theme zu erstellen und anzupassen. Nachdem Sie diese Sicherheitsvorkehrungen getroffen haben, k\u00f6nnen Sie mit dem ersten Schritt beginnen!<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-step-1-make-a-folder-for-your-woocommerce-child-theme\"><b>Schritt 1: Erstellen Sie einen Ordner f\u00fcr Ihr WooCommerce Child-Theme<\/b><\/h3>\n\n\n\n<p>Das Erste, was Sie tun m\u00fcssen, ist das Erstellen des Ordners, der Ihr Thema enthalten wird. Wenn Sie das Child-Theme direkt zu einer bestehenden Website hinzuf\u00fcgen, ist die beste Methode dies <a href=\"https:\/\/help.dreamhost.com\/hc\/en-us\/articles\/115000675027\" target=\"_blank\" rel=\"noopener\">\u00fcber SFTP<\/a> zu tun. Dies k\u00f6nnen Sie mit einer kostenlosen Anwendung wie <a href=\"https:\/\/filezilla-project.org\/\" target=\"_blank\" rel=\"noopener\">FileZilla<\/a> machen.<\/p>\n\n\n\n<p>Sobald Sie das Programm gestartet und ausgef\u00fchrt haben, loggen Sie sich mit Ihren Hosting-Anmeldeinformationen auf Ihrer Website ein. Dann m\u00fcssen Sie zum <i>wp-content\/themes\/<\/i> Ordner navigieren. Dort sind die Themes Ihrer Website installiert.<\/p>\n\n\n\n<p>Alles, was Sie tun m\u00fcssen, ist einen neuen Ordner innerhalb dieses zu erstellen:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" width=\"1086\" height=\"488\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2022\/11\/wordpress-themes-folder-via-ftp.png\" alt=\"der WordPress-Themes-Ordner im FTP-Client\" class=\"wp-image-37886 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/11\/wordpress-themes-folder-via-ftp.png.webp 1086w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/11\/wordpress-themes-folder-via-ftp-300x135.png 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/11\/wordpress-themes-folder-via-ftp-1024x460.png 1024w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/11\/wordpress-themes-folder-via-ftp-768x345.png 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/11\/wordpress-themes-folder-via-ftp-600x270.png.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/11\/wordpress-themes-folder-via-ftp-750x337.png.webp 750w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/11\/wordpress-themes-folder-via-ftp-100x45.png 100w\" data-sizes=\"(max-width: 1086px) 100vw, 1086px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1086px; --smush-placeholder-aspect-ratio: 1086\/488;\" \/><\/figure><\/div>\n\n\n<p>Beim Erstellen eines Child-Themes ist es am besten, ihm einen Namen zu geben, der den Eltern widerspiegelt. Zum Beispiel erstellen wir ein Child-Theme f\u00fcr Storefront, daher nennen wir unseren Ordner \u201estorefront-child\u201c.<\/p>\n\n\n\n<p>Das Erste, was Sie erstellen und in diesen Ordner einf\u00fcgen m\u00fcssen, ist eine einfache Textdatei namens <a href=\"https:\/\/www.dreamhost.com\/blog\/de\/leitfaden-zu-wp-funktionen\/\" target=\"_blank\" rel=\"noopener\"><i>functions.php<\/i><\/a>. Dies ist eine wichtige Kerndatei, die bestimmt, wie Ihre Website aussieht und funktioniert. Die meisten <a href=\"https:\/\/developer.wordpress.org\/themes\/advanced-topics\/child-themes\/\" target=\"_blank\" rel=\"noopener\">Child-Themes<\/a> k\u00f6nnen jedoch die Funktionen der Datei des Eltern-Themas verwenden und ben\u00f6tigen keine eigene.<\/p>\n\n\n\n<p>Aus diesem Grund kann diese Datei vorerst leer bleiben. Erstellen Sie einfach eine Textdatei mit dem Namen <i>functions.php<\/i> und speichern Sie sie im Ordner Ihres Child-Themes:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" width=\"1108\" height=\"564\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2022\/11\/wordpress-child-theme-location-via-ftp-client.png\" alt=\"Standort des WordPress Child-Themes im FTP-Client\" class=\"wp-image-37884 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/11\/wordpress-child-theme-location-via-ftp-client.png.webp 1108w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/11\/wordpress-child-theme-location-via-ftp-client-300x153.png 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/11\/wordpress-child-theme-location-via-ftp-client-1024x521.png 1024w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/11\/wordpress-child-theme-location-via-ftp-client-768x391.png 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/11\/wordpress-child-theme-location-via-ftp-client-600x305.png.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/11\/wordpress-child-theme-location-via-ftp-client-750x382.png.webp 750w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/11\/wordpress-child-theme-location-via-ftp-client-100x51.png 100w\" data-sizes=\"(max-width: 1108px) 100vw, 1108px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1108px; --smush-placeholder-aspect-ratio: 1108\/564;\" \/><\/figure><\/div>\n\n\n<p>Ihr Theme ist jetzt fast bereit, aktiviert und verwendet zu werden. Zuerst wird jedoch ein Stylesheet ben\u00f6tigt.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-step-2-create-your-child-theme-s-stylesheet\"><b>Schritt 2: Erstellen Sie Ihr Stylesheet f\u00fcr Child-Themes<\/b><\/h3>\n\n\n\n<p>Die n\u00e4chste Datei, die Sie erstellen m\u00fcssen, ist das <a href=\"https:\/\/wordpress.org\/support\/article\/css\/\" target=\"_blank\" rel=\"noopener\">Cascading Style Sheet (CSS)<\/a> Ihres Themes. Diese Datei definiert die Stile, die auf die Seiten und Inhalte Ihrer Website angewendet werden. Mit anderen Worten, sie erm\u00f6glicht Ihnen, das Aussehen einzelner Elemente auf Ihrer Website zu spezifizieren. Wenn Leute \u00fcber das Aktualisieren von Stilen sprechen, beziehen sie sich normalerweise auf das Aktualisieren einer Website-CSS-Datei.<\/p>\n\n\n\n<p>Ihr Eltern-Theme enth\u00e4lt bereits ein Stylesheet, aber die CSS eines Child-Themes kann verwendet werden, um diese Stile zu \u00fcberschreiben. Wir werden uns sp\u00e4ter ansehen, wie genau das funktioniert.<\/p>\n\n\n\n<p>Zun\u00e4chst m\u00fcssen Sie nur die CSS-Datei erstellen. F\u00fcgen Sie dazu erneut eine Textdatei zu Ihrem <i>wp-content\/themes\/storefront-child<\/i> Ordner (oder welchen Namen Sie auch immer f\u00fcr Ihr eigenes Child-Theme verwendet haben) hinzu. Diese sollte <i>style.css<\/i> genannt werden:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" width=\"864\" height=\"450\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2022\/11\/wordpress-child-theme.png\" alt=\"Standort des WordPress Child-Themes im FTP-Client\" class=\"wp-image-37885 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/11\/wordpress-child-theme.png.webp 864w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/11\/wordpress-child-theme-300x156.png 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/11\/wordpress-child-theme-768x400.png 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/11\/wordpress-child-theme-600x313.png.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/11\/wordpress-child-theme-750x391.png.webp 750w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/11\/wordpress-child-theme-100x52.png 100w\" data-sizes=\"(max-width: 864px) 100vw, 864px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 864px; --smush-placeholder-aspect-ratio: 864\/450;\" \/><\/figure><\/div>\n\n\n<p>Sie m\u00fcssen auch einige grundlegende Informationen hinzuf\u00fcgen. Kopieren Sie den folgenden Ausschnitt und f\u00fcgen Sie ihn in Ihre neue <i>style.css<\/i> Datei ein:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">\/*\nTheme Name: Storefront Child\nTheme URI: http:\/\/example.com\/storefront-child\/\nDescription: Mein erstes WooCommerce Child-Theme\nAuthor: Ihr Name\nAuthor URI: http:\/\/example.com\nVersion: 1.0.0\nLicense: GNU General Public License v2 oder sp\u00e4ter\nLicense URI: http:\/\/www.gnu.org\/licenses\/gpl-2.0.html\n*\/<\/pre>\n\n\n\n<p>Dies sind die Details zu Ihrem Theme, die Sie sehen werden, wenn Sie es in einem Theme-Verzeichnis oder in Ihrem WordPress-Dashboard anzeigen. F\u00fchlen Sie sich frei, die Platzhalterdaten durch Informationen zu ersetzen, die spezifischer f\u00fcr Sie und Ihr Theme sind.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-step-3-configure-the-child-theme-to-inherit-the-parent-theme-s-styles\"><b>Schritt 3: Konfigurieren Sie das Child-Theme, um die Styles des Eltern-Themes zu erben<\/b><\/h3>\n\n\n\n<p>Wie wir bereits erw\u00e4hnt haben, sollte Ihr Child-Theme die Standardstile des Eltern-Themes verwenden. Sie m\u00fcssen jedoch auch die Stile \u00fcberschreiben, die Sie \u00e4ndern m\u00f6chten. Das mag kompliziert klingen \u2013 und <a href=\"https:\/\/www.dreamhost.com\/blog\/why-you-should-still-learn-css\/\" target=\"_blank\" rel=\"noopener\">CSS kann tats\u00e4chlich knifflig werden<\/a> \u2014 aber im Kern wird das Child immer die Stile des Eltern-Themes verwenden, es sei denn, es enth\u00e4lt speziell einen Ersatz.<\/p>\n\n\n\n<p>Zum Beispiel, nehmen wir an, Ihr Eltern-Theme definiert den Stil f\u00fcr h1-Header-Elemente als 20px und rot. Wenn die <i>style.css<\/i>-Datei des Child-Themes keinen Eintrag f\u00fcr H1-Header enth\u00e4lt, dann wird der Stil des Eltern-Themes auf alle H1-Inhalte angewendet. Wenn wir jedoch einen H1-Stil zum Stylesheet des Child-Themes hinzuf\u00fcgen w\u00fcrden, der diese \u00dcberschriften als 18px und blau definiert, w\u00fcrde es die Anweisungen des Eltern-Themes \u00fcberschreiben.<\/p>\n\n\n\n<p>Diese Funktionalit\u00e4t zu Ihrem Child-Theme hinzuzuf\u00fcgen ist tats\u00e4chlich sehr einfach. Alles, was Sie tun m\u00fcssen, ist, Ihr Eltern-Theme in der Stylesheet Ihres Childs zu referenzieren.<\/p>\n\n\n\n<p>F\u00fcgen Sie einfach den folgenden Ausschnitt nach den Informationen hinzu, die Sie zuvor in die <i>style.css<\/i> Datei eingef\u00fcgt haben:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">Vorlage: storefront<\/pre>\n\n\n\n<p>Dieser Code definiert das Eltern-Theme und stellt sicher, dass Ihr Child-Theme die Storefront-Styles verwendet, wo immer Sie keinen Ersatz angegeben haben. Wenn Sie ein Child f\u00fcr ein anderes Theme erstellen, k\u00f6nnen Sie stattdessen einfach den Namen des Ordners verwenden.<\/p>\n\n\n\n<div class=\"article-newsletter article-newsletter--gradient\">\n\n\n<h2>Get Content Delivered Straight to Your Inbox<\/h2><p>Subscribe now to receive all the latest updates, delivered directly to your inbox.<\/p><form class=\"nwsl-form\" id=\"newsletter_block_\" novalidate><div class=\"messages\"><\/div><div class=\"form-group\"><label for=\"input_newsletter_block_\"><input type=\"email\"name=\"email\"id=\"input_newsletter_block_\"placeholder=\"Enter your email address\"novalidatedisabled=\"disabled\"\/><\/label><button type=\"submit\"class=\"btn btn--brand\"disabled=\"disabled\"><span>Sign Me Up!<\/span><svg width=\"21\" height=\"14\" viewBox=\"0 0 21 14\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n<path d=\"M13.8523 0.42524L12.9323 1.34521C12.7095 1.56801 12.7132 1.9304 12.9404 2.14865L16.7241 5.7823H0.5625C0.251859 5.7823 0 6.03416 0 6.3448V7.6573C0 7.96794 0.251859 8.2198 0.5625 8.2198H16.7241L12.9405 11.8535C12.7132 12.0717 12.7095 12.4341 12.9323 12.6569L13.8523 13.5769C14.072 13.7965 14.4281 13.7965 14.6478 13.5769L20.8259 7.39879C21.0456 7.17913 21.0456 6.82298 20.8259 6.60327L14.6477 0.42524C14.4281 0.205584 14.0719 0.205584 13.8523 0.42524Z\" fill=\"white\"\/>\n<\/svg>\n<\/button><\/div><\/form><\/div>\n\n\n<h3 class=\"wp-block-heading\" id=\"h-step-4-activate-the-child-theme\"><b>Schritt 4: Das Child-Theme aktivieren<\/b><\/h3>\n\n\n\n<p>An diesem Punkt ist Ihr Child-Theme nun technisch einsatzbereit. Es ist so konfiguriert, dass es auf Ihrer Website funktioniert, also aktivieren wir es und sehen, wie es aussieht.<\/p>\n\n\n\n<p>Gehen Sie zu <i>Appearance &gt; Themes<\/i> in Ihrem WordPress Armaturenbrett, und Sie werden Ihr Child-Theme bereits installiert sehen:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" width=\"1200\" height=\"408\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2022\/11\/woocommerce-child-theme.jpg\" alt=\"Aktivierung Ihres WooCommerce Child-Themes in WordPress\" class=\"wp-image-37881 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/11\/woocommerce-child-theme.jpg.webp 1200w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/11\/woocommerce-child-theme-300x102.jpg 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/11\/woocommerce-child-theme-1024x348.jpg 1024w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/11\/woocommerce-child-theme-768x261.jpg 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/11\/woocommerce-child-theme-600x204.jpg.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/11\/woocommerce-child-theme-750x255.jpg.webp 750w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/11\/woocommerce-child-theme-100x34.jpg 100w\" data-sizes=\"(max-width: 1200px) 100vw, 1200px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1200px; --smush-placeholder-aspect-ratio: 1200\/408;\" \/><\/figure><\/div>\n\n\n<p>W\u00e4hlen Sie <i>Aktivieren<\/i>, um es zum aktuellen Theme Ihrer Website zu machen. Sie k\u00f6nnen es jetzt von der Frontend-Seite aus vorschauen:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" width=\"1200\" height=\"630\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2022\/11\/woocommerce-child-theme-preview-store.jpg\" alt=\"Bearbeitung Ihres WooCommerce Child-Themes\" class=\"wp-image-37879 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/11\/woocommerce-child-theme-preview-store.jpg.webp 1200w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/11\/woocommerce-child-theme-preview-store-300x158.jpg 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/11\/woocommerce-child-theme-preview-store-1024x538.jpg 1024w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/11\/woocommerce-child-theme-preview-store-768x403.jpg 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/11\/woocommerce-child-theme-preview-store-600x315.jpg.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/11\/woocommerce-child-theme-preview-store-750x394.jpg.webp 750w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/11\/woocommerce-child-theme-preview-store-100x53.jpg 100w\" data-sizes=\"(max-width: 1200px) 100vw, 1200px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1200px; --smush-placeholder-aspect-ratio: 1200\/630;\" \/><\/figure><\/div>\n\n\n<p>Wie Sie sehen k\u00f6nnen, sieht es im Moment genau so aus wie das urspr\u00fcngliche Thema. W\u00e4hrend das Child-Theme aktiv ist, werden lediglich die Stile aus Ihrem Eltern-Theme \u00fcbernommen. Um sein Erscheinungsbild anzupassen, m\u00fcssen Sie kreativ mit dem Stylesheet Ihres Child-Themes werden.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-step-5-add-styles-to-the-child-theme\"><b>Schritt 5: F\u00fcgen Sie Styles dem Child-Theme hinzu<\/b><\/h3>\n\n\n\n<p>Endlich ist es an der Zeit, Ihr Child-Theme zu gestalten. Wie Sie dies tun, h\u00e4ngt von Ihnen, Ihrer Kreativit\u00e4t und davon ab, wie Sie Ihren Shop gestalten m\u00f6chten. Lassen Sie uns jedoch anhand eines Beispiels durchgehen, was Sie tun k\u00f6nnen.<\/p>\n\n\n\n<p>Um zu veranschaulichen, wie das Bearbeiten Ihres Child-Themes funktioniert, werden wir das Aussehen der Buttons unseres Shops \u00e4ndern. Derzeit erscheinen sie grau mit schwarzem Text, aber wir k\u00f6nnten dieses Styling aktualisieren, um sie auff\u00e4lliger zu machen:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" width=\"1200\" height=\"530\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2022\/11\/woocommerce-child-theme-preview.jpg\" alt=\"Bearbeiten Ihres WooCommerce Child-Themes\" class=\"wp-image-37880 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/11\/woocommerce-child-theme-preview.jpg.webp 1200w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/11\/woocommerce-child-theme-preview-300x133.jpg 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/11\/woocommerce-child-theme-preview-1024x452.jpg 1024w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/11\/woocommerce-child-theme-preview-768x339.jpg 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/11\/woocommerce-child-theme-preview-600x265.jpg.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/11\/woocommerce-child-theme-preview-750x331.jpg.webp 750w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/11\/woocommerce-child-theme-preview-100x44.jpg 100w\" data-sizes=\"(max-width: 1200px) 100vw, 1200px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1200px; --smush-placeholder-aspect-ratio: 1200\/530;\" \/><\/figure><\/div>\n\n\n<p>\u00d6ffnen Sie erneut die Datei <i>style.css<\/i> Ihres Child-Themes und f\u00fcgen Sie den folgenden Code nach dem letzten <i>*\/<\/i> im Header der Datei hinzu:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">a.button,\nbutton.button,\ninput.button,\n#review_form #submit {\nbackground: pink;\ncolor: red;\n}<\/pre>\n\n\n\n<p>Wenn Sie Ihre Datei speichern und sie jetzt im Frontend anzeigen, werden Sie die \u00c4nderung in Aktion sehen. Die Schaltfl\u00e4chen werden nun ein lebhaftes Pink mit rotem Text sein:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" width=\"1200\" height=\"532\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2022\/11\/editing-woocommerce-child-theme.jpg\" alt=\"Bearbeitung Ihres WooCommerce Child-Themes\" class=\"wp-image-37878 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/11\/editing-woocommerce-child-theme.jpg.webp 1200w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/11\/editing-woocommerce-child-theme-300x133.jpg 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/11\/editing-woocommerce-child-theme-1024x454.jpg 1024w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/11\/editing-woocommerce-child-theme-768x340.jpg 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/11\/editing-woocommerce-child-theme-600x266.jpg.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/11\/editing-woocommerce-child-theme-750x333.jpg.webp 750w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/11\/editing-woocommerce-child-theme-100x44.jpg 100w\" data-sizes=\"(max-width: 1200px) 100vw, 1200px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1200px; --smush-placeholder-aspect-ratio: 1200\/532;\" \/><\/figure><\/div>\n\n\n<p>Sie k\u00f6nnen auch \u00c4nderungen an Ihren <a href=\"https:\/\/www.dreamhost.com\/blog\/de\/wordpress-vorlagen-und-vorlagenteile\/\" target=\"_blank\" rel=\"noopener\">Theme-Vorlagendateien<\/a> vornehmen. Sie m\u00fcssen nur die Vorlagendatei, die Sie \u00e4ndern m\u00f6chten, wie zum Beispiel <i>header.php<\/i>, von Ihrem Eltern-Theme in Ihren Child-Theme-Ordner kopieren.<\/p>\n\n\n\n<p>Allerdings m\u00fcssen Sie auch einige \u00c4nderungen vornehmen, um anzugeben, welche Funktion WordPress verwendet, um auf die <a href=\"https:\/\/developer.wordpress.org\/themes\/advanced-topics\/child-themes\/#adding-template-files\" target=\"_blank\" rel=\"noopener\">Vorlagendateien zu verweisen<\/a>. Dies erfordert die Verwendung der Funktion <span style=\"font-family: 'courier new', courier, monospace;\">get_stylesheet_directory();<\/span> anstelle von <span style=\"font-family: 'courier new', courier, monospace;\">get_template_directory()<\/span>, um auf Ihre Vorlagen zu verweisen.<\/p>\n\n\n\n<p>Um mehr dar\u00fcber zu erfahren, wie man das macht, k\u00f6nnen Sie alles \u00fcber die <a href=\"https:\/\/docs.woocommerce.com\/document\/template-structure\/\" target=\"_blank\" rel=\"noopener\">Vorlagen, die WooCommerce verwendet<\/a>, lesen.<\/p>\n\n\n\n<p>An dieser Stelle haben Sie ein WooCommerce Child-Theme erstellt! Nat\u00fcrlich gibt es noch viel mehr, was Sie tun k\u00f6nnen, aber jetzt wissen Sie, wie Sie anfangen k\u00f6nnen zu basteln. Wir empfehlen Ihnen, sich in <a href=\"https:\/\/www.dreamhost.com\/blog\/de\/css-lernen\/\" target=\"_blank\" rel=\"noopener\">CSS einzuarbeiten<\/a>, um das Beste aus Ihrem Styling herauszuholen!<\/p>\n\n\n\n<h2 id=\"h-create-a-woocommerce-child-theme\" class=\"wp-block-heading\"><b>Erstellen Sie ein WooCommerce Child-Theme<\/b><\/h2>\n\n\n\n<p><a href=\"https:\/\/wordpress.org\/plugins\/woocommerce\/\" target=\"_blank\" rel=\"noopener\">WooCommerce<\/a> erleichtert das Erstellen eines Online-Shops, und Sie k\u00f6nnen sogar das Aussehen mit <a href=\"https:\/\/woocommerce.com\/storefront\/\" target=\"_blank\" rel=\"noopener\">dem Storefront-Theme<\/a> oder einem von vielen <a href=\"https:\/\/themeforest.net\/category\/wordpress\/ecommerce\/woocommerce\" target=\"_blank\" rel=\"noopener\">benutzerdefinierten Themes<\/a> \u00e4ndern.<\/p>\n\n\n\n<p>Sie m\u00fcssen sich jedoch nicht auf die Kreativit\u00e4t anderer verlassen. Das Erstellen Ihres eigenen WooCommerce Child-Themes ist nicht so schwierig, wie Sie vielleicht denken, und es gibt Ihnen nahezu vollst\u00e4ndige Kontrolle \u00fcber das Aussehen und die Funktionalit\u00e4t Ihres Gesch\u00e4fts.<\/p>\n\n\n\n<p>Frohes Verkaufen!<\/p>\n\n\n\n\n<div\n\tclass=\"article-cta-shared article-cta-small\"\n>\n    <div class=\"tr-img-wrap-outer jsLoading\"><img decoding=\"async\" class=\"js-img-lazy \" src=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/themes\/blog2018\/assets\/img\/lazy-loading-transparent.webp\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/themes\/blog2018\/assets\/img\/article-small-ad-cta-placeholder.webp 1x, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/themes\/blog2018\/assets\/img\/article-small-ad-cta-placeholder-x2.webp 2x\"  alt=\"Ad background image\" \/><\/div>\n\n\n\n\n  <div class=\"content-btm\">\n    <h2\n      class=\"h2--md\"\n    >\n      Ihr Gesch\u00e4ft verdient WooCommerce Hosting\n    <\/h2>\n    <p\n      class=\"p--md\"\n    >\n      Verkaufen Sie jederzeit, \u00fcberall und alles auf der weltweit gr\u00f6\u00dften E-Commerce-Plattform.\n    <\/p>\n\n            <a\n            href=\"https:\/\/www.dreamhost.com\/de\/hosting\/online-shop\/\"\n                        class=\"btn btn--white-outline btn--sm btn--round\"\n                                    target=\"_blank\"\n            rel=\"noopener noreferrer\"\n            >\n                            Tarife anzeigen                    <\/a>\n\n  <\/div>\n<\/div>\n\n","protected":false},"excerpt":{"rendered":"<p>Lassen Sie uns sagen, Sie haben einen WooCommerce-Shop, der bereits l\u00e4uft. Wenn Sie das offizielle Storefront-Theme verwenden, k\u00f6nnte es sogar ziemlich professionell aussehen. Sie m\u00f6chten jedoch m\u00f6glicherweise das Erscheinungsbild Ihres WooCommerce-Shops anpassen, um es Ihrer Vision anzupassen. Die beste L\u00f6sung ist oft, ein WooCommerce Child-Theme zu erstellen. Das liegt daran, dass ein Child [\u2026]<\/p>\n","protected":false},"author":1062,"featured_media":37875,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_yoast_wpseo_metadesc":"","toc_headlines":"[[\"h-a-quick-look-at-woocommerce-themes\",\"Ein schneller Blick auf WooCommerce-Themes\"],[\"h-why-you-might-want-to-create-a-woocommerce-child-theme\",\"Warum Sie ein WooCommerce Child-Theme erstellen m\u00f6chten\"],[\"h-how-to-create-a-woocommerce-child-theme-in-5-steps\",\"Wie man ein WooCommerce Child-Theme in 5 Schritten erstellt\"],[\"h-create-a-woocommerce-child-theme\",\"Erstellen Sie ein WooCommerce Child-Theme\"]]","hide_toc":false,"footnotes":""},"categories":[14525,14495,14511],"tags":[],"class_list":["post-54934","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-online-verkauf-de","category-tutorials-de","category-wordpress-de"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v26.3 (Yoast SEO v27.4) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Wie man ein WooCommerce Child-Theme erstellt - DreamHost Blog<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www-dev.dreamhost.com\/blog\/de\/erstellen-eines-woocommerce-child-themes\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Wie man ein WooCommerce Child-Theme erstellt\" \/>\n<meta property=\"og:description\" content=\"Lassen Sie uns sagen, Sie haben einen WooCommerce-Shop, der bereits l\u00e4uft. Wenn Sie das offizielle Storefront-Theme verwenden, k\u00f6nnte es sogar ziemlich professionell aussehen. Sie m\u00f6chten jedoch m\u00f6glicherweise das Erscheinungsbild Ihres WooCommerce-Shops anpassen, um es Ihrer Vision anzupassen. Die beste L\u00f6sung ist oft, ein WooCommerce Child-Theme zu erstellen. Das liegt daran, dass ein Child [\u2026]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www-dev.dreamhost.com\/blog\/de\/erstellen-eines-woocommerce-child-themes\/\" \/>\n<meta property=\"og:site_name\" content=\"DreamHost Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/DreamHost\/\" \/>\n<meta property=\"article:published_time\" content=\"2022-11-03T14:00:36+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-01-16T19:31:37+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2022\/11\/WooCommerce-Child-Themes-Feature.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"900\" \/>\n\t<meta property=\"og:image:height\" content=\"598\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Jason Cosper\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@dreamhost\" \/>\n<meta name=\"twitter:site\" content=\"@dreamhost\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Jason Cosper\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"10 minutes\" \/>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Wie man ein WooCommerce Child-Theme erstellt - DreamHost Blog","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www-dev.dreamhost.com\/blog\/de\/erstellen-eines-woocommerce-child-themes\/","og_locale":"en_US","og_type":"article","og_title":"Wie man ein WooCommerce Child-Theme erstellt","og_description":"Lassen Sie uns sagen, Sie haben einen WooCommerce-Shop, der bereits l\u00e4uft. Wenn Sie das offizielle Storefront-Theme verwenden, k\u00f6nnte es sogar ziemlich professionell aussehen. Sie m\u00f6chten jedoch m\u00f6glicherweise das Erscheinungsbild Ihres WooCommerce-Shops anpassen, um es Ihrer Vision anzupassen. Die beste L\u00f6sung ist oft, ein WooCommerce Child-Theme zu erstellen. Das liegt daran, dass ein Child [\u2026]","og_url":"https:\/\/www-dev.dreamhost.com\/blog\/de\/erstellen-eines-woocommerce-child-themes\/","og_site_name":"DreamHost Blog","article_publisher":"https:\/\/www.facebook.com\/DreamHost\/","article_published_time":"2022-11-03T14:00:36+00:00","article_modified_time":"2025-01-16T19:31:37+00:00","og_image":[{"width":900,"height":598,"url":"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2022\/11\/WooCommerce-Child-Themes-Feature.jpg","type":"image\/jpeg"}],"author":"Jason Cosper","twitter_card":"summary_large_image","twitter_creator":"@dreamhost","twitter_site":"@dreamhost","twitter_misc":{"Written by":"Jason Cosper","Est. reading time":"10 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www-dev.dreamhost.com\/blog\/de\/erstellen-eines-woocommerce-child-themes\/#article","isPartOf":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/de\/erstellen-eines-woocommerce-child-themes\/"},"author":{"name":"Jason Cosper","@id":"https:\/\/www-dev.dreamhost.com\/blog\/#\/schema\/person\/2273b8bf7336df78f6d99a89c17253c4"},"headline":"Wie man ein WooCommerce Child-Theme erstellt","datePublished":"2022-11-03T14:00:36+00:00","dateModified":"2025-01-16T19:31:37+00:00","mainEntityOfPage":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/de\/erstellen-eines-woocommerce-child-themes\/"},"wordCount":1993,"publisher":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/#organization"},"image":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/de\/erstellen-eines-woocommerce-child-themes\/#primaryimage"},"thumbnailUrl":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/11\/WooCommerce-Child-Themes-Feature.jpg","articleSection":["Online-Verkauf","Tutorials","WordPress"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www-dev.dreamhost.com\/blog\/de\/erstellen-eines-woocommerce-child-themes\/","url":"https:\/\/www-dev.dreamhost.com\/blog\/de\/erstellen-eines-woocommerce-child-themes\/","name":"Wie man ein WooCommerce Child-Theme erstellt - DreamHost Blog","isPartOf":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/de\/erstellen-eines-woocommerce-child-themes\/#primaryimage"},"image":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/de\/erstellen-eines-woocommerce-child-themes\/#primaryimage"},"thumbnailUrl":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/11\/WooCommerce-Child-Themes-Feature.jpg","datePublished":"2022-11-03T14:00:36+00:00","dateModified":"2025-01-16T19:31:37+00:00","breadcrumb":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/de\/erstellen-eines-woocommerce-child-themes\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www-dev.dreamhost.com\/blog\/de\/erstellen-eines-woocommerce-child-themes\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www-dev.dreamhost.com\/blog\/de\/erstellen-eines-woocommerce-child-themes\/#primaryimage","url":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/11\/WooCommerce-Child-Themes-Feature.jpg","contentUrl":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/11\/WooCommerce-Child-Themes-Feature.jpg","width":900,"height":598,"caption":"how to create a WooCommerce child theme"},{"@type":"BreadcrumbList","@id":"https:\/\/www-dev.dreamhost.com\/blog\/de\/erstellen-eines-woocommerce-child-themes\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/dhblog.dream.press\/blog\/"},{"@type":"ListItem","position":2,"name":"Wie man ein WooCommerce Child-Theme erstellt"}]},{"@type":"WebSite","@id":"https:\/\/www-dev.dreamhost.com\/blog\/#website","url":"https:\/\/www-dev.dreamhost.com\/blog\/","name":"DreamHost Blog","description":"","publisher":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www-dev.dreamhost.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www-dev.dreamhost.com\/blog\/#organization","name":"DreamHost","url":"https:\/\/www-dev.dreamhost.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www-dev.dreamhost.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/dhblog.dream.press\/blog\/wp-content\/uploads\/2019\/01\/dh_logo-blue-2.png","contentUrl":"https:\/\/dhblog.dream.press\/blog\/wp-content\/uploads\/2019\/01\/dh_logo-blue-2.png","width":1200,"height":168,"caption":"DreamHost"},"image":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/DreamHost\/","https:\/\/x.com\/dreamhost","https:\/\/www.instagram.com\/dreamhost\/","https:\/\/www.linkedin.com\/company\/dreamhost\/","https:\/\/www.youtube.com\/user\/dreamhostusa"]},{"@type":"Person","@id":"https:\/\/www-dev.dreamhost.com\/blog\/#\/schema\/person\/2273b8bf7336df78f6d99a89c17253c4","name":"Jason Cosper","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/02\/IMG_4807-scaled.jpeg","url":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/02\/IMG_4807-scaled.jpeg","contentUrl":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/02\/IMG_4807-scaled.jpeg","caption":"Jason Cosper"},"description":"Jason is DreamHost\u2019s WordPress Product Advocate, based out of Bakersfield, CA. He is currently working on making our DreamPress product even better. In his free time, he likes to curl up on the couch and watch scary movies with his wife Sarah and three very small dogs. Follow him on Twitter.","url":"https:\/\/www-dev.dreamhost.com\/blog\/author\/jasoncosper\/"}]}},"lang":"de","translations":{"de":54934,"es":37888,"en":37872,"pl":52883,"uk":54949,"ru":55033,"pt":55065,"it":67883,"fr":69356,"nl":69388},"pll_sync_post":[],"_links":{"self":[{"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/posts\/54934","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/users\/1062"}],"replies":[{"embeddable":true,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/comments?post=54934"}],"version-history":[{"count":4,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/posts\/54934\/revisions"}],"predecessor-version":[{"id":62825,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/posts\/54934\/revisions\/62825"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/media\/37875"}],"wp:attachment":[{"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/media?parent=54934"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/categories?post=54934"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/tags?post=54934"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}