Question

我想知道如何在woocommerce的购物页面的同一行中对齐“价格”和“添加到购物车”按钮。

Answer 1

您可以在其他CSS中添加以下CSS

.products span.price{
    float:left;
    margin: 10px 0px;
}
.products a.button.add_to_cart_button{
    float: right;
}

我已经检查了并且可以正常工作。您可以查看此屏幕截图

Answer 2

我们在这里。我假设您已经在安装中创建了woocommerce文件夹。现在转到plugins > woocommerce > templates，并将文件content-product.php直接复制到子主题的woocommerce文件夹中。经过上述步骤后，结构应如下所示：

- themes
  - Storefront
  - YourChildTheme
    - functions.php
    - woocommerce <- you need create this folder
        - content-product.php

完成此操作后，您需要打开复制的文件。用此内容替换文件的内容并保存文件：

<?php
/**
 * The template for displaying product content within loops
 *
 * This template can be overridden by copying it to yourtheme/woocommerce/content-product.php.
 *
 * HOWEVER, on occasion WooCommerce will need to update template files and you
 * (the theme developer) will need to copy the new files to your theme to
 * maintain compatibility. We try to do this as little as possible, but it does
 * happen. When this occurs the version of the template file will be bumped and
 * the readme will list any important changes.
 *
 * @see     https://docs.woocommerce.com/document/template-structure/
 * @package WooCommerce/Templates
 * @version 3.4.0
 */

defined( 'ABSPATH' ) || exit;

global $product;

// Ensure visibility.
if ( empty( $product ) || ! $product->is_visible() ) {
    return;
}
?>
<li <?php wc_product_class(); ?>>
    <?php
    /**
     * Hook: woocommerce_before_shop_loop_item.
     *
     * @hooked woocommerce_template_loop_product_link_open - 10
     */
    do_action( 'woocommerce_before_shop_loop_item' );

    /**
     * Hook: woocommerce_before_shop_loop_item_title.
     *
     * @hooked woocommerce_show_product_loop_sale_flash - 10
     * @hooked woocommerce_template_loop_product_thumbnail - 10
     */
    do_action( 'woocommerce_before_shop_loop_item_title' );

    /**
     * Hook: woocommerce_shop_loop_item_title.
     *
     * @hooked woocommerce_template_loop_product_title - 10
     */
    do_action( 'woocommerce_shop_loop_item_title' );

    /**
     * Hook: woocommerce_after_shop_loop_item_title.
     *
     * @hooked woocommerce_template_loop_rating - 5
     * @hooked woocommerce_template_loop_price - 10
     */
    ?>
    <div class="shop-loop-item-details-wrapper">
        <?php 
        do_action( 'woocommerce_after_shop_loop_item_title' );
        do_action( 'woocommerce_after_shop_loop_item' );
        ?>
    </div>
    <?php

    /**
     * Hook: woocommerce_after_shop_loop_item.
     *
     * @hooked woocommerce_template_loop_product_link_close - 5
     * @hooked woocommerce_template_loop_add_to_cart - 10
     */
    //do_action( 'woocommerce_after_shop_loop_item' );
    ?>
</li>

然后，打开定制程序，然后转到其他CSS 部分。将此粘贴到字段中并发布页面：

.shop-loop-item-details-wrapper {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    -ms-flex-pack: distribute;
        justify-content: space-around;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    padding-top: 8px;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
}

.shop-loop-item-details-wrapper .woocommerce-loop-product__link {
    margin-right: 8px;
    -webkit-box-flex: 1;
        -ms-flex: 1;
            flex: 1;
}

.shop-loop-item-details-wrapper .woocommerce-loop-product__link .price {
    font-size: 22px;
    margin-bottom: 0 !important;
    text-align: left;
}

.shop-loop-item-details-wrapper .add_to_cart_button {
    margin-bottom: 0;
}

重点是，这并不是针对手机优化的，因为我会在此处使用列布局，并且不会在价格下方显示添加到购物车按钮。

将浏览器调整为较小的分辨率时，您会发现价格在按钮上方的某个位置，看起来不太好。

这里的问题是，正如我在上面已经说过的，价格是具有动态长度的动态值。因此，您应该考虑将一些代码片段包装到@media标记中，以2 x列布局的分辨率使用。

在这种情况下，您需要检查何时需要使用此功能。我不知道您的商店有哪些价格。因此，继续输入最高价格，然后调整浏览器的大小。当项目移到按钮上方时，您知道需要使用2-col布局的和。因此，例如当浏览器的宽度为980px时，如果宽度大于980px，则需要以这种方式修改其他CSS以仅附加1-col布局：

@media (min-width: 981px) {
    .shop-loop-item-details-wrapper {
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -ms-flex-direction: row;
        flex-direction: row;
    }

    .shop-loop-item-details-wrapper .woocommerce-loop-product__link {
        margin-right: 8px;
    }
}

@media (max-width: 980px) {
    .shop-loop-item-details-wrapper {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
    }

    .shop-loop-item-details-wrapper .woocommerce-loop-product__link .price {
        margin-bottom: 8px !important;
    }
}

.shop-loop-item-details-wrapper {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: distribute;
    justify-content: space-around;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    padding-top: 8px;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}

.shop-loop-item-details-wrapper .woocommerce-loop-product__link {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
}

.shop-loop-item-details-wrapper .woocommerce-loop-product__link .price {
    font-size: 22px;
    margin-bottom: 0 !important;
    text-align: left;
}

.shop-loop-item-details-wrapper .add_to_cart_button {
    margin-bottom: 0;
}

希望它适合您。我已经对其进行了测试，可以确认它是否有效：

如果可行，将这个答案标记为解决方案并打勾，那就好了。

如何在Woocommerce商店页面的同一行中对齐“价格”和“添加到购物车”按钮？

2 个答案: