Vollständiger CSS-Anpassungsleitfaden für WooCommerce Storefront

Veröffentlicht: 2020-10-15

WooCommerce Storefront-CSS Mit mehr als 200.000 aktiven Installationen wird das Storefront-Theme von WooCommerce Core-Entwicklern entworfen, entwickelt und gepflegt. Es wird daher als offizielles WooCommerce-Theme bezeichnet.

Dieses Thema ist so konzipiert, dass es wie WooCommerce flexibel ist. Die neueste Version hat mehr als 40 Action-Hooks und mehr als 60 Filter-Hooks.

WooCommerce Storefront-CSS

Die Hauptfrage ist jedoch, wie Sie das Aussehen und Layout Ihres Themas optimieren können. Wenn Sie ein erfahrener WordPress-Benutzer sind, ist dies kein Problem. Wer sich nicht mit CSS und PHP die Hände schmutzig machen möchte, tut sich schwer, das Theme anzupassen. Für dieses Tutorial müssen Sie über Programmierkenntnisse verfügen. Wir werden die CSS-Regeln im Abschnitt Zusätzliches CSS über den Customizer hinzufügen.

Der Vorteil bei der Verwendung dieses Abschnitts besteht darin, dass Sie mit dem WordPress-Customizer in Echtzeit bearbeiten können. Sie können die von Ihnen vorgenommenen Änderungen sehen, bevor Sie Ihre Änderungen veröffentlichen können.

Erwähnenswert ist auch, dass das Storefront-Design beim Anpassen das aktive Design sein muss.

In diesem Beitrag stelle ich Ihnen die ultimative Anleitung zur CSS-Anpassung im Storefront-Design zur Verfügung. Der Trick besteht darin, das Element zu identifizieren, das Sie ändern müssen, und diesem Element eine Regel hinzuzufügen.

Vor diesem Hintergrund finden Sie hier einige der CSS-Regeln, die Sie für das Storefront-Design verwenden können.

1. Kopfzeilengröße anpassen

Hier werden wir wieder den Theme Customizer verwenden, aber wir werden etwas CSS-Code in den Abschnitt „Zusätzliches CSS“ schreiben.

Fügen Sie den folgenden Code hinzu:

 * Impressum */

#masthead.site-header {

    Höhe: 155px!Wichtig;

    Rand unten: 0px

}

/* Mobiles CSS für Masthead */

@media only screen und (max-width: 320px) {

    #masthead.site-header {

    Höhe: 80px!Wichtig;

    Rand unten: 0px;

}

}

/* Impressum-Menü */

.storefront-primary-navigation a, .cart-contents a {

    Rand: 0 0 0 0;

}

.main-navigation ul {

    padding:0 0 10px 4px!wichtig;

}

.main-navigation li {

    Höhe: 38px! wichtig;}

/* Mobiles CSS für das Masthead-Menü */

@media only screen und (max-width: 320px) {

.main-navigation ul {

    Hintergrund:#D6DDE4!Wichtig;

}

}

/* Header-Bereich */

.site-header {

Polsterung oben: 0,5 m;

}

.site-header .custom-logo-link-img, .site-header .site-logo-anchor-img, .site-header .site-logo-link-img {

Rand unten: -45px;

}

Hier ist das Ergebnis: Kopfzeilengröße anpassen

2. Entfernen Sie die Suchleiste aus der Kopfzeile des Themas

Fügen Sie diesen Code dem Abschnitt „Zusätzliches CSS“ hinzu.

 .site-header .widget_product_search {

Anzeige: keine;

}

Hier ist das Ergebnis: Suchleiste entfernen

3. Ändern Sie die Farbe des Kopfzeilenmenüs

Mit dem Customizer können wir die Kopfzeile mit den gewünschten Farben anpassen. Sie können dies tun, indem Sie zu Anpassen navigieren, dann zur Kopfzeile und die gewünschte Farbe auswählen.

Diese Option färbt jedoch den gesamten Header-Bereich ein, einschließlich der Suchleiste, des Anmeldebereichs und des Logos. Um einen anderen Hintergrund für das Kopfzeilenmenü zu erhalten, fügen Sie das folgende Code-Snippet zum Bedienfeld „Zusätzliches CSS“ hinzu.

 .storefront-primäre-navigation,

