woocommerce - 我在哪里可以为 woocommerce 包装器添加另一个类？

Question

Woocommerce 有一个带有“woocommerce”类的 div 我想添加另一个类或删除该类。那是哪个文件？

   <div class="woocommerce"></div>

Answer 1

虽然 WooCommerce 没有提供任何支持的方法来实现这一点，但您可以“破解”直接构建包装器的函数。

问题
<div class="woocommerce"></div>
“主包装”。几乎所有 WooCommerce 都包含在其中。

WooCommerce 插件“保护”了它的主要包装器，因为它依赖于它来做各种事情(样式、js 功能)等。出于这个原因，该插件没有可用的过滤器，因此可以 Hook 并覆盖它。

顺便说一句，不建议删除它，宁愿向其中添加额外的 css 类，这是可能的。

甚至还有一个 Github issue这似乎表明 WooCommerce “不会修复”它(至少现在)。

用例

在可能存在的所有可能用例中，我的是将额外的 css 类应用到包装器 <div class="woocommerce"></div>特别适合我的主题的 CSS 框架(Bootstrap 4)。

我只是想让它变成 <div class="woocommerce container-fluid container-application"></div>
但

如何安全地改变它？

进一步检查

看 WooCommerce 的 class-wc-shortcodes.php下includes/目录，让我们继续剖析它。如果你跳转到 this线你可以一瞥shortcode_wrapper()函数，它构建了那个“烦人的”包装器。跳转 here查看一系列 woocommerce 短代码 slug，它们的内容将包含在 <div class="woocommerce"></div> 中。 .

或者根据我自己的用例，在 this特定行，我的帐户页面短代码在 shortcode_wrapper() 内返回功能，这再次导致所有“我的帐户”页面的内容都位于 <div class="woocommerce"></div> 中。 .

对于 WooCommerce 使用的其他短代码也是如此，因此请继续解决方案部分，您可能可以在“我的帐户”以外的其他 WooCommerce 页面上更改包装器。

解决方案 (!)

“关闭整个事情”

我们将破解构建 <div class="woocommerce"></div> 的函数。直接地。

我们必须通过调用 WC_Shortcodes() 创建一个新的短代码。类(class)。它会将所有内容从特定的 WooCommerce 短代码“重定向”到我们新创建的短代码。

现在，以下功能专门针对“我的​​帐户”页面，但可以轻松调整以有条件地针对包含 WooCommerce 短代码的其他页面。

因此，大多数人可能都知道，默认的 WooCommerce 页面只不过是您可以在管理仪表板下管理的普通 WordPress 页面。但是，这些页面也会显示默认 WooCommerce 短代码的内容，例如 [woocommerce_my_account] ，这是我们稍后将替换的。

将下面的函数放在你的functions.php 中，保存并上传。

    /**
    * WooCommerce My Account
    * Returns custom html / css class for WooCommerce default wrapper on My Account pages
    * @see https://github.com/woocommerce/woocommerce/blob/857c5cbc5edc0451cf965b19788e3993804d4131/includes/class-wc-shortcodes.php#L59
    *
    **/
    if ( class_exists( 'woocommerce' ) ) {

      function wp_wc_my_account_shortcode_handler( $atts ) {

        $whichClass = new WC_Shortcodes();
        $wrapper = array(
          'class'  => 'woocommerce container-fluid container-application',
          'before' => null,
          'after'  => null
        );

        return $whichClass->shortcode_wrapper( array( 'WC_Shortcode_My_Account', 'output' ), $atts , $wrapper );

      }

      add_shortcode( 'new_woocommerce_my_account', 'wp_wc_my_account_shortcode_handler' );
    } 

------------------//------------------

现在，让我们前往浏览器上的“我的帐户”页面并检查 html，您会发现没有任何变化。那是因为我们现在必须去 Admin >> pages >> My Account，然后替换默认的 WooCommerce [woocommerce_my_account]带有 [new_woocommerce_my_account] 的短代码.

更新/保存管理仪表板下的我的帐户页面，现在所有我的帐户页面内容都将包含在我们新的 <div class="woocommerce container-fluid container-application"></div> 中。 .

奖金

为包装器构建自定义 html

如果您想要一个自定义的 html 标签用于包装器，只需将标签与您的 css 类/类一起传递即可完成这项工作。将上面函数的以下部分更改为:

        $wrapper = array(
          'class'  => '',
          'before' => '<section class="woocommerce container-fluid container-application>',
          'after'  => '</section>'
        );

现在而不是 <div></div> ，我们的包装器将是 <section></section> .

只需遵循(增强)逻辑，您就可以替换几乎所有 WooCommerce 页面上的包装器，例如产品、产品、产品类别、购物车、结帐、我的帐户等。