WooCommerce custom shortcode product categories dropdown

问题

I am trying to add a WooCommerce categories-dropdown-shortcode, but this seems to not work. I am able to see the drop down, but when i choose a category it doesn't register and nothing happens.

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

Code that's placed in my functions.php file

<?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();

 }

回答1:

Update (2019)

Here below is the working code version for this custom product category dropdown shortcode since woocommerce 3 release:

wc_product_dropdown_categories() replace woocommerce_product_dropdown_categories() which was deprecated since woocommerce 3
Modified Javascript/jQuery code.
Some other light changes.

The new working code:

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();
}

Code goes in function.php file of your active child theme (or active theme). Tested and works.

USAGE example:

1) Inside a Page or post content text Editor (or a text widget):

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

2) On a php template or code:

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

Original answer:

If you read the comments for the source of this code that you have picked here, they were some errors and they found some turn around recently.

So the correct updated code seems to be this one:

/**
 * 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.

May be you could try to use this plugin instead, for that purpose.

回答2:

For anyone still stuck on this then here is the currently working solution:

/**
 * 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();
}

来源：https://stackoverflow.com/questions/41029043/woocommerce-custom-shortcode-product-categories-dropdown

标签

javascript

php

jquery

woocommerce

shortcode