.Hauptnavigation ul.Menü ul.Untermenü{

Hintergrundfarbe: grün;

}

Hier ist das Ergebnis: Ändern Sie die Farbe des Kopfzeilenmenüs

4. Blenden Sie die primäre Navigationsleiste aus

Storefront Theme zeigt standardmäßig alle Seiten als Menü an. Wenn Sie die primäre Navigationsleiste ausblenden möchten, reicht das Löschen des Menüs nicht aus. Navigieren Sie zu Anpassen, dann zum Abschnitt Zusätzliches CSS, und fügen Sie die folgenden Zeilen hinzu:

 .storefront-primäre-navigation {

Anzeige: keine;

}

Hier ist das Ergebnis: Primäre Navigationsleiste ausblenden

5. Entfernen Sie das Leerzeichen aus der Kopfzeile

Navigieren Sie zu Anpassen, dann zum Abschnitt Zusätzliches CSS, und fügen Sie die folgenden Zeilen hinzu:

 .site-branding {

Rand unten: 0px;

}

Hier ist das Ergebnis: Leerzeichen aus der Kopfzeile entfernen

6. Erhöhen Sie die Breite der Suchleiste

Was würden Sie tun, wenn Sie die Breite der Suchleiste erweitern möchten? Fügen Sie im Abschnitt Zusätzliches CSS die folgenden Zeilen hinzu:

 .woocommerce-aktiv .site-header .site-suche {

Breite: 44,739 %;

}

#masthead .site-search .widget_product_search input[type="search"] {

Breite: 700px !Wichtig;

}

Hier ist das Ergebnis: Erhöhen Sie die Breite der Suchleiste

7. So ändern Sie die Größe des Logos, der sekundären Navigation und der Suchleiste

Um sie alle auf einmal zu ändern, fügen Sie den folgenden Code zu Ihrem zusätzlichen CSS-Abschnitt hinzu:

 @media screen und (Mindestbreite: 768px) {

/* LOGO */

.site-header .site-branding, .site-header .site-logo-anchor, .site-header .site-logo-link { width: 30% !important; /* Verwenden Sie px-Werte, wenn Sie möchten, zB. 350px */ }

/* SEKUNDÄRE NAVIGATION */

.site-header .secondary-navigation { width: 40% !important; /* Verwenden Sie px-Werte, wenn Sie möchten, zB. 350px */ }

/* SUCHLEISTE */

.site-header .site-search { Breite: 30 % !wichtig; /* Verwenden Sie px-Werte, wenn Sie möchten, zB. 350px */ }

Hier ist das Ergebnis: So ändern Sie die Größe des Logos, der sekundären Navigation und der Suchleiste

8. Entfernen Sie den Einkaufswagen aus der Kopfzeile

In diesem Beispiel werde ich das Einkaufswagensymbol entfernen, indem ich eine neue Regel hinzufüge: ' display: none; '. Fügen Sie den folgenden CSS-Code im Abschnitt „Zusätzliches CSS“ hinzu:

 .site-header-cart .cart-contents {

Anzeige: keine;

}

Hier ist das Ergebnis: Entfernen Sie den Einkaufswagen aus der Kopfzeile

9. Blenden Sie die Kopfzeile aus

Um die Kopfzeile auszublenden, fügen Sie den folgenden CSS-Code im Abschnitt „Zusätzliches CSS“ hinzu:

 .site-header {

Anzeige: keine;

}

Hier ist das Ergebnis: Kopfzeile ausblenden

10. Erhöhen Sie die Größe des Menülinks im Storefront-Header

Die Menüs sind entsprechend den Vorlieben vieler Benutzer etwas kleiner. Sie müssen jedoch die Schriftgröße der Menülinks im Storefront-Design aktualisieren. Fügen Sie im Abschnitt „Zusätzliches CSS“ den folgenden Code hinzu:

 .main-navigation ul.menu > li > a, .main-navigation ul.nav-menu > li > a {

Schriftgröße: 28px;

}

Hier ist das Ergebnis: Erhöhen Sie die Größe des Menülinks im Storefront-Header

11. Ändern Sie die Größe des Einkaufswagensymbols in der Storefront-Kopfzeile

Sie können dies tun, indem Sie den folgenden CSS-Code im Abschnitt Zusätzliches CSS hinzufügen

 .site-header-cart .cart-contents {

Schriftgröße: 30px;

}

Hier ist das Ergebnis: Ändern Sie die Größe des Einkaufswagensymbols in der Storefront-Kopfzeile

12. Ändern Sie die Größe des Site-Header-Titels im Storefront-Design

Fügen Sie im Abschnitt „Zusätzliches CSS“ den folgenden Code hinzu:

 .site-header {

Schriftgröße: 20px;

}

Hier ist das Ergebnis: Ändern Sie die Größe des Site-Header-Titels im Storefront-Design

13. Ändern Sie die Größe der mobilen Menüschaltfläche

Es ist wichtig zu beachten, dass die Art und Weise, wie das Menü angezeigt wird, Teil der Reaktionsfähigkeit des Menüs ist. Wenn also Ihr primäres Navigationsmenü auf einem Desktop-Gerät in Form einer Liste vorliegt, kann dasselbe Menü auf einem mobilen Gerät als Hamburger-Menü angezeigt werden.

Um die Größe zu ändern, fügen Sie den folgenden CSS-Code im Abschnitt Zusätzliches CSS hinzu:

 .button.menu-toggle {

Schriftgröße: 19px;

}

Hier ist das Ergebnis: Ändern Sie die Größe der mobilen Menüschaltfläche

14. Produkttitel auf der Shop-Seite ausblenden

Um den Titel des Produkts auf der Shop-Seite auszublenden, navigieren Sie einfach zum Abschnitt „Anpassen“, dann „Zusätzliches CSS“ und fügen Sie die folgenden Zeilen hinzu:

 h2.woocommerce-loop-product__title {

Anzeige: keine !wichtig;

}

Hier ist das Ergebnis:

Produkttitel auf der Shop-Seite ausblenden

15. Blenden Sie die Plus- und Minus-Schaltflächen für die Produktmenge auf der Produktseite aus

Damit Sie das Textfeld mit den Plus- und Minus-Schaltflächen ausblenden können, um die Produktmenge zu erhöhen oder zu verringern, müssen Sie lediglich den folgenden CSS-Code im Abschnitt Zusätzliches CSS hinzufügen: 

 .Menge {

Anzeige: keine !wichtig;

}

Hier ist das Ergebnis: Blenden Sie die Plus- und Minus-Schaltflächen für die Produktmenge auf der Produktseite aus

16. Blenden Sie die Schaltfläche „In den Warenkorb“ auf der Produktseite aus

Navigieren Sie dazu einfach zum Abschnitt Anpassen, dann zu Zusätzliches CSS, und fügen Sie die folgenden Zeilen hinzu:

 .single_add_to_cart_button {

Anzeige: keine !wichtig;

}

Hier ist das Ergebnis: Ausblenden der Schaltfläche „In den Warenkorb“ auf der Produktseite

17. Ändern Sie die Farbe und die Schriftgröße des Bereichs Storefront Widget

Es gibt keine direkte Möglichkeit, die Schriftfarbe oder -größe für die Seiten-Widgets mit dem Customizer zu ändern. Sie können dies leicht ändern, indem Sie die folgenden Zeilen CSS-Code hinzufügen. Navigieren Sie dazu zu Anpassen, dann zum Abschnitt Zusätzliches CSS, und fügen Sie die folgenden Zeilen hinzu:

 .widget-Bereich .widget {

Farbe grün;

Schriftgröße: 1em;

}

Hier ist das Ergebnis: Ändern Sie die Farbe und Schriftgröße des Bereichs Storefront-Widget

18. Zeigen Sie das „Sale“-Abzeichen im Schaufenster auf dem Produktbild

Die Standardversion des WooCommerce Storefront-Themes ermöglicht es Ihnen, einen Verkauf oder einen reduzierten Preis für ein bestimmtes Produkt zu definieren. Wenn Sie jedoch das Verkaufsabzeichen auf dem Produktbild hinzufügen möchten, navigieren Sie zu Anpassen, dann zum Abschnitt Zusätzliches CSS und fügen Sie die folgenden Zeilen hinzu:

 ul.products li.product .onsale {

Position: absolut;

oben: 137px;

rechts: 62px;

}

Hier ist das Ergebnis: Zeigen Sie das „Sale“-Abzeichen auf dem Produktbild im Schaufenster an

19. Ändern Sie die Farbe des „Sale“-Abzeichens

Um die Farbe des Sale-Abzeichens zu ändern, navigieren Sie einfach zum Abschnitt „Anpassen“ und dann „Zusätzliches CSS“ und fügen Sie die folgenden Zeilen hinzu:

 .im Angebot {

Hintergrundfarbe: schwarz;

Randfarbe: rot;

Farbe Rot;

}

Hier ist das Ergebnis: Ändern Sie die Farbe des „Sale“-Abzeichens

20. Menge „Plus-Minus“-Boxfarbe ändern

Dies kann durch Ändern der Hintergrundfarbe der Mengen-Plus- und Minus-Schaltflächen erfolgen. Navigieren Sie dazu zu Anpassen, dann zum Abschnitt Zusätzliches CSS , und fügen Sie die folgenden Zeilen hinzu:

 .Menge .Menge {

Farbe: #000;

Hintergrundfarbe: #f5df72;

}

Hier ist das Ergebnis: Menge „Plus-Minus“-Boxfarbe ändern

21. Ändern Sie die Hintergrundfarbe des Minicarts in der Kopfzeile

Wenn Sie die Farbe der Kopfzeile ändern, erbt das Mini-Warenkorb-Dropdown diese Farbe. Sie können dies jedoch ändern, indem Sie die folgenden CSS-Regeln für zusätzliche Sichtbarkeit verwenden. Navigieren Sie zu Anpassen, dann zum Abschnitt Zusätzliches CSS, und fügen Sie die folgenden Zeilen hinzu:

 .woocommerce.widget_shopping_cart {

Hintergrund: rot;

Randradius: 12px;

}

Hier ist das Ergebnis: Ändern Sie die Hintergrundfarbe des Minicarts in der Kopfzeile

22. Fügen Sie ein Bild in der Storefront-Fußzeile mit CSS unter Copyright hinzu

Wenn Sie Ihr eigenes Logo, akzeptierte Zahlungen oder Ihr Partner-Logo unter dem Copyright-Text hinzufügen möchten, navigieren Sie zu Ebenen, Anpassen und klicken Sie dann auf Fußzeile .

Klicken Sie auf Anpassung , um das Bedienfeld zu erweitern, und klicken Sie im Hintergrund auf Bild auswählen.

Bitte wählen Sie das gewünschte Bild aus und fügen Sie es hinzu.

Wählen Sie „ Keine Wiederholung“ und „Unten“ oder positionieren Sie sie wie gewünscht manuell.

Navigieren Sie zurück zum Customizer und klicken Sie auf CSS , um das Bedienfeld zu erweitern. Allerdings sollten Sie darauf achten, dass die Prozentsätze Ihren Vorgaben entsprechen. Fügen Sie dann die folgenden Zeilen hinzu:

 .site-info:nach {

Inhalt: '';

Hintergrundbild: URL (fügen Sie Ihre eigene URL hinzu);

Bildschirmsperre;

Breite: 100px;

Höhe: 100px;

Rand: 0 automatisch;

}

Hier ist das Ergebnis: Fügen Sie ein Bild in der Storefront-Fußzeile mit CSS unter dem Copyright hinzu

  1. So entfernen Sie eine Lücke in der Fußzeile

Navigieren Sie zu Anpassen, dann zum Abschnitt Zusätzliches CSS, und fügen Sie die folgende Zeile hinzu:

.footer-widgets { padding-top: 0; }

Hier ist das Ergebnis: So entfernen Sie eine Lücke in der Fußzeile

24. So entfernen Sie die Unterstreichung von Hyperlinks

Standardmäßig unterstreicht das Storefront-Design Links, und wenn Sie sie entfernen möchten, navigieren Sie zum Abschnitt „Anpassen“, dann zu „Zusätzliches CSS“ und fügen Sie die folgenden Zeilen hinzu:

 ein {

Textdekoration: keine !wichtig;

}

Hier ist das Ergebnis: So entfernen Sie die Unterstreichung von Hyperlinks

25. So ändern Sie die Farbe der horizontalen Linien auf der Storefront-Homepage

Fügen Sie einfach den folgenden Code zur custom.css-Datei Ihres untergeordneten Designs hinzu:

 .page-template-template-homepage .hentry .entry-header,

.page-template-template-homepage .hentry,

.page-template-template-homepage .storefront-product-section {

Randfarbe: rot;

}

26. So passen Sie das Storefront WooCommerce on Sale-Abzeichen an

Fügen Sie einfach den folgenden Code zu Ihrem zusätzlichen CSS-Abschnitt hinzu:

 .im Angebot {

Hintergrundfarbe: #FFFFFF;

Rahmenfarbe: #FF0000;

Farbe: #FF0000;

}

Hier ist das Ergebnis: So passen Sie das Storefront WooCommerce on Sale-Abzeichen an

27. So ändern Sie die Höhe der WooCommerce Storefront-Fußzeile

Es ist sehr einfach, die Höhe der WooCommerce Storefront-Fußzeile zu ändern, indem Sie den folgenden CSS-Code im Abschnitt Zusätzliches CSS hinzufügen: 

 section.footer-widgets {

Polsterung oben: 25px;

}

div.site-info {

Polsterung oben: 16px;

Polsterung unten: 25px;

}

Hier ist das Ergebnis: So ändern Sie die Höhe der WooCommerce Storefront-Fußzeile

28. Hinzufügen eines Hintergrundbilds zur Storefront eines bestimmten Homepage-Abschnitts

Das standardmäßige Storefront-Design besteht aus sechs Abschnitten, nämlich Produktkategorien, aktuelle Produkte, vorgestellte Produkte, beliebte Produkte, im Angebot befindliche Produkte und meistverkaufte Produkte. Fügen Sie einfach den folgenden Code zum Abschnitt „Zusätzliches CSS“ hinzu:

 .storefront-empfohlene-produkte{

background-image: url (Fügen Sie hier Ihre URL hinzu);

Hintergrundposition: Mitte Mitte;

Hintergrundwiederholung: keine Wiederholung;

Hintergrundgröße: Cover;

-o-Hintergrundgröße: Abdeckung;

}

Hier ist das Ergebnis: Hinzufügen eines Hintergrundbilds zur Storefront eines bestimmten Homepage-Abschnitts

29. Hinzufügen von Hintergrundfarbe zu Storefront-Homepage-Abschnitten

Dazu müssen Sie zunächst den Abschnitt identifizieren, dem Sie Farbe hinzufügen möchten. Dies kann einfach durch Hinzufügen des folgenden Codes zum Abschnitt „Zusätzliches CSS“ erreicht werden:

 .storefront-empfohlene-produkte{

Hintergrundfarbe:#FFEB3B;

}

Hier ist das Ergebnis: Hinzufügen von Hintergrundfarbe zu Storefront-Homepage-Abschnitten

30. So entfernen oder verbergen Sie den Titel des Homepage-Abschnitts

Dazu müssen Sie zunächst den Abschnitt identifizieren, den Sie entfernen oder ausblenden möchten. Dies kann durch Hinzufügen des folgenden Codes zum Abschnitt „Zusätzliches CSS“ erreicht werden:

 .storefront-recent-products .section-title {display:none;}

.storefront-product-categories .section-title {display:none;}

.storefront-featured-products .section-title {display:none;}

.storefront-popular-products .section-title {display:none;}

.storefront-on-sale-products .section-title {display:none;}

.storefront-meistverkaufte-produkte .section-title {display:none;}

Hier ist das Ergebnis: So entfernen oder verbergen Sie den Titel des Homepage-Abschnitts

31. So ändern Sie die Hintergrundfarbe von Angebotsprodukten

Dies kann durch Hinzufügen des folgenden Codes zum Abschnitt „Zusätzliches CSS“ erreicht werden:

 .storefront-on-sale-produkte{

Hintergrundfarbe:#FFEB3B;

}

Hier ist das Ergebnis: So ändern Sie die Hintergrundfarbe von Angebotsprodukten

32. So fügen Sie automatisch Platz unter der Kopfzeile für Seiten ohne Titel hinzu

Immer wenn Sie den Hauptseitentitel für eine Seite deaktivieren, bleibt unter der Kopfzeile kein Platz mehr. Dieses Code-Snippet hilft Ihnen, den Abstand hinzuzufügen, um einen Schieberegler, ein Bild oder andere Inhalte bündig mit dem oberen Rand einzufügen. Fügen Sie den folgenden Code zum Abschnitt „Zusätzliches CSS“ hinzu:

 body.page-header-disabled #main {

Polsterung oben: 30px;

}

Hier ist das Ergebnis: So fügen Sie automatisch Platz unter der Kopfzeile für Seiten ohne Titel hinzu

33. So verbergen Sie die Schaltfläche „Nach oben scrollen“ auf Mobilgeräten

 Fügen Sie einfach den folgenden Code zum Abschnitt „Zusätzliches CSS“ hinzu:

@media only screen und (max-width: 959px) {

#site-scroll-top { Anzeige: keine !wichtig; }

}

Hier ist das Ergebnis: So verbergen Sie die Schaltfläche „Nach oben scrollen“ auf dem Handy

Fazit

Ich habe in diesem Leitfaden einige CSS-Tipps geteilt, mit denen Sie das Storefront-Design gestalten können. Ich empfehle dringend, dass Sie die CSS-Regeln im Abschnitt „Zusätzliches CSS“ hinzufügen, damit Sie eine Vorschau der Änderungen in Echtzeit sehen können. Durch die Vorschau Ihrer Änderungen können Sie die Regel gemäß Ihrer Spezifikation ändern.

Um die Regel hinzuzufügen, kopieren und fügen Sie sie in den Abschnitt „ Zusätzliches CSS “ Ihrer Storefront-Design-Anpassungsoberfläche ein. Um dies zu tun:

  • Melden Sie sich bei Ihrer WordPress-Site an und greifen Sie als Admin-Benutzer auf das Dashboard zu.
  • Klicken Sie im Dashboard-Menü auf Darstellungsmenü > Anpassen .
  • Navigieren Sie in der angezeigten linken Seitenleiste nach unten zu Zusätzliches CSS .
  • Fügen Sie die CSS-Regel hinzu.
  • Wenn Sie mit den Änderungen zufrieden sind, klicken Sie auf Veröffentlichen.

Es ist jedoch wichtig zu beachten, dass die hier geteilten CSS-Tipps nur für das Storefront-Theme funktionieren.

Ähnliche Artikel

  1. So passen Sie die Höhe der Kopfzeile in der WooCommerce-Schaufensterfront an
  2. So richten Sie eine Homepage in WooCommerce Storefront ein
  3. So fügen Sie das Logout-Optionsmenü WooCommerce Storefront Theme hinzu [Beispiel]
  4. So ändern Sie den Slogan des Storefront-Designs WooCommerce
  5. So ändern Sie die Schriftgröße des Hauptmenüs Storefront Theme
  6. WooCommerce Storefront Header CSS-Anpassungsleitfaden
  7. WooCommerce Storefront Alle Kategorien auf der Homepage anzeigen
  8. So ändern Sie die Größe des Mobile Menu Button Storefront Theme
  9. So ändern Sie die Menüfarbe WooCommerce Storefront
  10. So ändern Sie die Fußzeilenhöhe von WooCommerce Storefront
  11. So entfernen Sie das Footer Storefront Theme WooCommerce
  12. So ändern Sie die Größe des Site-Titels WooCommerce Storefront Theme
  13. So entfernen Sie das Header WooCommerce Storefront Theme
  14. Anpassung der Homepage des WooCommerce Storefront Themes [Ultimate Guide]
  15. So ändern Sie die angezeigte Bildgröße von WooCommerce Storefront
  16. So erstellen Sie eine scrollbare Quick-Fix-Lösung für das Menü von Divi Mobile
  17. So verbergen Sie das Kategorie-WooCommerce-Storefront-Thema
  18. So ändern Sie die Größe des Einkaufswagensymbols im WooCommerce Storefront-Design
  19. So entfernen Sie verwandte Produkte WooCommerce Storefront Theme
  20. So verstecken Sie die WooCommerce Storefront-Startseite von Bestsellern