Woocommerce: Jak połączyć koszyk i stronę podsumowania?

I to właśnie zamierzasz osiągnąć.

Krok 1: Połącz koszyk Woocommerce i stronę kasy

W tym kroku zamierzamy dodać tabelę koszyka Woocommerce nad tabelą do kasy. Dlatego pobierz ten kod poniżej i dodaj go do pliku functions.php motywu potomnego lub jeszcze lepiej, użyj do tego wtyczki Code Snippets . Nie ma nic do skonfigurowania, po prostu wklej go tak, jak jest.

// 1. Add Woocommerce cart page on the checkout page

add_action( 'woocommerce_before_checkout_form', 'add_cart_on_checkout', 5 );
 
function add_cart_on_checkout() {
 if ( is_wc_endpoint_url( 'order-received' ) ) return;
 echo do_shortcode('[woocommerce_cart]'); // Woocommerce cart page shortcode
}

Krok 2: Przekieruj stronę koszyka Woocommerce na stronę kasy

Ta część jest opcjonalna i użyj jej, jeśli nie chcesz, aby przyciski „Wyświetl koszyk” kierowały użytkowników do strony koszyka. Użyj go również, jeśli nie chcesz, aby Twoi użytkownicy mieli bezpośredni dostęp do strony koszyka Woocommerce.

Więc weź ten kod i dodaj go do swojego pliku functions.php lub pola kodu Code Snippets. Zwróć uwagę, że części „koszyk” i „/ kasy /” to informacje o koszyku i stronach płatności. Jeśli masz inne ślimaki (na przykład karte lub kassa), zmień je odpowiednio.

// 2. Redirect cart page to checkout
add_action( 'template_redirect', function() {
  
// Replace "cart"  and "checkout" with cart and checkout page slug if needed
    if ( is_page( 'cart' ) ) {
        wp_redirect( '/checkout/' );
        die();
    }
} );

Krok 3: Przekieruj pustą stronę kasy Woocommerce na stronę sklepu

Teraz ta część jest potrzebna tylko wtedy, gdy dodałeś przekierowanie ze strony koszyka Woocommerce do strony kasy w kroku 2. Jeśli tego nie zrobiłeś, możesz pominąć tę część.

ALE jeśli przekierowujesz stronę koszyka, ta część jest kluczowa, ponieważ w przeciwnym razie po usunięciu produktów z koszyka na stronie kasy pojawi się błąd „Zbyt wiele przekierowań”.

Spójrz na slug „sklep” w kodzie. Zastąp go własnym slugiem strony sklepu.

// Redirect to home url from empty Woocommerce checkout page

add_action( 'template_redirect', 'redirect_empty_checkout' );
 
function redirect_empty_checkout() {
    if ( is_checkout() && 0 == WC()->cart->get_cart_contents_count() && ! is_wc_endpoint_url( 'order-pay' ) && ! is_wc_endpoint_url( 'order-received' ) ) {
	  
	  // Replace "shop" with your Shop page slug if needed
   wp_safe_redirect( get_permalink( woocommerce_get_page_id( 'shop' ) ) ); 
        exit;
    }
}

Krok 4: Dostosuj stronę kasy Woocommerce

Ta część jest ponownie opcjonalna. Zrobię to, ponieważ używam motywu Blocksy i pokazuje mi stół wózka w 2/3 z. Chciałbym to pokazać w całości za pomocą. Tak więc wszystkie te fragmenty CSS przechodzą do Customizer >> Additional CSS i mają zastosowanie tylko do motywu Blocksy.

Blokowy motyw

Dzięki temu koszyk będzie miał pełną szerokość.

@media only screen and (min-width: 1000px) {
.ct-cart-form {
    grid-template-columns: 1fr;
}

Ukryj przełącznik kuponu Woocommerce na stronie kasy

Zarówno stół koszyka, jak i stół do kasy mają własne pole z kodem kuponu. Ponieważ potrzebuję tylko jednego z nich, ukryję przełącznik kuponu na stronie kasy („Masz kupon? Kliknij tutaj, aby wprowadzić kod”)

.woocommerce-form-coupon-toggle
{
    display: none;
}

Powinno to działać z każdym przyzwoitym motywem.

Dostosuj tabelę przeglądu zamówień do kasy Woocommerce

Teraz dodam tło do tabeli przeglądu zamówień Woocommerce, dodam odstępy między tym a tabelą koszyka i wprowadzę inne poprawki. Wszystkie klasy z ct- są przeznaczone tylko dla motywu Blocksy. Dwa ostatnie powinny pasować do każdego motywu.

/* Blocksy theme order review table background and border */
.ct-order-review {
	background: #fbfbfb;
	border: 2px dashed #ebebeb;
}
.ct-cart-form {
	margin-bottom: 2em;
	border-bottom: 1px solid #ebebeb;
}

/* Payment methods background + radio and checkbox customization */
.payment_methods>li:not(.woocommerce-notice),
.woocommerce-form__input[type="checkbox"]{
    background: #fff;
}
/* Payment methods background */
.woocommerce-shipping-totals input[type="radio"] {
  border: 1px solid #000;
	background: #fff;
}