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: