Каталог продуктов Woocommerce в полную ширину и заголовок + цена поверх изображения (наложение)

Question

Я пытаюсь создать каталог товаров полной ширины с минимальным интервалом между изображениями товаров или без них, используя Woocommerce. Мне удалось убрать интервал между изображениями продуктов, но строки не на всю ширину, оставив огромные отступы с обеих сторон. Кроме того, как мне разместить заголовок и цену поверх изображения? Я возился с css, но мне не повезло.

окончательный результат должен выглядеть примерно так:

acnestud ios .com / de / de / man / new- arrivals /

Я был бы очень признателен за помощь,

R

Answer 1

из того, что я прочитал, просто создайте или выберите класс с ценой и добавьте то, что я написал ниже.

.your-class {
position: absolute;
top: 0;
left: 0;
z-index: 10;
}

Что касается сетки, я не могу вам помочь, так как вы ничего не опубликовали. Если вы используете bootstrap, просто используйте контейнер-жидкость вместо класса контейнера.

Для полной сетки в WooCommerce добавьте этот CSS код:

.woocommerce .content-area { width: 100% !important; margin: 0 !important;}

Я проверил, если этот код работает с темой Storefront -> https://themes.woocommerce.com/storefront/product-category/clothing/