Jak edytować stronę kasy WooCommerce
Opublikowany: 2021-07-21
Czy chcesz edytować stronę kasy w swoim sklepie WooCommerce? Czytaj dalej, ponieważ dostarczymy Ci rozwiązanie.
Należy pamiętać, że strona kasy to miejsce, w którym klienci płacą za produkt lub usługę, którą oferujesz w swoim sklepie. Dlatego musisz to zrobić dobrze.
Jednak WooCommerce zapewnia domyślną konfigurację, ale może być konieczne dostosowanie jej z konieczności, ponieważ nie ma profesjonalnego wyglądu. Pomoże Ci to zwiększyć współczynniki konwersji.
Jak edytować stronę kasy WooCommerce
Istnieją dwa sposoby dostosowania strony:
- Niestandardowy szablon kasy – Dokumentacja WooCommerce wyraźnie stwierdza, że możesz skopiować szablon kasy do swojego motywu w strukturze folderów w następujący sposób: woocommerce/checkout/form-checkout.php. Oznacza to, że możesz dostosować formularz-checkout.php w zależności od swoich wymagań.
- Wtyczki — dostępnych jest wiele rozszerzeń umożliwiających dostosowanie strony kasy. Niektóre z nich są dostępne za darmo, a niektóre są płatnymi rozszerzeniami.
- Kod niestandardowy — ta metoda jest nieco trudna i wymaga pewnej wiedzy technicznej, aby wdrożyć rozwiązania. Jest to jednak idealne rozwiązanie, jeśli chcesz tylko wprowadzić niewielką edycję i nie chcesz kupować wtyczki. W tym samouczku użyjemy tej metody.
Kroki, aby edytować stronę kasy WooCommerce
Zanim zaczniemy, warto wspomnieć, że WooCommerce posiada haki akcji na każdej stronie. Haki akcji mogą służyć do dodawania lub usuwania elementów ze strony kasy. Na stronie kasy znajduje się 9 haczyków akcji:
- woocommerce_before_checkout_form
- woocommerce_checkout_before_customer_details
- woocommerce_checkout_billing
- woocommerce_checkout_shipping
- woocommerce_checkout_after_customer_details
- woocommerce_checkout_before_order_review
- woocommerce_checkout_order_review
- woocommerce_checkout_after_order_review
- woocommerce_after_checkout_form
Ponadto dostępnych jest 7 dodatkowych haczyków, w zależności od układu Twojego motywu. Możesz je sprawdzić tutaj.
Postanowiliśmy podzielić się kilkoma przykładami, aby Ci pomóc. Oto kroki, które musisz wykonać:
- Zaloguj się do swojej witryny WordPress i uzyskaj dostęp do pulpitu nawigacyjnego jako administrator.
- Z menu Dashboard kliknij menu Wygląd > Menu edytora motywów . Po otwarciu strony Theme Editor poszukaj pliku funkcji motywu, w którym dodamy funkcję, która doda klientowi wiadomość o szczegółach wysyłki .
- Dodaj następujący kod do pliku php :
add_action( 'woocommerce_before_checkout_shipping_form', function() {
echo 'Don\'t forget to include your unit number in the address!';
});
- Oto wynik:
- Jeśli chcesz manipulować dowolnym polem, możesz użyć filtra woocommerce_checkout_fields. Na przykład, aby usunąć pole numeru telefonu rozliczeniowego, dodaj następujący kod do tego samego pliku:
// Hook in
add_filter( 'woocommerce_checkout_fields' , 'njengah_override_checkout_fields' );
// Our hooked in function - $fields is passed via the filter!
function njengah_override_checkout_fields( $fields ) {
unset($fields['billing']['billing_phone']); return $fields; }
- Aby dodać pole numeru telefonu do wysyłki, dodaj następujący kod:
// Hook in
add_filter( 'woocommerce_checkout_fields' , 'njengah_override_checkout_fields' );
// Our hooked in function - $fields is passed via the filter!
function njengah_override_checkout_fields( $fields ) {
$fields['shipping']['shipping_phone'] = array(
'label' => __('Phone', 'woocommerce'),
'placeholder'=> _x('Phone', 'placeholder', 'woocommerce'),
'required' => false,
'class' => array('form-row-wide'),
'clear' => true
);
return $fields;
}
/**
* Display field value on the order edit page
*/
add_action( 'woocommerce_admin_order_data_after_shipping_address', 'njengah_custom_checkout_field_display_admin_order_meta', 10, 1 );
function njengah_custom_checkout_field_display_admin_order_meta($order){
global $post_id;
$order = new WC_Order( $post_id );
echo '<p><strong>'.__('Field Value').':</strong> ' . get_post_meta($order->get_id(), '_shipping_field_value', true ) . '</p>';
}
- Aby zmienić symbol zastępczy pola Kod pocztowy lub Kod pocztowy, dodaj następujący kod:
add_filter( 'woocommerce_checkout_fields' , 'njengah_override_checkout_fields' );
// Our hooked in function - $fields is passed via the filter!
function njengah_override_checkout_fields( $fields ) {
$fields['billing']['billing_postcode']['placeholder'] = 'Postal Code';
return $fields;
}
Wniosek
Podsumowując, udostępniliśmy, w jaki sposób możesz wykorzystać haki akcji WooCommerce do edycji strony kasy. Ważne jest, aby pamiętać, że możesz wyświetlić dokumentację WooCommerce tutaj.
Jeśli nie znasz się na kodowaniu, zalecamy użycie wtyczki. Możesz również skonsultować się z wykwalifikowanym programistą WordPress.
Mamy nadzieję, że ten samouczek pomógł Ci znaleźć rozwiązanie Twojego problemu.
Podobne artykuły
- Jak skonfigurować przesyłany plik WooCommerce w kasie?
- Jak dodać zawartość poniżej polecanego tytułu produktu Witryna sklepowa
- Jak dodać weryfikację e-maila rejestracyjnego WooCommerce?
- Jak utworzyć stronicowanie liczb w WordPress bez korzystania z wtyczki?
- Kompletny przewodnik po korzystaniu z niestandardowych hooków WordPressa do_action i apply_filters z przykładami
- Jak skonfigurować koszyk WooCommerce i kasę na tej samej stronie
- Jak dostosować stronę kategorii produktów w WooCommerce?
- WooCommerce Utwórz niestandardową stronę pojedynczego produktu
- Jak dodać kalkulator wysyłki WooCommerce na stronie koszyka?
- WooCommerce Zaakceptuj Regulamin Pole wyboru w formularzu rejestracyjnym
- Jak dodać przycisk Wyświetl koszyk w WooCommerce?
- Jak zdobyć aktualny produkt WooCommerce
- Jak dodać niestandardowe pola produktów WooCommerce
- Jak zmienić szablon wiadomości e-mail w WooCommerce?
- Jak skonfigurować WooCommerce Kup jeden, a otrzymasz jeden
- Jak dodać PayPal Express Checkout do WooCommerce?
- Jak zmienić tekst zastępczy pola kasy WooCommerce?