Представьте, что вы продаёте диваны.
Стандартный макет карточки товара в WooCommerce состоит из двух блоков:слева — фото товарасправа — название, цена и кнопка заказа.
Перевод: WooCommerce: Full Width Featured Image @ Single Product Page
Выглядит карточка товара очень некрасиво. Поэтому лучше показать изображение на всю ширину страницы.
Пример карточки товара с изображением на всю ширину
Для этого добавим код CSS:
/* Изображение товара на всю ширину */ .woocommerce #content div.product div.images, .woocommerce div.product div.images, .woocommerce-page #content div.product div.images, .woocommerce-page div.product div.images, .woocommerce #content div.product div.summary, .woocommerce div.product div.summary, .woocommerce-page #content div.product div.summary, .woocommerce-page div.product div.summary { float: none; width: 100%; max-width: unset; clear: both; } .woocommerce-product-gallery img { width: 100%; } .storefront-breadcrumb { margin-bottom: 0; }
Добавьте этот код в CSS вашей темы. В консоли выберите «Внешний вид» — «Настроить» — «Дополнительные стили»