Change checkout Seite in WooCommerce

Question

Ich habe eine E-Commerce-Website mit WordPress und WooCommerce-Plugin entwickelt. Alles wurde erledigt, aber ich möchte das komplette Layout der Checkout-Seite ändern. Ich habe versucht, ein Plugin dafür zu finden, aber es ist fehlgeschlagen.

Gibt es eine Möglichkeit, das Layout oder das Design der Checkout-Seite zu ändern?

Answer 1

EDITED:

DIE WooCommerce VORLAGEN:

Sie können die "Vorlagen" Ordner (befindet sich im Inneren des woocoommerce Plugin-Ordner) zu Ihrem Thema (oder Kinder Thema) Ordner kopieren und benennen Sie sie " woocommerce ".
Dann können Sie wählen, in welche Datei Sie Ihre Bedürfnisse zu Fuß bearbeiten möchten.

In Ihrem Fall finden Sie in einem Ordner namens "checkout". Alle Dateien in diesem "Checkout" -Ordner sind die verschiedenen Komponenten des Checkout-Seitenlayouts.

Verschiedene Dateien für Komponenten auf Kasse Seite/form

form-checkout.php ist die primäre Datei für Checkout-Seite aufgerufen.
form-login.php rendert das Anmeldeformular.
form-coupon.php macht das Coupon Formular.
form-billing.php rendert das Abrechnungsformular.
form-shipping.php macht das Versandformular. (Dies wird als „Schiff auf andere Adresse Checkbox angezeigt geprüft)
review-order.php macht den Auftrag Überprüfung Block.
payment.php macht Zahlungsoptionen blockieren.
payment.php hat eine Schleife, in der für jede aktivierte Zahlungsmethode eine andere Datei>payment-method.php genannt wird Warenkorb Fehler.
cart-errors.php angezeigt.
thankyou.php zur Anzeige, um die Bestätigung erhalten, genannt. ("order-empfangen" Endpunkt)

HINZUFÜGEN VON WOOCOMMERCE STYLE SHEET IN KIND THEMA FÜR EINFACHE ÄNDERUNG Da ist es manchmal sehr schwierig, bestimmte WooCommerce Stile zu überschreiben.

Schritt 1 - Deaktivieren Sie die allgemeine woocommerce.css-Datei.

Fügen Sie diese PHP-Code in Ihre aktiven Funktionen Datei des Themas (functions.php):

add_filter('woocommerce_enqueue_styles', 'wooc_dequeue_styles'); 

function wooc_dequeue_styles($enqueue_styles) { 
    unset($enqueue_styles['woocommerce-general']); 
    return $enqueue_styles; 
} 

Step.2 - Erstellen Sie einen neuen Ordner in Ihrem aktiven Thema der Ordner mit dem Namen "WooCommerce" (wenn es existiert noch nicht).

Schritt.3 - Kopieren Sie die woocommerce.css Datei in diesem neu erstellten Ordner WooCommerce in Ihrem aktiven Thema des Ordners.
Die Datei woocommerce.css befindet sich in: plugins/woocommerce/assets/css/woocommerce.css.

Step.4 - Aktivieren (Enqueue) die allgemeine woocommerce.css Datei in Ihrem aktiven Thema.

Fügen Sie diesen PHP-Code in Ihrem aktiven Thema Funktionen file:

add_action('wp_enqueue_scripts', 'woocommerce_style_sheet'); 

function woocommerce_style_sheet() { 
    wp_enqueue_style('woocommerce', get_stylesheet_directory_uri() . '/woocommerce/woocommerce.css'); 
} 

Optionen:

- Sie können auch andere WooCommerce CSS-Dateien aktivieren/deaktivieren: see this snippet at woo themes

- Sie können ALLE Woocommerce Stylesheets auf einmal deaktivieren:

add_filter('woocommerce_enqueue_styles', '__return_false');