Woo-Commerce Composite Products в одной строке?

Question

Я не знаю, объединить ли мои составные компоненты продукта в одну строку? Кажется, они все отдельные div.

Вот так: https://www.exit82art.com/shop/selena-fara/pretty-things

Мой сайт: https://exit82artstore.blackbearweb.us/product/pretty-things/

Answer 1

Woocommerce может быть довольно запутанным, так как шаблоны глубоко вложены и не всегда так написаны.Таким образом, есть два способа достичь того, что вы хотите.

1.Перезаписать шаблоны Woocommerce

Первое, что вы можете сделать, это просто перезаписать шаблон PHP для этого фрагмента.В этом случае вы получите контроль над разметкой и сможете настроить ее в соответствии со своими потребностями.

Ознакомьтесь с документами о пользовательских шаблонах, чтобы выбрать нужный вам: https://docs.woocommerce.com/document/template-structure/

2.Подход с использованием чистого CSS (рекомендуется)

Если вы не хотите поддерживать собственные шаблоны в будущем, вы также можете достичь того же самого с чистым CSS.Просто используйте flex.

.composite_form .component {
  display: flex;
  align-items: center;
  flex-direction: row-reverse;
}

.composite_form .step_title_wrapper {
  margin-left: 20px;
  margin-bottom: 0;
  padding: 0;
}

.component_wrap {
  display: flex;
  align-items: center;
  flex-direction: row-reverse;
}

.component_wrap .price {
  margin-bottom: 0;
}

. Помните о поддержке браузером flex: https://caniuse.com/#search=flex

.