A pénztár elrendezésének finomhangolása

Ez a fejezet a pénztár kisebb, kóddal vagy CSS-sel elvégezhető módosításait gyűjti össze. A PHP-kódokat a CheckoutWC → Haladó → Szkriptek oldal Globális szakaszának PHP kódrészletek mezőjébe írd (nyitó <?php címke nélkül). A stíluslapokat a CheckoutWC → Megjelenés → Dizájn fül Egyedi CSS mezőjébe, a <style> és <script> blokkokat a Fejléc szkriptek mezőbe tedd.

https://minta-bolt.hu/wp-admin/admin.php?page=cfw-settings-appearance&subpage=design

A kép alján található az Egyedi CSS mező, amelybe a CSS-példák kerülnek. A módosítások a Módosítások mentése gombbal lépnek életbe.

Különleges értesítés a pénztáron

Saját üzenetet a pénztár egy kiválasztott pontján egy művelettel (action) jeleníthetsz meg. Az alábbi példa az információs lépés elején, a bejelentkezési rész előtt ír ki egy tájékoztató dobozt:

add_action(
  'cfw_before_customer_info_tab_login',
  function () {
    echo '<div class="woocommerce-info">Ide kerül az értesítés szövege.</div>';
  },
  10 // Prioritás
);

Más helyekre is rakhatod az üzenetet, ha a műveletet lecseréled:

Művelet	Hova kerül az üzenet
cfw_checkout_main_container_start	A lépésjelző (breadcrumb) fölé, minden lépésen
cfw_checkout_before_shipping_methods	A szállítási módok listája fölé
cfw_checkout_payment_method_tab (9-es prioritással)	A fizetési módok fölé

A rendelés leadása gomb a kosár-összefoglaló alatt

Egyes országokban jogi előírás, hogy a rendelés leadása gomb az összesítés alatt legyen (Németországban például kötelező). A javasolt megoldás a Rendelés áttekintő lépés bekapcsolása, ennek beállítását a További pénztárfunkciók fejezet írja le.

Ha ezt nem szeretnéd használni, a gombot kóddal és CSS-sel is áthelyezheted a kosár-összefoglaló oldalsávjának aljára. Ez a régebbi módszer a gombot nem veszi el az eredeti helyéről, ezért CSS-sel el kell rejteni.

1. Tedd a gombot az oldalsáv aljára a PHP kódrészletek mezőben:

   add_action( 'cfw_after_cart_summary', 'cfw_place_order' );

2. Az eredeti gombot rejtsd el, és mutasd a másikat a fizetési lépésen. Az alábbi blokkot a CheckoutWC → Haladó → Szkriptek oldal Fejléc szkriptek mezőjébe másold. Asztali nézeten a gomb az oldalsávba kerül, mobilon is ott marad:

   <style type="text/css">
     .cfw-bottom-controls .place-order {
       display: none;
       float: right;
     }
   
     #cfw-cart-summary-content .place-order {
       display: none;
     }
   
     .cfw-payment-method-active #cfw-cart-summary-content .place-order {
       display: block;
       z-index: 2;
       position: relative;
       margin-bottom: 2em;
       text-align: center;
     }
   
     @media (max-width: 770px) {
       .cfw-payment-method-active #cfw-cart-summary {
         order: 3;
       }
   
       .cfw-bottom-controls .place-order {
         display: none;
       }
     }
   </style>
   
   <!-- Nem kötelező: a gomb a rendelés fizetése oldalon is működjön -->
   <script type="text/javascript">
   jQuery(document).ready( function() {
     jQuery('.cfw-order-pay #cfw-cart-summary-content .place-order').click( function() {
       jQuery('.cfw-bottom-controls #place_order').click();
     } );
   } );
   </script>

Csak asztali nézeten az oldalsávban

Ha a gombot csak asztali nézeten szeretnéd az oldalsávban látni, mobilon pedig az eredeti helyén, ezt a CSS-t használd a fenti blokk helyett:

<style type="text/css">
  .cfw-bottom-controls .place-order {
    display: none;
  }

  #cfw-cart-summary-content .place-order {
    display: none;
    float: right;
  }

  .cfw-payment-method-active #cfw-cart-summary-content .place-order {
    display: block;
    z-index: 2;
    position: relative;
  }

  @media (max-width: 770px) {
    .cfw-bottom-controls .place-order {
      display: block;
    }

    #cfw-cart-summary-content .place-order {
      display: none;
    }
  }
</style>

Mobilon érdemes mellé használni azt a beállítást is, amely a kosár-összefoglalót kinyitva tartja (lásd a Mobil kosár-összefoglaló és kártyalogók fejezetet).

A gomb középre igazításához töröld ki a float: right; sort a fenti példákból.

A fejléc hivatkozásának átírása

A pénztár fejlécében a logóra kattintva alapból a webhely nyitóoldalára jutsz. A cél a cfw_header_home_url szűrővel változtatható:

add_filter( 'cfw_header_home_url', function ( $home_url ) {
  $home_url = 'https://pelda.hu/bolt';

  return $home_url;
} );

Cikkszám az oldalsó kosárban és a kosár-összefoglalóban

A termék cikkszáma (SKU) az oldalsó kosárban, a pénztár kosár-összefoglalójában és a rendelés-összefoglalóban is megjeleníthető. A kódot a PHP kódrészletek mezőbe másold:

add_filter( 'cfw_side_cart_item_after_data', 'sajat_cikkszam_a_kosarban', 10, 3 );
add_filter( 'cfw_order_item_after_data', 'sajat_cikkszam_a_kosarban', 10, 3 );
add_filter( 'cfw_cart_item_after_data', 'sajat_cikkszam_a_kosarban', 10, 3 );

function sajat_cikkszam_a_kosarban( $raw_item, $item_key, $item ) {
  $product = $item->get_product();
  $sku     = $product->get_sku();

  if ( empty( $sku ) ) {
    return;
  }

  echo '<div class="cfw-small">';
  echo 'Cikkszám: ' . esc_html( $sku );
  echo '</div>';
}

A cikkszám a terméknév alatt, kisebb betűvel jelenik meg. Ha a terméknek nincs cikkszáma, semmi nem kerül a sorba.

A szállítási összeg elrejtése az információs lépésen

Az információs lépésen a szállítási költség még nem ismert. Ha el akarod rejteni az összeget, és helyette például azt írnád ki, hogy „A következő lépésben kiszámoljuk”, tedd az alábbi CSS-t az Egyedi CSS mezőbe:

.cfw-customer-info-active #cfw-cart-summary-totals .shipping td {
  font-size: 0;
}

.cfw-customer-info-active #cfw-cart-summary-totals .shipping td:after {
  content: "A következő lépésben számoljuk ki";
  font-size: 1rem;
}

A content sorban a saját szövegedet add meg.

A kosár lépés elrejtése a lépésjelzőből

Ha nem akarod, hogy a lépésjelzőben (breadcrumb) a Kosár szerepeljen, rejtsd el egy CSS-sel. Az Egyedi CSS mezőbe írd:

#cfw-breadcrumb .cart {
  display: none;
}