Изменение полей на странице одного продукта woocommerce

Question

Я немного подправил страницу с одним продуктом, все в порядке. Однако между названиями, ценами, вариантами цветов, кнопками и т. Д. Между мобильными устройствами еще хуже. Вам почти нужно прокрутить всю страницу, прежде чем вы сможете добавить товар в корзину. Мне нужно меньше места, чтобы настроить поля между ценой и цветовыми вариациями, а также между цветовыми вариациями и кнопкой добавления в корзину.

Я проверил элементы на своей странице с помощью инструментов Chrome для разработчиков. Я выбрал некоторые вещи, и я могу ВИДЕТЬ, что есть место, в котором ничего нет. Смотрите оранжевую рамку на картинке. Я попробовал коды, показанные ниже, чтобы настроить поля, они, к сожалению, не работают.

.form.variations_form.cart {
margin-top: -5% !important;
}

.woocommerce-variation single_variation {
margin-bottom: -9px;
}

Я думаю, что у меня неправильный класс или ID, хотя я проверил это с помощью инструментов инспектора в Chrome. Правда в том, что я не магический кодер, и я никогда не решу это, пока не получу преимущество. Если у кого-то есть какие-либо советы или изменения в моем коде, я был бы очень рад попробовать.

Answer 1

Несколько вещей, у вас есть поле для этих элементов:

//margin top of the cart section
.woocommerce div.product form.cart, .woocommerce div.product p.cart {
  margin-top: 2.45em;
}

//margin bottom under variations table
.woocommerce div.product form.cart .variations {
  margin-bottom: 1em;
}

//hidden description section, causes a tiny gap above quantity box
.single_variation {
  margin-right: 1em;
}

И у вас есть встроенный отступ для этого элемента:

<div id="wc-stripe-payment-request-wrapper" style="clear:both;padding-top:1.5em;">
  <div id="wc-stripe-payment-request-button" style="display: none;">
    <!-- A Stripe Element will be inserted here. -->
  </div>
</div>

Удалите поля и отступы, и выиметь

Обновление:

Если div из плагина, вы можете попробовать переопределить его, выполнив:

#wc-stripe-payment-request-wrapper {
  padding-top: 0!important;
}

и для части описания у вас также есть несколько полей:

.woocommerce div.product div.summary {
  margin-bottom: 2em;
}

.woocommerce div.product form.cart {
  margin-bottom: 2em;
}

, а на мобильном устройстве у вас это поле снизу:

@media screen and (max-width: 768px) {
  .woocommerce #content div.product div.images, .woocommerce #content div.product div.summary, .woocommerce div.product div.images, .woocommerce div.product div.summary {
    float: none;
    width: 100%;
    margin-bottom: 1em;
  }
}

и у вас естьэтот класс без содержимого, но также занимает немного места, не так важно, но, возможно, попробуйте удалить его, если он вам не нужен:

.product-share-wrap {
}