Woocommerce добавить в корзину кнопку позиционирования - PullRequest
0 голосов
/ 18 октября 2018

Я создаю тему WordPress для Woocommerce.Пока все хорошо, за исключением кнопки «добавить в корзину» на странице товаров (архива).Я могу изменить размещение цены и штрафа товара, но элемент add to cart, похоже, находится вне оболочки, в которой находится фактическая плитка товара. Итак, теперь кнопка создает дополнительное пространство рядом с фактической плиткой, в которой она находится.Я уже пробовал абсолютное позиционирование, но это становится кошмаром в адаптивном дизайне.

the issue

, как вы можете видеть на картинке;Я изменил текст «добавить в корзину» на изображение, но результат тот же, когда он был только текстовым.Я копался в файлах php-шаблонов Woocommerce, но до сих пор не могу найти способ разместить кнопку внутри вложения фактической плитки.

add-to-cart.php:

if ( ! defined( 'ABSPATH' ) ) {
    exit;
}

global $product;

echo apply_filters( 'woocommerce_loop_add_to_cart_link', // WPCS: XSS ok.
    sprintf( '<a href="%s" data-quantity="%s" class="%s" %s>%s</a>',
        esc_url( $product->add_to_cart_url() ),
        esc_attr( isset( $args['quantity'] ) ? $args['quantity'] : 1 ),
        esc_attr( isset( $args['class'] ) ? $args['class'] : 'button' ),
        isset( $args['attributes'] ) ? wc_implode_html_attributes( $args['attributes'] ) : '',
        esc_html( $product->add_to_cart_text() )
    ),
$product, $args );

css относительно элемента:

a.button.product_type_simple.add_to_cart_button.ajax_add_to_cart {
    color: #000;
    font-size: 18px;
    font-weight: 600;
    display: inline;
    position: relative;
    background-image: url(img/cart.svg);
    height: 32px;
    width: 37px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

В конце я бы хотел переместить кнопку корзины впрямо под ценой.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...