Question

我是一个非常初学者，使用WooCommerce中的插件和在价格之前显示句子的插件，我需要反转它的顺序。

现在是：

你可以获得2分100美元（单行）

其中：“您可以获得2分”是来自<span class="wc-pts-rwd-product-message">的消息，而100美元来自<span class="amount">

html是这样的：

<div class="single_variation">
    <span class="price">
    <span class="wc-pts-rwd-product-message">
    <span class="amount">$100</span>
    </span>
</div>

我应该如何编写css以使其显示如下：

$ 100 你可以获得2分

首先是价格（金额），而不是价格以下点数的消息。

我发现这是来自插件所以我无法更改它或更新将受到损害。

如果我只能通过CSS完成它？有人可以帮我这个吗？非常感谢！

Answer 1

你可以这样试试 -

＆＃13;

 <div class="single_variation">
        <strong class="amount">$100</strong>
        <span class="wc-pts-rwd-product-message">You can earn<span class="price"> 1 </span> points</span>
    </div>

＆＃13;

Answer 2

这是一种非常糟糕的方法，只能使用css：

.single_variation .price{
  display: inline-block;
  width: 180px;
}
.single_variation .wc-pts-rwd-product-message{
  float: right;
}
.single_variation .amount{
  float: left;
}

根据字体大小调整180px值。 css不太适合这项任务，如果可以，最好更改HTML流程。

要在WordPress中执行此操作，您需要找到输出此内容的模板并在主题中覆盖它。这样，当插件更新时，您的更改不会被覆盖。下面是一些让您开始修改WordPress插件而无需更改核心代码的方法：

挂钩和过滤器 - http://blog.teamtreehouse.com/hooks-wordpress-actions-filters-examples
覆盖模板 - https://docs.woothemes.com/document/template-structure/
使用子主题修改主题 - https://codex.wordpress.org/Child_Themes

修改css的方法是安装Jetpack插件并激活它们的css模块。然后在Appearance->Edit CSS下的WordPress管理区域中，您将能够添加自己的css声明，这些声明可以覆盖原始css。

我需要使用css

2 个答案: