Agregar otra columna a una tabla en un complemento de wordpress

Tarde para todos

Estoy trabajando en un sitio web de wordpress que tiene un complemento de visualización de lista de deseos de productos.

Ahora solo muestra los productos en una sola columna. Me gustaría que estuviera en una cuadrícula.

No soy el mejor con las tablas. ¿Podría alguien ayudarme?

Sé que se supone que no debes pedir ayuda, sino que debes hacerlo tú mismo. Pero tengo esto para mañana y estoy atascado… Pido disculpas a los administradores si esta pregunta infringe alguna regla.

Código:

<?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="https://stackoverflow.com/questions/45513101/%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>

Remover <table class="tinvwl-table-manage-list"> y </table>

quitar todo de <thead> a </thead>

Cambio <tbody> a <div class="product-table"> y </tbody> a </div>

Dentro de foreach ( $products as $wl_product ) cambio <tr a <div y cambiar todo <td a <div

Cambio <tfoot> <tr> <td colspan="100%"> a <div class="product-list-footer">

Actualice su CSS para establecer

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%;
}

Necesitará modificar muchos otros CSS también, pero esto podría ayudarlo a comenzar.