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

Question

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

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>

之后，打开 Customizer 并转到 Additional 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 标记中，以便在分辨率为 x 的 2-col 布局中使用。

在这种情况下，您需要检查何时需要使用它。不知道你们店里有什么价格。因此，继续输入您拥有的最大价格并调整浏览器的大小。当项目越过按钮时，您就知道需要在哪里使用 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;
}

希望它适合你。我已经对其进行了测试，并且可以确认它可以正常工作：

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