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