Question

晚上所有人

我正在一个wordpress网站上工作，该网站有一个产品心愿单显示插件。

现在它只在一列中显示产品。我希望它能够成为一个网格。

我不是最好的桌子。有人可以帮助我吗？

我知道你不应该寻求帮助，而是自己去做。但是我明天就有这个问题而且我被困了......如果这个问题违反任何规则，我向管理员道歉。

代码：

<?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

删除<table class="tinvwl-table-manage-list">和</table>

删除从<thead>到</thead>

的所有内容

将<tbody>更改为<div class="product-table">，将</tbody>更改为</div>

在foreach ( $products as $wl_product )内将<tr更改为<div并将所有<td更改为<div

将<tfoot> <tr> <td colspan="100%">更改为<div class="product-list-footer">

更新您的CSS以设置

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

你也需要调整很多其他的CSS，但这可能会让你开始。

将另一列添加到wordpress插件中的表

1 个答案: