Поддержка WooCommerce Вариативные товары

  • Решено gleb2204

    (@gleb2204)



    Добрый день!
    Подскажите, как реализовать вывод вариации товаров на странице категорий. Сейчас выбирать вес товара можно только в карточке товара, а хотелось бы чтобы выбор можно было сделать на странице категорий и сразу добавить товар в корзину.

    Страница, с которой нужна помощь: [войдите, чтобы увидеть ссылку]

Просмотр 2 ответов — с 1 по 2 (всего 2)
  • Чтобы это сделать, надо добавить функцию в файл functions.php вашей дочерней темы:

    /**
     * Replace add to cart button in the loop.
     */
    function iconic_change_loop_add_to_cart() {
        remove_action( 'woocommerce_after_shop_loop_item', 'woocommerce_template_loop_add_to_cart', 10 );
        add_action( 'woocommerce_after_shop_loop_item', 'iconic_template_loop_add_to_cart', 10 );
    }
     
    add_action( 'init', 'iconic_change_loop_add_to_cart', 10 );
     
    /**
     * Use single add to cart button for variable products.
     */
    function iconic_template_loop_add_to_cart() {
        global $product;
     
        if ( ! $product->is_type( 'variable' ) ) {
            woocommerce_template_loop_add_to_cart();
            return;
        }
     
        remove_action( 'woocommerce_single_variation', 'woocommerce_single_variation_add_to_cart_button', 20 );
        add_action( 'woocommerce_single_variation', 'iconic_loop_variation_add_to_cart_button', 20 );
     
        woocommerce_template_single_add_to_cart();
    }
     
    /**
     * Customise variable add to cart button for loop.
     *
     * Remove qty selector and simplify.
     */
    function iconic_loop_variation_add_to_cart_button() {
        global $product;
     
        ?>
        <div class="woocommerce-variation-add-to-cart variations_button">
            <button type="submit" class="single_add_to_cart_button button"><?php echo esc_html( $product->single_add_to_cart_text() ); ?></button>
            <input type="hidden" name="add-to-cart" value="<?php echo absint( $product->get_id() ); ?>" />
            <input type="hidden" name="product_id" value="<?php echo absint( $product->get_id() ); ?>" />
            <input type="hidden" name="variation_id" class="variation_id" value="0" />
        </div>
        <?php
    }

    А также написать свою верстку для красивого отображения и вставить в блок css дополнительных настроек вашей темы. Пример верстки:

    .products .variations {
        border: 1px solid #eee;
        position: relative;
        margin-bottom: 50px;
    }
     
    .products .variations td {
        display: block;
        padding: 10px 20px 18px;
        text-align: center;
        border-bottom: 1px solid #eee;
    }
     
    .products .variations td:first-child {
        padding-bottom: 0;
        border: none;
    }
     
    .products .variations td:last-child {
        padding-top: 5px;
    }
     
    .products .variations tr:last-child td {
        border: none;
    }
     
    .products .variations td label {
        font-weight: 600;
    }
     
    .products .variations td select {
        width: 100%;
    }
     
    .products .variations .reset_variations {
        margin: 10px 0 0;
        position: absolute;
        bottom: -35px;
        left: 0;
        right: 0;
    }

    Так же вы можете воспользоваться плагином WooCommerce Show Single Variations, который показывает вариативные товары как простые на страницах магазина (каждая вариация будет отображаться как отдельный простой товар).

    Спасибо большое! Получилось.

Просмотр 2 ответов — с 1 по 2 (всего 2)