Evening Everyone
I am working on a wordpress website which has a product wishlist display plugin.
Now its only displaying the products in a single column. I would like it to be in a grid.
I am not the best with tables. Could someone assist me?
I know your not supposed to ask for help but rather do it yourself. But I have this due tomorrow and I am stuck...I apologize to the Admins if this question is breaking any rules.
Code:
<?php /** * The Template for displaying wishlist. * * @version 1.3.1 * @package TInvWishlist\Template */ if ( ! defined( 'ABSPATH' ) ) { exit; // Exit if accessed directly. } ?> <div class="tinv-wishlist woocommerce tinv-wishlist-clear"> <?php do_action( 'tinvwl_before_wishlist', $wishlist ); ?> <?php if ( function_exists( 'wc_print_notices' ) ) { wc_print_notices(); } ? > <form action="<?php echo esc_url( tinv_url_wishlist() ); ?>" method="post" autocomplete="off"> <?php do_action( 'tinvwl_before_wishlist_table', $wishlist ); ?> <table class="tinvwl-table-manage-list"> <thead> <tr> <?php if ( $wishlist_table['colm_checkbox'] ) { ?> <th class="product-cb"><input type="checkbox" class="global-cb"></th> <?php } ?> <th class="product-remove"></th> <th class="product-thumbnail"> </th> <?php if ( $wishlist_table_row['move'] || $wishlist_table_row['add_to_card'] ) { ?> <th class="product-action"> </th> <?php } ?> </tr> </thead> <tbody> <?php do_action( 'tinvwl_wishlist_contents_before' ); ?> <?php foreach ( $products as $wl_product ) { $product = apply_filters( 'tinvwl_wishlist_item', $wl_product['data'] ); unset( $wl_product['data'] ); if ( $wl_product['quantity'] > 0 && apply_filters( 'tinvwl_wishlist_item_visible', true, $wl_product, $product ) ) { $product_url = apply_filters( 'tinvwl_wishlist_item_url', $product->get_permalink(), $wl_product, $product ); ?> <tr class="<?php echo esc_attr( apply_filters( 'tinvwl_wishlist_item_class', 'wishlist_item', $wl_product, $product ) ); ?>"> <?php if ( $wishlist_table['colm_checkbox'] ) { ?> <td class="product-cb"> <?php echo apply_filters( 'tinvwl_wishlist_item_cb', sprintf( // WPCS: xss ok. '<input type="checkbox" name="wishlist_pr[]" value="%d">', esc_attr( $wl_product['ID'] ) ), $wl_product, $product ); ?> </td> <?php } ?> <td class="product-remove"> <button type="submit" name="tinvwl-remove" value="<?php echo esc_attr( $wl_product['ID'] ); ?>" >X</button> </td> <td class="product-thumbnail"> <?php $thumbnail = apply_filters( 'tinvwl_wishlist_item_thumbnail', $product->get_image(), $wl_product, $product ); if ( ! $product->is_visible() ) { echo $thumbnail; // WPCS: xss ok. } else { printf( '<a href="%s">%s</a>', esc_url( $product_url ), $thumbnail ); // WPCS: xss ok. } ?> </td> <?php if ( $wishlist_table_row['move'] || $wishlist_table_row['add_to_card'] ) { ?> <td class="product-action"> <?php if ( apply_filters( 'tinvwl_wishlist_item_action_move', $wishlist_table_row['move'], $wl_product, $product ) ) { echo apply_filters( 'tinvwl_wishlist_item_move', sprintf( '<button class="button tinvwl_move_product_button" type="button" name="move"><i class="fa fa-arrow-right"></i><span class="tinvwl-txt">%s</span></button>', esc_html( __( 'Move', 'ti-woocommerce-wishlist-premium' ) ) ), $wl_product, $product, $wishlist ); // WPCS: xss ok. } ?> </td> <?php } ?> </tr> <?php } } ?> <?php do_action( 'tinvwl_wishlist_contents_after' ); ?> </tbody> <tfoot> <tr> <td colspan="100%"> <?php do_action( 'tinvwl_after_wishlist_table', $wishlist ); ?> <?php wp_nonce_field( 'tinvwl_wishlist_owner', 'wishlist_nonce' ); ?> </td> </tr> </tfoot> </table> </form> <?php do_action( 'tinvwl_after_wishlist', $wishlist ); ?> <div class="tinv-lists-nav tinv-wishlist-clear"> <?php do_action( 'tinvwl_pagenation_wishlist', $wishlist ); ?> </div> </div> 1 Answers
Answers 1
Remove <table class="tinvwl-table-manage-list"> and </table>
Remove everything from <thead> to </thead>
Change <tbody> to <div class="product-table"> and </tbody> to </div>
Within foreach ( $products as $wl_product ) change <tr to <div and change all <td to <div
Change <tfoot> <tr> <td colspan="100%"> to <div class="product-list-footer">
Update your CSS to set
div.product-table{ box-sizing:border-box; width:100%; /* Or something else appropriate */ } div.product-table > div{ box-sizing:border-box; /* makes sure border and padding fits inside the 50% */ width:50%; } You will need to tweak a lot of other CSS too but this might get you started.
0 comments:
Post a Comment