Button-Stile und CSS anpassen
Ändern Sie das Erscheinungsbild des Customize-Buttons und wenden Sie CSS-Anpassungen auf den Chamevo Product Customizer an.
Chamevo fügt Ihren Produktseiten einen Customize-Button hinzu und rendert den Product Customizer mit eigenen Stilen. Sie können das Button-Erscheinungsbild anpassen, CSS-Klassen hinzufügen und benutzerdefiniertes CSS anwenden, um es an Ihr Theme anzupassen.
Customize-Button-Stil ändern
CSS-Klassen hinzufügen
- Gehen Sie zu Chamevo → Settings → General → Layout.
- Finden Sie Customize Button CSS Classes.
- Geben Sie eine oder mehrere CSS-Klassen ein (ohne Punkt-Präfix). Standard ist
fpd-secondary-btn.
Beispiele:
- Verwenden Sie die Button-Klasse Ihres Themes (z.B.
btn btn-primary), um den Theme-Stil zu übernehmen. - Fügen Sie mehrere Klassen durch Leerzeichen getrennt hinzu.
Button-Position ändern (WooCommerce)
- Gehen Sie zu Chamevo → Settings → WooCommerce → Product Page.
- Setzen Sie Customization Button Position:
- After Short Description — unter dem Produktauszug.
- Before Add-to-Cart Button — direkt über dem In-den-Warenkorb-Button.
- After Add-to-Cart Button — direkt unter dem In-den-Warenkorb-Button.
Add-to-Cart in Katalogansichten ersetzen
- Gehen Sie zu Chamevo → Settings → WooCommerce → Catalog Listing.
- Setzen Sie Customize Button Position:
- Replace Add-to-Cart button — ersetzt den Standard-Button durch den Customize-Button.
- End of Catalog Item — fügt den Button am Ende der Produktkarte hinzu.
Benutzerdefiniertes CSS anwenden
Fügen Sie benutzerdefiniertes CSS zu Ihrem Theme oder über Appearance → Customize → Additional CSS in WordPress hinzu.
Häufige CSS-Anpassungen
Customize-Button-Farbe ändern:
.fpd-secondary-btn {
background-color: #3498db;
color: #ffffff;
border: none;
}
.fpd-secondary-btn:hover {
background-color: #1d8ad3;
}
Customizer-Container-Breite anpassen: