Как совместить кнопки «цена» и «добавить в корзину» в одной строке на странице магазина в Woocommerce?

Question

Я хочу знать, как я могу выровнять кнопки «цена» и «добавить в корзину» в одной строке на SHOP PAGE 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>

После этого откройте 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 двухцветного макета.

В этом случае вам нужно проверить, когда вам нужно это использовать. Я не знаю, какие у вас цены в вашем магазине. Итак, введите самую большую цену, которую вы имеете, и измените размер браузера. Когда элемент переходит через кнопку, вы знаете, где вам нужно использовать двухцветный макет. Так, например, когда он имеет ширину браузера 980px, вам нужно изменить дополнительный CSS таким образом, чтобы добавить макет только в 1 столбец, если ширина больше 980px:

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

Надеюсь, он вам подходит. Я протестировал его и могу подтвердить, что он работает:

Если это сработает, было бы неплохо, если бы вы отметили этот ответ как решение и поставили галочку.