So wenden Sie benutzerdefiniertes CSS auf das Produktfeld an

Bei der Erstellung von Formularen in einem klassische Formularlayout haben Sie die Möglichkeit, Ihre Formulare mit benutzerdefiniertem CSS-Code zu gestalten. Dies ist eine der coolen Funktionen im Formular-Generator, mit der Sie das gesamte Aussehen Ihres Formulars, einschließlich des Produktfelds, anpassen können.

Den freien Text ausblenden

Der Freitext erscheint, wenn Sie ein Produkt ohne Preis hinzufügen. Sie können ihn mit den folgenden benutzerdefinierten CSS-Code ausblenden:

.freeCurr + span {
display: none !important;
}

Unterprodukte standardmäßig anzeigen

Das Formular blendet die Unterprodukte standardmäßig aus, wenn Sie sich dafür entscheiden, sie im Produktartikel zu erstellen. Ihre Benutzer müssen den Produktartikel auswählen, bevor sie angezeigt werden. Um die Unterprodukte standardmäßig anzuzeigen, fügen Sie den folgenden benutzerdefinierten CSS-Code ein:

.sub_product .form-product-child-table {
display: block !important;
}

Ändern Sie die Farbe und Größe des Artikelpreises

Sie können die Farbe und Größe des Artikelpreises mit dem folgenden benutzerdefinierten CSS-Code ändern:

.form-product-details {
color: #ff6a00 !important;
font-size: 20px !important;
}

Ändern Sie „FF6a00“ mit dem Hex-Code der gewünschten Farbe und machen Sie dasselbe für die Größe von 20px auf Ihre bevorzugte Größe. Für Hex- und RGB-Codes empfehlen wir Google Color Picker.

Ändern Sie die Farbe und Größe von Zwischensumme, Steuer, Versand und Gesamtbetrag

Der Gesamtbereich enthält die Zwischensumme, die Steuer, den Versand und die Gesamtsumme. Sie können diese Elemente auf einmal oder einzeln anpassen. Um das Aussehen auf einmal zu ändern, fügen Sie die folgenden benutzerdefinierten CSS-Codes ein:

.payment_footer .total_area * {
font-size: 19px !important;
color: #ff6a00 !important;
}

Um die Elemente individuell anzupassen, verwenden Sie die folgenden benutzerdefinierten CSS-Codes:

/* Die aktuelle Schriftgröße des Gesamtbereichs aufheben */
.payment_footer .total_area * {
font-size: unset;
}
/* Teilsumme und Betrag */
#subtotal-text {
font-size: 20px;
Farbe: ff6a00;
}
#subtotal-text + .form-payment-price {
font-size: 20px;
Farbe: ff6a00;
}
/* Steuer und Betrag */
#tax-text {
font-size: 20px;
color: ff6a00;
}
#tax-text + .form-payment-price {
font-size: 20px;
Farbe: ff6a00;
}
/* Versand und Betrag */
#shipping-text {
font-size: 20px;
color: ff6a00;
}
#shipping-text + .form-payment-price {
font-size: 20px;
Farbe: ff6a00;
}
/* Gesamtbetrag und Betrag */
#total-text {
font-size: 20px;
color: ff6a00;
}
#total-text + .form-payment-price {
font-size: 20px;
Farbe: ff6a00;
}

Entfernen Sie die Umrandung der Produktartikel

Wenn Sie das Produktspalten-Layout aktivieren, haben die Produkte einen Rahmen um sich herum. Sie können den Rahmen mit den folgenden benutzerdefinierten CSS-Codes entfernen:

.form-product-item {
border: none !important;
}

Ändern Sie die Hintergrundfarbe der ausgewählten Produktartikel

Wenn Sie einen Produktartikel auswählen, ändert sich die Hintergrundfarbe seines Containers. Fügen Sie die folgenden benutzerdefinierten CSS-Codes ein, wenn Sie diese Änderung wünschen:

/* Wenn Sie den Mauszeiger über den Produktartikel bewegen */
.form-product-item.new_ui.hover-product-item:hover {
Hintergrund: rgba(85, 115, 215, 0.06);
Hintergrundfarbe: rgba(85, 115, 215, 0.06);
}
/* Wenn das Element ausgewählt ist */
.form-product-item.p_selected {
Hintergrund: rgba(85, 115, 215, 0.06);
Hintergrund-Farbe: rgba(85, 115, 215, 0.06);
}

Ändern Sie Farbe und Größe der Produktbeschreibung

Nutzen Sie die folgenden benutzerdefinierten CSS-Codes, um die Farbe und Größe der Produktbeschreibung zu ändern:

.form-product-item .form-product-container .form-product-description {
color: ##43464e;
font-size: 14px;
Deckkraft: .6;
}

Der Text hat eine Deckkraft, die Sie ebenfalls anpassen können. Sie können „1“ eingeben, wenn Sie die Deckkraft entfernen möchten.

Anpassen der Farbe und Größe des Kategorie-Titels

Fügen Sie die folgenden benutzerdefinierten CSS-Codes ein, um die Farbe und Größe den Kategorietitel zu ändern:

.form-product-category-item {
font-size: 18px;
color: #18bd5b;
}