php - 在WooCommerce上的“特色产品”小部件下方放置“立即购买”按钮？

我要针对儿童主题设置“特色产品”区域时遇到了一些麻烦。我使用了PHP循环来展示特色产品。我一直在成功地对它们进行样式设置，直到最后这一点为止，在这里我将剩余的图像浮动到彼此相邻的位置，但这似乎也浮动了“立即购买”按钮。我试图清除：离开但没有运气。有任何想法吗？

HTML / PHP：

           <div class="featured-products">
           <h1 class="featured-products">Featured Products</h1>
           <?php
            $meta_query   = WC()->query->get_meta_query();
            $meta_query[] = array(
                'key'   => '_featured',
                'value' => 'yes'
            );
            $args = array(
                'post_type'   =>  'product',
                'stock'       =>  1,
                'showposts'   =>  4,
                'orderby'     =>  'date',
                'order'       =>  'DESC',
                'meta_query'  =>  $meta_query
            );

            $loop = new WP_Query( $args );
            while ( $loop->have_posts() ) : $loop->the_post(); global $product; ?>

                <li>
                    <?php
                        if ( has_post_thumbnail( $loop->post->ID ) )
                            echo get_the_post_thumbnail( $loop->post->ID, 'shop_catalog' );
                        else
                            echo '<img class="image-featured" src="' . woocommerce_placeholder_img_src() . ' />';
                    ?>

                    <?php
                        woocommerce_template_loop_add_to_cart( $loop->post, $product );
                    ?>
                </li>

        <?php
            endwhile;
            wp_reset_query();
        ?>
        </div>
            endwhile;
            wp_reset_query();
        ?>

CSS：

a.button.add_to_cart_button.alt {
    padding: 15px;
    display: inline;
    background-color: #95020a;
    clear: left;
}

.featured-products img {
    width: 270px;
    height: 180px;
    float: left;
    margin-left: 20px;
    margin-top: 10px;
}

我以为清除浮子是一个简单的解决方法，但是我现在已经花了20分钟尝试解决这个问题。

为所有帮助人员欢呼。

最佳答案

使用以下提到的CSS：

.featured-products li{float:left; margin-left:20px;}

并编辑图像的css属性

.featured-products img{ height: 180px;
    margin-left: 0;
    margin-top: 10px;
    width: 270px;
display:block;
}

也编辑此：

a.button.add_to_cart_button.alt {
    background-color: #95020a;
    display: block;
    padding: 15px;
}

关于php - 在WooCommerce上的“特色产品”小部件下方放置“立即购买”按钮？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/36334942/