Question

Woocommerce有一个div＆class＆＃34; woocommmerce＆＃34;我想添加另一个类或删除该类。那是哪个文件？

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

Answer 1

没有现成的过滤器或类似的东西，可以让你这样做，但你可以过滤the_content来完成它。

function so33675604_add_class_to_checkout( $content ) {
    //condition to check for the proper page
    if ( is_checkout() ) :
        //disable error reporting for falsy formatted html code
        libxml_use_internal_errors(true);

        //parse the $content html (treat content as UTF-8, don't add any doctype or other html wrappers)
        $html = new DOMDocument();
        $html->loadHTML( mb_convert_encoding($content, 'HTML-ENTITIES', 'UTF-8'), LIBXML_HTML_NOIMPLIED | LIBXML_HTML_NODEFDTD );

        //search for the very first div
        $container = $html->getElementsByTagName('div')->item(0);
        //add classes (remember to put woocommerce, since thats been used by some js functions)
        $container->setAttribute('class', 'woocommerce oink');

        //return the result
        return $html->saveHTML();
    endif;
    return $content;
}
//add the filter (priority must be high, so it runs later, after the shortcodes have been processed)
add_filter( 'the_content', 'so33675604_add_class_to_checkout', 100 );

请注意，此函数使用条件，这些可能在wp-ajax调用中无效/如果结帐（或其他），您可能会找到另一种方法来检查，可能是通过全局wp_query。

Answer 2

尽管WooCommerce没有提供任何支持的方法来实现这一目标，但是您可以“黑客”直接构建包装器的功能。

问题

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

“主包装”。 WooCommerce几乎生活在其中。

WooCommerce插件可以“保护”其主要包装，因为它依赖于它来做各种事情（样式，js功能）等。因此，该插件没有可用的过滤器，因此可以挂接到并覆盖它。

顺便说一句，不建议将其删除，而可能会添加其他CSS类。

甚至还有一个Github issue，它似乎声明WooCommerce “不会修复” （至少目前如此）。

用例

在所有可能的用例中，我的方法是将额外的CSS类应用于包装器<div class="woocommerce"></div>，以适合我主题的CSS框架（特别是Bootstrap 4）。

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

但是

如何安全地更改它？

进一步检查

看一下includes/目录下WooCommerce的class-wc-shortcodes.php，让我们继续进行剖析。如果跳到this行，您可以浏览shortcode_wrapper()函数，该函数将构建“烦人的”包装器。跳here可以看到一系列woocommerce短代码段，这些段的内容将包裹在<div class="woocommerce"></div>中。

或者根据我自己的用例，在this的特定行上，我的帐户页面短代码在shortcode_wrapper()函数中返回，这又导致所有“我的帐户”页面的内容都位于{ {1}}。

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

解决方案（！）

“把整个东西都关掉”

我们将直接使用直接构建<div class="woocommerce"></div>的功能。

我们必须通过调用<div class="woocommerce"></div>类来创建新的短代码。它将把所有内容从特定的WooCommerce短代码“重定向”到我们新创建的短代码。

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

因此，您大多数人可能都知道，默认的WooCommerce页面仅是您可以在管理控制台下管理的普通WordPress页面。但是，这些页面也会显示默认的WooCommerce短代码的内容，例如WC_Shortcodes()，这是我们稍后将替换的代码。

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

[woocommerce_my_account]

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

现在，让我们转到浏览器上的“我的帐户”页面并检查html，您会发现没有任何变化。这是因为我们现在必须转到“管理>>”页>>“我的帐户”，然后用/** * 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' ); }替换默认的WooCommerce [woocommerce_my_account]短代码。

更新/保存管理控制台下的“我的帐户”页面，现在所有“我的帐户”页面内容都将包含在新的[new_woocommerce_my_account]中。

奖金

为包装程序构造自定义html

如果您想为包装器使用自定义html标签，只需将标签与CSS类一起传递即可。将上面函数的以下部分更改为：

<div class="woocommerce container-fluid container-application"></div>

现在，包装器将是$wrapper = array( 'class' => '', 'before' => '<section class="woocommerce container-fluid container-application>', 'after' => '</section>' );，而不是<div></div>。

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

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

2 个答案:

问题

用例

进一步检查

解决方案（！）

奖金