Adding another Column to a table in a wordpress plugin

Question

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">&nbsp;</th>

                <?php if ( $wishlist_table_row['move'] || $wishlist_table_row['add_to_card'] ) { ?>
                    <th class="product-action">&nbsp;</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>

Answer 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.