一条线上的 Woocommerce 复合产品？答案

【问题标题】：Woo-commerce Composite Products in one line?一条线上的 Woocommerce 复合产品？
【发布时间】：2018-10-30 23:02:23
【问题描述】：

我不知道将我的复合产品组件样式设置为一行？似乎它们都是单独的 div。

像这样：https://www.exit82art.com/shop/selena-fara/pretty-things

我的网站：https://exit82artstore.blackbearweb.us/product/pretty-things/

【问题讨论】：

你想要达到什么目的？要将 (STONE DRINK COASTER, NEOPRENE COASTER) 之类的组件做成一条线？

标签： php html css wordpress woocommerce

【解决方案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的浏览器支持

【讨论】：

非常感谢，这就是我真正想要的。我确实通过我的主题定制器添加了纯 CSS，并且像你说的那样工作。 exit82artstore.blackbearweb.us/product/pretty-things 但是，我无法让两个组件正确排列，我修改了这些值，但我没有成功。