Sergio Pinna

Web Designer

responsive-ordine-dettagli

WooCommerce: aggiungere il responsive alla tabella “Ordine ricevuto”

WooCommerce: aggiungere il responsive alla tabella “Ordine ricevuto” è sicuramente una soluzione che Woocomerce utilizzaerà in futuro per sopperire alle sue mancanza in fatto di responsive

In qunato WooCommerce: aggiungere il responsive alla tabella “Ordine ricevuto” è un punto essenziale del responsive della qualità di Woocommerce stesso.

WooCommerce è la soluzione ideale per chi vuole avviare il proprio portale di e-commerce, senza conoscenze informatiche e senza esborsi economici in consulenze IT specialistiche. WooCommerce è un plugin per WordPress capace di trasformare il noto CMS per blog in una vera e propria piattaforma di commercio elettronico.

L’opportunità offerta da questo add-on è quindi impareggiabile: chi già conosce WordPress, infatti, si trova a poter utilizzare la solita piattaforma familiare anche per poter progettare e avviare un negozio online di beni fisici o digitali. Chi non conosce WordPress, invece, data la sua semplicità, si trova comunque avvantaggiato ad avvicinarsi al CMS, che poi può sfruttare per costruire blog, siti Web o negozi online con WooCommerce.

Attualmente, quasi tutto il layout delle fasi di questo plugin è responsive, tranne, per esempio, la tabella presente nel checkout “Ordine ricevuto”.

Tale tabella è molto semplice, solo che non essendo responsive può causare problemi a risoluzioni dello schermo inferiore a 768xp.

Per risolvere questo problema ho scritto questo semplice codice:

All’interno della cartella del tuo tema crea la cartella woocommerce, all’interno della quale creerai un’altra cartella checkout. Dentro quest’ultima inserisci il file thankyou.php, dentro questo file inserirai questo codice:

<?php
/**
 * Thankyou page
 *
 * This template can be overridden by copying it to yourtheme/woocommerce/checkout/thankyou.php.
 *
 * HOWEVER, on occasion WooCommerce will need to update template files and you
 * (the theme developer) will need to copy the new files to your theme to
 * maintain compatibility. We try to do this as little as possible, but it does
 * happen. When this occurs the version of the template file will be bumped and
 * the readme will list any important changes.
 *
 * @see      https://docs.woothemes.com/document/template-structure/
 * @author   WooThemes
 * @package  WooCommerce/Templates
 * @version     2.2.0
 */

if ( ! defined( 'ABSPATH' ) ) {
 exit;
}

if ( $order ) : ?>

 <?php if ( $order->has_status( 'failed' ) ) : ?>

  <p class="woocommerce-thankyou-order-failed"><?php _e( 'Unfortunately your order cannot be processed as the originating bank/merchant has declined your transaction. Please attempt your purchase again.', 'woocommerce' ); ?></p>

  <p class="woocommerce-thankyou-order-failed-actions">
   <a href="<?php echo esc_url( $order->get_checkout_payment_url() ); ?>" class="button pay"><?php _e( 'Pay', 'woocommerce' ) ?></a>
   <?php if ( is_user_logged_in() ) : ?>
    <a href="<?php echo esc_url( wc_get_page_permalink( 'myaccount' ) ); ?>" class="button pay"><?php _e( 'My Account', 'woocommerce' ); ?></a>
   <?php endif; ?>
  </p>

 <?php else : ?>

  <p class="woocommerce-thankyou-order-received"><?php echo apply_filters( 'woocommerce_thankyou_order_received_text', __( 'Thank you. Your order has been received.', 'woocommerce' ), $order ); ?></p>

  <table class="woocommerce-thankyou-order-details order_details shop_table_responsive">
      <tr>
          <th class="order"><?php _e( 'Order Number', 'woocommerce' ); ?></th>
          <th class="date"><?php _e( 'Date', 'woocommerce' ); ?></th>
          <th class="total"><?php _e( 'Total', 'woocommerce' ); ?></th>
          <?php if ( $order->payment_method_title ) : ?>
          <th class="method"><?php _e( 'Payment Method', 'woocommerce' ); ?></th>
          <?php endif; ?>
      </tr>
      <tr>
          <td class="order" data-title="<?php _e( 'Order Number', 'woocommerce' ); ?>"><strong><?php echo $order->get_order_number(); ?></strong></td>
          <td class="date" data-title="<?php _e( 'Date', 'woocommerce' ); ?>"><strong><?php echo date_i18n( get_option( 'date_format' ), strtotime( $order->order_date ) ); ?></strong></td>
          <td class="total" data-title="<?php _e( 'Total', 'woocommerce' ); ?>"><strong><?php echo $order->get_formatted_order_total(); ?></strong></td>
          <?php if ( $order->payment_method_title ) : ?>
          <td class="method" data-title="<?php _e( 'Payment Method', 'woocommerce' ); ?>"><strong><?php echo $order->payment_method_title; ?></strong></td>
          <?php endif; ?>
      </tr>
  </table>
  <div class="clear"></div>

 <?php endif; ?>

 <?php do_action( 'woocommerce_thankyou_' . $order->payment_method, $order->id ); ?>
 <?php do_action( 'woocommerce_thankyou', $order->id ); ?>

<?php else : ?>

 <p class="woocommerce-thankyou-order-received"><?php echo apply_filters( 'woocommerce_thankyou_order_received_text', __( 'Thank you. Your order has been received.', 'woocommerce' ), null ); ?></p>

<?php endif; ?>

La parte che ho modificato rispetto al file originale di woocommerce è che ho sostituito questo codice:

<ul class="woocommerce-thankyou-order-details order_details">
 <li class="order">
  <?php _e( 'Order Number:', 'woocommerce' ); ?>
  <strong><?php echo $order->get_order_number(); ?></strong>
 </li>
 <li class="date">
  <?php _e( 'Date:', 'woocommerce' ); ?>
  <strong><?php echo date_i18n( get_option( 'date_format' ), strtotime( $order->order_date ) ); ?></strong>
 </li>
 <li class="total">
  <?php _e( 'Total:', 'woocommerce' ); ?>
  <strong><?php echo $order->get_formatted_order_total(); ?></strong>
 </li>
 <?php if ( $order->payment_method_title ) : ?>
 <li class="method">
  <?php _e( 'Payment Method:', 'woocommerce' ); ?>
  <strong><?php echo $order->payment_method_title; ?></strong>
 </li>
 <?php endif; ?>
</ul>

con quest’altro codice

<table class="woocommerce-thankyou-order-details order_details shop_table_responsive">
 <tr>
  <th class="order"><?php _e( 'Order Number', 'woocommerce' ); ?></th>
  <th class="date"><?php _e( 'Date', 'woocommerce' ); ?></th>
  <th class="total"><?php _e( 'Total', 'woocommerce' ); ?></th>
  <?php if ( $order->payment_method_title ) : ?>
  <th class="method"><?php _e( 'Payment Method', 'woocommerce' ); ?></th>
  <?php endif; ?>
 </tr>
 <tr>
  <td class="order" data-title="<?php _e( 'Order Number', 'woocommerce' ); ?>"><strong><?php echo $order->get_order_number(); ?></strong></td>
  <td class="date" data-title="<?php _e( 'Date', 'woocommerce' ); ?>"><strong><?php echo date_i18n( get_option( 'date_format' ), strtotime( $order->order_date ) ); ?></strong></td>
  <td class="total" data-title="<?php _e( 'Total', 'woocommerce' ); ?>"><strong><?php echo $order->get_formatted_order_total(); ?></strong></td>
  <?php if ( $order->payment_method_title ) : ?>
  <td class="method" data-title="<?php _e( 'Payment Method', 'woocommerce' ); ?>"><strong><?php echo $order->payment_method_title; ?></strong></td>
  <?php endif; ?>
 </tr>
</table>

Mentre questo è il CSS che ricrea la magia del No more tables

.woocommerce .woocommerce-thankyou-order-details {
 background: #f6faec none repeat scroll 0 0;
 border: 3px solid #d3e8a0;
 list-style: outside none none;
 margin: 0 0 30px;
 padding: 15px;
}
.woocommerce .woocommerce-thankyou-order-details.order_details {
 width: 100%;
 background: #F6FAEC;
}
.woocommerce-thankyou-order-details.order_details tr,
.woocommerce-thankyou-order-details.order_details th,
.woocommerce-thankyou-order-details.order_details td {
 background: transparent none repeat scroll 0 0 !important;
}
.woocommerce-thankyou-order-details.order_details th {
 font-size: 12px;
 font-weight: 300;
 padding: 15px 15px 0;
 position: relative;
 text-transform: uppercase;
}
.woocommerce-thankyou-order-details.order_details td {
 padding: 15px;
 position: relative;
}
.woocommerce-thankyou-order-details.order_details th,
.woocommerce-thankyou-order-details.order_details th::after {
 display: none;
}
.woocommerce-thankyou-order-details.order_details td::after {
 background: transparent none repeat scroll 0 0;
 border-bottom: 1px dashed #d3ced2;
 bottom: 0;
 content: "";
 display: block;
 height: 100%;
 position: absolute;
 right: 0;
 top: auto;
 width: 100%;
}
.woocommerce-thankyou-order-details.order_details th:last-child::after,
.woocommerce-thankyou-order-details.order_details td:last-child::after {
 display: none;
}
/* codice necessario per ricreare il responsive (No more tables) nella tabella del carrello, a larghezza dello schermo fino a 991px */
@media (max-width: 991px) {
 .woocommerce #content table.cart .product-thumbnail,
 .woocommerce table.cart .product-thumbnail,
 .woocommerce table.my_account_orders tr td.order-actions::before,
 .woocommerce table.shop_table_responsive tr td.actions::before,
 .woocommerce table.shop_table_responsive tr td.product-remove::before,
 .woocommerce-page #content table.cart .product-thumbnail,
 .woocommerce-page table.cart .product-thumbnail,
 .woocommerce-page table.my_account_orders tr td.order-actions::before,
 .woocommerce-page table.shop_table_responsive tr td.actions::before,
 .woocommerce-page table.shop_table_responsive tr td.product-remove::before {
  display: none;
 }
 .woocommerce table.shop_table_responsive tr td::before,
 .woocommerce-page table.shop_table_responsive tr td::before {
  content: attr(data-title) ": ";
  float: left;
  font-weight: 300;
 }
 .woocommerce table.shop_table_responsive tr td,
 .woocommerce-page table.shop_table_responsive tr td {
  display: block;
  text-align: right !important;
 }
 .woocommerce table.shop_table_responsive tr td,
 .woocommerce-page table.shop_table_responsive tr td {
  text-align: right !important;
 }
 .woocommerce table.shop_table_responsive tr,
 .woocommerce-page table.shop_table_responsive tr {
  display: block;
 }
 .woocommerce table.shop_table thead {
  display: none;
 }
}

@media (min-width: 480px) {

}
@media (min-width: 768px) {

}
@media (min-width: 992px) {
 .woocommerce-thankyou-order-details.order_details th {
  display: table-cell;
 }
 .woocommerce-thankyou-order-details.order_details td {
  padding: 0 15px 15px;
  position: relative;
 }
 .woocommerce-thankyou-order-details.order_details th::after,
 .woocommerce-thankyou-order-details.order_details td::after {
  background: transparent none repeat scroll 0 0;
  border-right: 1px dashed #d3ced2;
  content: "";
  display: block;
  height: 100%;
  position: absolute;
  right: 0;
  top: 0;
  width: 1px;
 }
}

Altro articolo che puoi leggere riguardante il mondo delle vendite, anche se in senso lato, è Tabella dei prezzi con Bootstrap

Fonte:

Codice file thankyou.php

Condividi questo articolo