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: