17.05.2021 | Webentwicklung
Bootstrap Klassen in WooCommerce Kassen (Cart) Template ergänzen und CSS anpassen

Wenn du dein eigenes, Bootstrap basiertes, Template zusammen mit WooCommerce nutzt, ist dir vielleicht schon aufgefallen, dass dein Layout unter Umständen in der Kasse zerschossen wird. Grund dafür ist, dass zum einen gleiche Klassenbezeichnungen genutzt werden und die CSS Klassen für Fomulare fehlen. Zu diesem Zweck musst du die functions.php deines Templates ergänzen.

functions.php

// WooCommerce Cart & Bootstrap CSS Fix

add_filter('woocommerce_form_field_args',  'wc_form_field_args',10,3);

function wc_form_field_args($args, $key, $value) {
    $args['input_class'] = array( 'form-control' );
    return $args;
}

Dadurch wird die CSS Klasse form-control in deine Formularfelder integriert.

Jetzt kannst du dein CSS noch anpassen um die doppelte Klassenverwendung zu unterbinden.

.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;
}

Wichtig ist an dieser Stelle das dein CSS nach dem CSS von WooCommerce eingebunden wird.

geschrieben von Jens

, ,

keine Kommentare