Woo-commerce复合产品在一条线上？

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