我在尝试为我的子主题设置“特色产品”区域时遇到了一些麻烦。我使用 PHP 循环来显示特色产品。在最后一点之前,我一直在成功地设计它们的样式,在那里我将图像向左浮动以将它们彼此相邻放置,但这似乎也 float 了“立即购买”按钮。我试图清除:离开但没有运气。有任何想法吗?
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;
}
我原以为这只是清除 float 的简单修复,但我现在已经挠头 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 上将 'Buy Now' 按钮定位在我的 'Featured Products' 小部件下方?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36334942/