How to filter by attributes in woocommerce?

Question

HTML

Hello, how to filter by product attributes (properties) in woocommerce? So that it can be displayed in the side widget?

Answer 1

Attributes are the terms of taxonomies.
Accordingly, get the taxonomies of the product, go through the cycle to display their terms in the form of checkboxes, wrap all this in a form. In the form handler, add the necessary tax_query
parameters to the current array of request arguments, and make all this out as a widget. There may also be individual product attributes, they are exactly the same but with arbitrary fields

Answer 2

I’ll try to show you, using a specific example (I did it for one project), what WP Panda wanted to say (if I understood correctly).
1) Make a form through which users will select the necessary attributes (I have written this filter based on the search form)

<form role="search" method="get" class="woocommerce-product-search" name="s" 
      action="<?php echo esc_url(home_url('/')); ?>">
    <input style="display: none;" type="search"
           id="woocommerce-product-search-field-<?php echo isset($index) ? absint($index) : 0; ?>"
           class="search-field"
           placeholder="<?php echo esc_attr__('Search products&hellip;', 'woocommerce'); ?>" value=""
           name="s"/>
    <div class="search_title">
        Фильтр по параметрам шин
    </div>
    <div class="row s-fast-search__row justify-content-center">
        <div class="col-md-12">
            <?php
            $diametr = wp_dropdown_categories("taxonomy=pa_diametr&echo=0&show_option_none=Все внутренние диаметры шин&name=diametr");
            ?>
            <label>Выберите внутренний диаметр шины</label>
            <div><?php echo $diametr; ?></div>
        </div>
        <div class="col-md-12">
            <?php
            $razmer = wp_dropdown_categories("taxonomy=pa_razmer&echo=0&show_option_none=Все размеры&name=razmer");
            ?>
            <label>Выберите размер</label>
           <div> <?php echo $razmer; ?></div>
        </div>


        <div class="col-md-12">
    <?php $dropdowncats = wp_dropdown_categories(
        'hide_empty=0&depth=1&orderby=name&order=ASC&selected='.$_GET['product_cat'].'&hierarchical=1&echo=0&taxonomy=product_cat&show_option_none=Все категории'
); ?>
            <label>Категории</label>
<div><?php echo $dropdowncats; ?></div>
        </div>
    </div>
    <!--row-->
    <button type="submit" class="filtr_search_button"
            value="<?php echo esc_attr_x('Search', 'submit button', 'woocommerce'); ?>">Искать
    </button>
    <input type="hidden" name="post_type" value="product"/>
</form>

2) Add a handler for this in functions.php

//Для формы фильтра на главную страницу
add_action('pre_get_posts', 'search_by_cat');
function  search_by_cat() {
    global $wp_query;

    if (is_search()) {

        $diametr =  intval($_GET['diametr']);
        if($diametr>0){
            $wp_query->query_vars['tax_query'][] = array( //для атрибутов товаров
                "taxonomy" => "pa_diametr",
                "field" => "id",
                "terms" =>  $diametr
            );
        }

        $razmer =  intval($_GET['razmer']);
        if($razmer>0){
            $wp_query->query_vars['tax_query'][] = array(
                "taxonomy" => "pa_razmer",
                "field" => "id",
                "terms" =>  $razmer
            );
        }



    $cat =  intval($_GET['cat']);

        if($cat<0){
            $wp_query->query_vars['product_cat'] =  '';
        }else{
            $term = get_term_by('id',$cat,'product_cat');
            $wp_query->query_vars['cat'] = '';
            $wp_query->query_vars['product_cat'] =  $term->slug;
        }
    }
}
//Для формы фильтра на главную страницу - конец

I copied the code in its entirety, it is clear that you will have your own attributes

Answer 3

In the list of widgets there is a widget for filtering by attributes , the
authors of the topic say that this is impossible ...
damn, this is PPC ... such a cool theme, and such a bummer ... yeah ...
then I don’t know, it can use not attributes, but custom ones fields somehow ..
either program

Answer 4

It is enough to remove the relative placement from the block following the button and everything becomes in the right position. z-index is a very relative thing. It doesn't always work the way you want in absolute units on the page. It is also relative to the block it is nested in.

Answer 5

For the second block, the background is not set correctly. Set the background for it in the same way as in the first block.