WooCommerce 自定义简码产品类别下拉列表

Question

我正在尝试添加 WooCommerce categories-dropdown-shortcode，但这似乎不起作用。我能够看到下拉菜单，但是当我选择一个类别时，它没有注册，也没有任何反应。

sc: [product_categories_dropdown orderby="title" count="0" hierarchical="0"]

放在我的 functions.php 文件中的代码

<?php
/**
 * WooCommerce Extra Feature
 * --------------------------
 *
 * Register a shortcode that creates a product categories dropdown list
 *
 * Use: [product_categories_dropdown orderby="title" count="0"                hierarchical="0"]
 *
 */
add_shortcode( 'product_categories_dropdown','woo_product_categories_dropdown' );
function woo_product_categories_dropdown( $atts ) {
  extract(shortcode_atts(array(
    'count'         => '0',
    'hierarchical'  => '0',
    'orderby'       => ''
    ), $atts));

     ob_start();

    $c = $count;
$h = $hierarchical;
$o = ( isset( $orderby ) && $orderby != '' ) ? $orderby : 'order';

// Stuck with this until a fix for      http://core.trac.wordpress.org/ticket/13258
woocommerce_product_dropdown_categories( $c, $h, 0, $o );
?>
<script type='text/javascript'>
/* <![CDATA[ */
    var product_cat_dropdown = document.getElementById("dropdown_product_cat");
    function onProductCatChange() {
        if ( product_cat_dropdown.options[product_cat_dropdown.selectedIndex].value !=='' ) {
            location.href = "<?php echo home_url(); ?>/?product_cat="+product_cat_dropdown.options[product_cat_dropdown.selectedIndex].value;
        }
    }
    product_cat_dropdown.onchange = onProductCatChange;
/* ]]> */
</script>
<?php

return ob_get_clean();

 }

Answer 1

更新 (2019)

以下是自 woocommerce 3 发布以来此自定义产品类别下拉短代码的工作代码版本：

wc_product_dropdown_categories() 替换自 woocommerce 3

woocommerce_product_dropdown_categories()

修改了 Javascript/jQuery 代码。
其他一些灯光变化。

新的工作代码：

add_shortcode( 'product_categories_dropdown', 'shortcode_product_categories_dropdown' );
function shortcode_product_categories_dropdown( $atts ) {
    // Shortcode Attributes
    $atts = shortcode_atts( array(
        'show_count'    => '0',
        'hierarchical'  => '0',
        'orderby'       => ''
    ), $atts, 'product_categories_dropdown' );

    ob_start();

    wc_product_dropdown_categories( array(
        'show_count'    => $atts['show_count'],
        'hierarchical'  => $atts['hierarchical'],
        'orderby'       => ( isset($atts['orderby'])  && empty($atts['orderby']) ? $atts['orderby'] : 'order' ),
    ) );
    ?>
    <script type='text/javascript'>
    jQuery(function($) {
        $('.dropdown_product_cat').change(function(){
            if( $(this).val() !=='' ) {
                location.href = '<?php echo home_url(); ?>/?product_cat='+$(this).val();
            }
        });
    });
    </script>
    <?php

    return ob_get_clean();
}

代码进入您的活动子主题（或活动主题）的 function.php 文件。已测试并有效。

用法示例：

1) 在页面或 post 内容文本编辑器中 （或文本小部件）:

[product_categories_dropdown orderby="title" count="0" hierarchical="0"]

2) 在 php 模板或代码上：

echo do_shortcode("[product_categories_dropdown orderby='title' count='0' hierarchical='0']");

原回答：

如果您阅读了您选择的此代码源的评论 here，它们是一些错误，并且最近发现了一些转机。

所以正确的更新代码似乎是这个：

/**
 * WooCommerce Extra Feature Shortcode
 * --------------------------
 *
 * Register a shortcode that creates a product categories dropdown list
 *
 * Use: [product_categories_dropdown orderby="title" count="0" hierarchical="0"]
 *
 */
add_shortcode( 'product_categories_dropdown', 'woo_product_categories_dropdown' );
function woo_product_categories_dropdown( $atts ) {
    extract(shortcode_atts(array(
        'show_count'    => '0',
        'hierarchical'  => '0',
        'orderby'       => ''
    ), $atts));

    ob_start();

    $c = $count;
    $h = $hierarchical;
    $o = ( isset( $orderby ) && $orderby != '' ) ? $orderby : 'order';

    // Stuck with this until a fix for http://core.trac.wordpress.org/ticket/13258
    woocommerce_product_dropdown_categories( $c, $h, 0, $o );
    ?>
    <script type='text/javascript'>
    /* <![CDATA[ */
        var product_cat_dropdown = jQuery(".dropdown_product_cat");
        function onProductCatChange() {
            if ( product_cat_dropdown.options[product_cat_dropdown.selectedIndex].value !=='' ) {
                location.href = "<?php echo home_url(); ?>/?product_cat="+product_cat_dropdown.options[product_cat_dropdown.selectedIndex].value;
            }
        }
        product_cat_dropdown.onchange = onProductCatChange;
    /* ]]> */
    </script>
    <?php

    return ob_get_clean();
}

But it will not work, as woocommerce_product_dropdown_categories() is a buggy function that is deprecated. See this reference about.

或许您可以尝试使用 this plugin 来代替。

Answer 2

对于仍然坚持这一点的任何人，这是当前有效的解决方案：

/**
 * WooCommerce Extra Feature Shortcode
 * --------------------------
 *
 * Register a shortcode that creates a product categories dropdown list
 *
 * Use: [product_categories_dropdown orderby="title" count="0" hierarchical="0"]
 *
 */
add_shortcode( 'product_categories_dropdown', 'woo_product_categories_dropdown' );
function woo_product_categories_dropdown( $atts ) {
    extract(shortcode_atts(array(
        'show_count'    => '0',
        'hierarchical'  => '0',
        'orderby'       => ''
    ), $atts));

    ob_start();

    $c = $count;
    $h = $hierarchical;
    $o = ( isset( $orderby ) && $orderby != '' ) ? $orderby : 'order';

    // Stuck with this until a fix for http://core.trac.wordpress.org/ticket/13258
    wc_product_dropdown_categories( $c, $h, 0, $o );
    ?>
    <script type='text/javascript'>
    /* <![CDATA[ */
        var product_cat_dropdown = jQuery(".dropdown_product_cat");
        product_cat_dropdown.change(function() {
            if ( product_cat_dropdown.val() !=='' ) {
                location.href = "<?php echo home_url(); ?>/?product_cat="+product_cat_dropdown.val();
            }
        });
    /* ]]> */
    </script>
    <?php

    return ob_get_clean();
}

WooCommerce 自定义简码产品类别下拉列表

WooCommerce custom shortcode product categories dropdown

javascript

php

jquery

shortcode

woocommerce

更新 (2019)