【问题标题】: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 但是,我无法让两个组件正确排列,我修改了这些值,但我没有成功。
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 2021-06-10
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2016-09-13
  • 2015-08-08
  • 2020-07-23
相关资源
最近更新 更多