col-1 Klassen auf der Kassenseite von WooCommerce

Grüessech mitenang. Kürzlich hatte ich die brilliante Idee, für ein selbstprogrammiertes WordPress Theme ein Framework als Basis zu nehmen. Nun ich entschied mich für den grossen Klassiker unter den Frameworks: Bootstrap. Bei der Anbindung von WooCommerce bot sich dann bei dem Checkout ein, nun ja, eher spezielles Bild: WooCommerce arbeitet auf der Kassenseite mit col-1 […]

Grüessech mitenang.

Kürzlich hatte ich die brilliante Idee, für ein selbstprogrammiertes WordPress Theme ein Framework als Basis zu nehmen. Nun ich entschied mich für den grossen Klassiker unter den Frameworks: Bootstrap. Bei der Anbindung von WooCommerce bot sich dann bei dem Checkout ein, nun ja, eher spezielles Bild:

Eine Standart WooCommerce Kassenseite, auf einem Theme mit Bootstrap als Basis

WooCommerce arbeitet auf der Kassenseite mit col-1 Klassen. An sich ist das eine relative unglückliche Idee, da viele CSS-Frameworks ihre Grids mit col-Klassen ausstatten. So kommt es zu Darstellungen wie oben. Um dieses Problem zu beheben sollte der folgende CSS-Code im Customizer -> eigenes CSS oder in das WooCommerce Stylesheet eingefügt werden oder direkt im Theme integriert werden.

.woocommerce-billing-fields .form-row, .woocommerce-shipping-fields .form-row,.woocommerce form .form-row { display: block; } .woocommerce .col2-set .col-1, .woocommerce-page .col2-set .col-1,.woocommerce .col2-set .col-2, .woocommerce-page .col2-set .col-2 { max-width: unset; }

In diesem Sinne, machen wir das Beste draus

Loïc Etter

Schreiben Sie einen Kommentar

Ihre E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.