WooCommerce: как сделать фото товара на всю ширину страницы

Представьте, что вы продаёте диваны.

Стандартный макет карточки товара в 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 вашей темы. В консоли выберите «Внешний вид» — «Настроить» — «Дополнительные стили»