在WooCommerce中移动变量产品下拉列表 [英] Moving variable product dropdowns in WooCommerce

问题描述

我已经忙了好几个小时了，到目前为止还找不到解决方案。

我正在尝试将可变产品下拉列表移到数量/添加到购物车按钮旁边，但是我不知道该怎么实现。

以下是当前渲染：

所以显示如下：

• 产品标题


• 价格区域


• 属性下拉 /数量/添加到购物车

编辑：

我已经删除了价格范围。

在以下代码中，我更改了实时价格行为：

  add_filter（'woocommerce_variable_price_html'，'bbloomer_variation_price_format'，10，2）; 
 
 
函数bbloomer_variation_price_format（$ price，$ product）{
 
 //主价格
 $ prices = array（$ product-> get_variation_price（ 'min'，true），$ product-> get_variation_price（'max'，true））; 
 $ price = $ prices [0]！== $ prices [1]吗？ sprintf（__（'％1 $ s'，‘woocommerce’），wc_price（$ prices [0]））：wc_price（$ prices [0]）; 
 
 //销售价格
 $ prices = array（$ product-> get_variation_regular_price（‘min’，true），$ product-> get_variation_regular_price（‘max’，true））; 
 sort（$ prices）; 
 $ saleprice = $ prices [0]！== $ prices [1]吗？ sprintf（__（'％1 $ s'，‘woocommerce’），wc_price（$ prices [0]））：wc_price（$ prices [0]）; 
 
 if（$ price！== $ saleprice）{
 $ price =’< del>’。 $ saleprice。 ’< / del> < ins>’。 $ price。 ‘< / ins>’； 
} 
返回$ price； 
} 
  

如何在数量/添加到左侧移动变量产品下拉列表购物车按钮？

解决方案

编辑（与您的最后评论相关）：

仅适用于可变产品，以下代码将：

• 删除价格范围（如果您正在


• 将实时变化所选价格移动到属性选择字段上方……


• 添加CSS以获得包含数量字段和购物车按钮的块左侧的属性选择字段。

  
  

  在此具体涉及的相关模板是单个产品/添加到购物车/variable.php

  
  
  

  您可以尝试将现有结构更改为满足您对主题和样式需求的要求...

  
  

  
  

  I've been playing around with hooks for a few hours and couldn't find the solution so far.

  I am trying to move the variable product dropdown next to the quantity / add to cart button, but I don't know how to achieve this.

  Here is the current render :

  So the display would go like :

  • Product title
  • Price area
  • Attribute dropdown / Quantity / Add to cart

  Edit :

  I have removed the price range.

  In the following code I change the live price behavior :

  add_filter( 'woocommerce_variable_price_html', 'bbloomer_variation_price_format', 10, 2 );
  
  
  function bbloomer_variation_price_format( $price, $product ) {
  
          // Main Price
          $prices = array( $product->get_variation_price( 'min', true ), $product->get_variation_price( 'max', true ) );
          $price = $prices[0] !== $prices[1] ? sprintf( __( '%1$s', 'woocommerce' ), wc_price( $prices[0] ) ) : wc_price( $prices[0] );
  
          // Sale Price
          $prices = array( $product->get_variation_regular_price( 'min', true ), $product->get_variation_regular_price( 'max', true ) );
          sort( $prices );
          $saleprice = $prices[0] !== $prices[1] ? sprintf( __( '%1$s', 'woocommerce' ), wc_price( $prices[0] ) ) : wc_price( $prices[0] );
  
          if ( $price !== $saleprice ) {
          $price = '<del>' . $saleprice . '</del> <ins>' . $price . '</ins>';
          }
          return $price;
  }
  

  How can I move the variable product dropdown at the left of Quantity / Add to cart button?

  解决方案

  Edit (related to your last comment):

  For variable products only, the code below will:

  • Remove the price range (If you are doing this already, you should remove your related code).
  • Move the live variation selected price above the attribute select fields…
  • Add CSS to get the attribute select fields at the left of the block that contains the quantity field and the add-to-cart button.http://www.cbleu.net/sites/tie2/product/premium-quality/
  • Move the short description location after the add-to-cart button

  In this function you can just remove Css and add them in your active child theme (or active theme) styles.css file.

  Here is that code:

  add_action( 'woocommerce_single_product_summary', 'custom_single_product_styles', 2 );
  function custom_single_product_styles() {
      global $product;
  
      // Only for variable products
      if ( ! $product->is_type('variable') ) return;
  
      // Change the short description location after the add-to-cart button
      remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_add_to_cart', 30 );
      add_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_add_to_cart', 15 );
  
      // Removing the price range
      remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_price', 10 );
  
      // Change the price location above variation attribute select fields
      remove_action( 'woocommerce_single_variation', 'woocommerce_single_variation', 10 );
      add_action( 'woocommerce_before_variations_form', 'woocommerce_single_variation', 10 );
  
      // Styles to display the variation attribute select fields at the left of Quantity/Add to cart
      // (Can be removed and inserted in styles.css file)
      ?>
          <style>
              .single-product div.product table.variations{
                  float:left;
                  max-width:50%;
              }
              .single-product div.product div.single_variation_wrap{
                  float:left;
                  max-width:50%;
              }
          </style>
      <?php
  }
  

  Code goes in function.php file of your active child theme (or theme) or also in any plugin file.

  Tested and works… You will get something like:

  The related template that is involved specifically in this is single-product/add-to-cart/variable.php

  You can try to change there the existing structure to match with your requirements specifically to your theme and styling needs...

  这篇关于在WooCommerce中移动变量产品下拉列表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！