Вывод вариаций в каталоге с помощью кнопок

[andrianoz]

Добрый день.

Постараюст объяснить что нужно. Есть магазин коробок с овощами. У каждой коробки есть вариация - вес. К примеру 5 кг и 8 кг, соответсвенно цена меняется. Можно ли каким-то образом вывести прямо в каталог, чтобы под картинкой товара был переключатель по весу и сразу вылазила цена? Нашел только выпадающий список, но это очень громоздко, достаточно двух кнопочек или переключателя влево-вправо.

Заранее брагодарен.

<?php
// Отображение выпадающих списков на странице магазина для переменных продуктов
add_filter( 'woocommerce_loop_add_to_cart_link', 'woo_display_variation_dropdown_on_shop_page' );

function woo_display_variation_dropdown_on_shop_page() {
   
     global $product;
    if( $product->is_type( 'variable' )) {
   
    $attribute_keys = array_keys( $product->get_attributes() );
    ?>
   
    <form class="variations_form cart" method="post" enctype='multipart/form-data' data-product_id="<?php echo absint( $product->id ); ?>" data-product_variations="<?php echo htmlspecialchars( json_encode( $product->get_available_variations() ) ) ?>">
        <?php do_action( 'woocommerce_before_variations_form' ); ?>
   
        <?php if ( empty( $product->get_available_variations() ) && false !== $product->get_available_variations() ) : ?>
            <p class="stock out-of-stock"><?php _e( 'This product is currently out of stock and unavailable.', 'woocommerce' ); ?></p>
        <?php else : ?>
            <table class="variations" cellspacing="0">
                <tbody>
                    <?php foreach ( $product->get_attributes() as $attribute_name => $options ) : ?>
                        <tr>
                            <td class="label"><label for="<?php echo sanitize_title( $attribute_name ); ?>"><?php echo wc_attribute_label( $attribute_name ); ?></label></td>
                            <td class="value">
                                <?php
                                    $selected = isset( $_REQUEST[ 'attribute_' . sanitize_title( $attribute_name ) ] ) ? wc_clean( urldecode( $_REQUEST[ 'attribute_' . sanitize_title( $attribute_name ) ] ) ) : $product->get_variation_default_attribute( $attribute_name );
                                    wc_dropdown_variation_attribute_options( array( 'options' => $options, 'attribute' => $attribute_name, 'product' => $product, 'selected' => $selected ) );
                                    echo end( $attribute_keys ) === $attribute_name ? apply_filters( 'woocommerce_reset_variations_link', '<a class="reset_variations" href="#">' . __( 'Clear', 'woocommerce' ) . '</a>' ) : '';
                                ?>
                            </td>
                        </tr>
                    <?php endforeach;?>
                </tbody>
            </table>
   
            <?php do_action( 'woocommerce_before_add_to_cart_button' ); ?>
   
            <div class="single_variation_wrap">
                <?php
                    /**
                     * woocommerce_before_single_variation Hook.
                     */
                    do_action( 'woocommerce_before_single_variation' );
   
                    /**
                     * woocommerce_single_variation hook. Used to output the cart button and placeholder for variation data.
                     * @since 2.4.0
                     * @hooked woocommerce_single_variation - 10 Empty div for variation data.
                     * @hooked woocommerce_single_variation_add_to_cart_button - 20 Qty and cart button.
                     */
                    do_action( 'woocommerce_single_variation' );
   
                    /**
                     * woocommerce_after_single_variation Hook.
                     */
                    do_action( 'woocommerce_after_single_variation' );
                ?>
            </div>
   
            <?php do_action( 'woocommerce_after_add_to_cart_button' ); ?>
        <?php endif; ?>
   
        <?php do_action( 'woocommerce_after_variations_form' ); ?>
    </form>
       
    <?php } else {
       
    echo sprintf( '<a rel="nofollow" href="%s" data-quantity="%s" data-product_id="%s" data-product_sku="%s" class="%s">%s</a>',
            esc_url( $product->add_to_cart_url() ),
            esc_attr( isset( $quantity ) ? $quantity : 1 ),
            esc_attr( $product->id ),
            esc_attr( $product->get_sku() ),
            esc_attr( isset( $class ) ? $class : 'button' ),
            esc_html( $product->add_to_cart_text() )
        );
   
    }
   
}

 

[moonkir]

<?php
add_action( 'woocommerce_after_shop_loop_item_title', 'echo_stock_variations_loop' );

function echo_stock_variations_loop(){
    global $product;
     
  echo '</a><span class="vrbs" style="display: block; min-height: 25px;">';
    if ( $product->get_type() == 'variable' ) {
          $product_variations= $product->get_available_variations();
         
        foreach ( $product_variations as $variations ) { //получить все вариации текущего продукта
        //print_r($variations);
            foreach ( $variations['attributes'] as $attr_name => $attr_value ) { //получить атрибуты и слаг вариации              
            }
         
          $sku = $variations["sku"]; //получить SKU вариации
          $id = $product->id; //получить ID продукта от которого вариции      
          $_product = wc_get_product($sku); // получить данные вариации по SKU
          $sku_price = $_product->get_price(); // получить цену SKU
          if ($sku_price == NULL) {//Если цена пустая - вывести "Звоните"
            $sku_price = "Звоните";          
          }
          else {//Если цена есть - отобразить
            $sku_price = $_product->get_price() . " грн.";
          }
         
          if( $variations['is_in_stock']) echo '<span class="vrb" id="'. $sku .'" onclick="clk2price' . $sku . '()">' . attribute_slug_to_title($attr_name, $attr_value) . '</span>';
          ?>
            <script>
                function clk2price<?php echo $sku; ?>() {
                  document.getElementById("<?php echo $id; ?>").innerHTML = "<?php echo $sku_price; ?>"; //вывести цену вариации
                 
                  var spans = document.getElementsByClassName("vrb"); //сбросить фон и цвет всех вариаций
                  for(var i = 0; i < spans.length; i++){
                    spans[i].style.backgroundColor = '';
                    spans[i].style.color = '';
                  }
                 
                   document.getElementById("<?php echo $sku; ?>").style.backgroundColor="#1e73be";
                  document.getElementById("<?php echo $sku; ?>").style.color="#fff";
                }
              </script>
            <?php
        }
    }
  echo '</span><a>';
}


/*цена от*/
add_filter('woocommerce_variable_price_html', 'custom_variation_price', 10, 2);

function custom_variation_price( $price, $product ) {
  $price = '';
  $id = $product->id;
  if ( !$product->min_variation_price || $product->min_variation_price !== $product->max_variation_price ) $price .= '' . _x( '<span id='. $id .'>от ', 'min_price', 'woocommerce') . ' ';
  $price .= woocommerce_price($product->get_price()) ;
  return $price;
}

/*слаг в заголовок*/
    function attribute_slug_to_title( $attribute ,$slug ) {
        global $woocommerce;
        if ( taxonomy_exists( esc_attr( str_replace( 'attribute_', '', $attribute ) ) ) ) {
            $term = get_term_by( 'slug', $slug, esc_attr( str_replace( 'attribute_', '', $attribute ) ) );
            if ( ! is_wp_error( $term ) && $term->name )
                $value = $term->name;
        } else {
            $value = apply_filters( 'woocommerce_variation_option_name', $value );
        }
        return $value;
    }
?>

.vrbs span {
    color: #1e73be;
    border:  solid 1px #1e73be;
    border-radius: 3px;
    padding: 0 3px;
    margin-right: 5px;
    box-shadow: 0px 0px 1px 0px rgba(0, 0, 0, .5);
    cursor: pointer;      
}

.vrbs {
    margin-top: 5px;
}


.vrbs span:hover {
        background-color: #1e73be;
    color: white;
}