简体   繁体   English

从产品类别页面删除边栏| WordPress的Woocommerce

[英]Remove Sidebar from Product Category Page | Wordpress Woocommerce

My question is, how can i remove the sidebar only for particular Product category "Slug" and not for its child slugs. 我的问题是,如何仅针对特定产品类别“子弹”而不是其子弹子删除侧栏。
If the url is like below - remove the side bar and make the page full width only for slugs "sanitaryware" and "closets" http://www.example.com/product-category/sanitaryware/ 如果网址如下所示-移除侧边栏,并使页面仅用于“卫生洁具”和“壁橱” sl http://www.example.com/product-category/sanitaryware/
http://www.example.com/product-category/sanitaryware/closets/ http://www.example.com/product-category/sanitaryware/closets/

I dont want to remove the sidebar for all "Product Category" reason, i want the side bar to show up the grand-child slug"one-piece-closets": 我不希望出于所有“产品类别”的原因而删除边栏,而是希望边栏显示孙子“一件壁橱”:
http://www.example.com/product-category/sanitaryware/closets/one-piece-closets http://www.example.com/product-category/sanitaryware/closets/one-piece-closets

Code: that i am using in function.php - this is removing the side bar in all the product categories of the website. 代码:我正在function.php中使用-这将删除网站所有产品类别中的侧栏。

  <?php
            /**
             * woocommerce_sidebar hook
             *
             * @hooked woocommerce_get_sidebar - 10
             */
            if (!is_product_category('sanitaryware')){
        do_action('storefront_sidebar');
}
?>

Based on your desire to hide the sidebar on top-level categories and their immediate children, we will need a system for determining the hierarchical "depth" of any term archive. 根据您希望在顶级类别及其直属子类别中隐藏侧边栏的需求,我们将需要一个系统来确定任何术语存档的分层“深度”。 Similar to how people often get the "top-level" parent term we can do a while loop of getting a term's term object and checking for the term's parent. 与人们经常获得“顶级”父项的方式类似,我们可以做while循环,以获取项的术语对象并检查该项的父项。 In our case instead of returning the top-level parent, we'll just keep a count and return that. 在我们的例子中,我们将保留一个计数并将其返回,而不是返回顶级父级。

/**
* Returns depth level of product category
*
* @param    string      $catid  Product category ID to be checked
* @return   string      $depth  how many categories deep is this term in the hierarchy
*/
function so_32165017_get_product_cat_depth($catid) {
    $depth = 0;
    while ($catid) {
        $cat = get_term_by('id', $catid, 'product_cat'); // get the object for the catid
        if( $cat->parent > 0 ){
            $depth++;
        }
        $catid = $cat->parent; // assign parent ID (if exists) to $catid
        // the while loop will continue whilst there is a $catid
    }
    return $depth;
}

Now that we have something we can use as a condition we can conditionally remove the WooCommerce sidebar: 现在我们有了可以用作条件的东西,我们可以有条件地删除WooCommerce侧栏:

/**
* Hide the sidebar for items 2 levels deep or more
*/
function so_32165017_conditionally_remove_sidebar(){
    if( is_product_category()){
        $t_id = get_queried_object()->term_id;
        if( so_32165017_get_product_cat_depth( $t_id ) < 2 ){
            remove_action( 'woocommerce_sidebar', 'woocommerce_get_sidebar', 10 );
            // could be theme specific ex: Storefront
            remove_action( 'storefront_sidebar', 'storefront_get_sidebar', 10 );
        }
    }
}
add_action( 'woocommerce_before_main_content', 'so_32165017_conditionally_remove_sidebar' );

Edit/Update 编辑/更新

If you also want to add a custom body class to make the sidebar-less pages easier to style then I believe you can remove the actions in question from the body_class filter at the same time you are actually filtering the body class. 如果您还想添加一个自定义主体类以使无侧边栏的页面更易于样式化,那么我认为您可以在实际过滤主体类的同时从body_class过滤器中删除有问题的动作。

/**
* Hide the sidebar for items 2 levels deep or more
*/
function so_32165017_conditionally_remove_sidebar( $class ){
    if( function_exists('is_product_category') && is_product_category() ){
        $t_id = get_queried_object()->term_id;
        if( so_32165017_get_product_cat_depth( $t_id ) < 2 ){
            remove_action( 'woocommerce_sidebar', 'woocommerce_get_sidebar', 10 );
            // could be theme specific ex: Storefront
            remove_action( 'storefront_sidebar', 'storefront_get_sidebar', 10 );
            // add a custom body class
            $class[] = 'full-width';
        }
    }
    return $class;
}
add_action( 'body_class', 'so_32165017_conditionally_remove_sidebar' );

One approach would be to make a custom template and prevent the sidebar from rendering if a Product Category page is being viewed. 一种方法是制作自定义模板,并在查看“产品类别”页面时阻止侧栏显示。 Following the upgrade-safe suggestions from the Woocommerce docs you should: 按照Woocommerce文档中的安全升级建议,您应该:

1) Go to the wp-content/plugins/woocommerce/templates/ directory and copy the archive-product.php file 1)转到wp-content / plugins / woocommerce / templates /目录并复制archive-product.php文件

2) Create a woocommerce directory in your theme directory (eg wp-content/themes/your-theme/woocommerce) 2)在主题目录中创建woocommerce目录(例如wp-content / themes / your-theme / woocommerce)

3) Create a copy of wp-content/plugins/woocommerce/templates/archive-product.php and put place it in wp-content/themes/your-theme/woocommerce/ and name the file archive-product.php 3)创建wp-content/plugins/woocommerce/templates/archive-product.php的副本,并将其放在wp-content / themes / your-theme / woocommerce /中 ,并将文件命名为archive-product.php

4) Look near the bottom of your new custom file and find: 4)在新的自定义文件底部附近查找,然后找到:

do_action( 'woocommerce_sidebar' );

5) Replace that line of code with: 5)用以下代码替换该行代码:

if (!is_product_category('sanitaryware') && !is_product_category('Faucet')) {
   do_action( 'woocommerce_sidebar' );
}

6) To make the Product Category page content be full-width you could add a class called product-category to the <body> of these pages using a filter. 6)要使“产品类别”页面的内容全角,可以使用过滤器在这些页面的<body>中添加一个名为product-category

To add this new class, insert this code in your functions.php file: 要添加这个新类,请将以下代码插入您的functions.php文件中:

// Add specific CSS class by filter
add_filter( 'body_class', 'product_categories' );
function product_categories( $classes ) {
    // add 'class-name' to the $classes array
    if (is_product_category('sanitaryware') && is_product_category('Faucet')) {
        $classes[] = 'product-category';
    }
    // return the $classes array
    return $classes;
}

7) Then in your theme's stylesheet you could target the Product Category pages using this CSS selector: 7)然后,您可以在主题的样式表中使用此CSS选择器定位“产品类别”页面:

body.product-category { /* place Product Category page specific CSS here */ }

Since I don't know the specifics of your theme, I can't tell you the HTML elements you'd want to target to set 100% width to, but if the page content was in something like <div id="content"> you could set the CSS like so: 由于我不知道您主题的细节,因此我无法告诉您要设置100%宽度为目标的HTML元素,但是如果页面内容是<div id="content">您可以像这样设置CSS:

body.product-category #content { 
    width: 100%;
    float: none;
} 

You can remove the sidebar from category page override archive-product.php or use action hook in function.php in your current theme in WordPress. 您可以从类别页面替代archive-product.php中删除边栏,也可以在WordPress当前主题中的function.php中使用动作挂钩。

Instead of editing these files directly within the plugin (which is a very bad idea because once update the plugin and all of your changes will be lost!), you can copy them into your theme: 您可以直接将它们复制到主题中,而不是直接在插件中编辑这些文件(这是一个非常糟糕的主意,因为一旦更新了插件,所有更改都将丢失!)。

  • In your theme directory, make a new folder called “WooCommerce.” 在主题目录中,新建一个名为“ WooCommerce”的文件夹。
  • Navigate to the WooCommerce plugin directory and open the "templates" folder. 导航到WooCommerce插件目录,然后打开“模板”文件夹。 The templates folder has a lot of subfolders with all of the different templates that WooCommerce uses. template文件夹包含许多子文件夹,这些子文件夹包含WooCommerce使用的所有不同模板。 Fortunately, the template file structure and naming in WooCommerce is easy to follow. 幸运的是,WooCommerce中的模板文件结构和命名很容易遵循。
  • In your newly created "WooCommerce" folder, copy the template file that you want to edit. 在新创建的“ WooCommerce”文件夹中,复制要编辑的模板文件。

Remember to keep the directory structure the same here. 请记住,此处的目录结构保持相同。 If the template you want to edit is within a subfolder then remember to create that subfolder within your theme's directory. 如果要编辑的模板在子文件夹中,请记住在主题目录中创建该子文件夹。

In archive-product.php - archive-product.php中 -

<?php
/**
 * woocommerce_sidebar hook
 *
 * @hooked woocommerce_get_sidebar - 10
 */
do_action('woocommerce_sidebar');?>

this code display sidebar on category page remove this code and save file . 此代码在类别页面上的显示侧栏会删除此代码并保存文件。

or 要么

To remove sidebar from category page you want to use action hook in 要从类别页面删除边栏,请使用动作挂钩
function.php file - function.php文件-

    add_filter( 'body_class', 'remove_sidebar' );
    function remove_sidebar()
    {
        if( is_product_category()) { 
         remove_action( 'woocommerce_sidebar', 'woocommerce_get_sidebar', 10);
       }
    }

Next, we have to edit the style.css in your theme folder- 接下来,我们必须在主题文件夹中编辑style.css-

body.product-category #content
    {
            width: 100%;
    }

Here you can get WooCommerce Action and Filter Hook - https://docs.woothemes.com/wc-apidocs/hook-docs.html 在这里你可以得到WooCommerce行动和筛选器挂钩- https://docs.woothemes.com/wc-apidocs/hook-docs.html

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM