Question

我已经玩了几个小时的钩子，到目前为止还找不到解决方案。

我正在尝试将数量/添加到购物车按钮旁边的变量产品下拉列表移动，但我不知道如何实现此目标。

这是当前的渲染：

所以显示器会像：

产品名称
价格区域
属性下拉列表 /数量/添加到购物车

编辑：

我已经取消了价格范围。

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

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

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

Answer 1

修改（与您上次评论相关）：

仅适用于变量产品，以下代码为：

删除价格范围（如果您已经这样做，则应删除相关代码）。
将实时变体选择价格移动到属性选择字段上方...
添加CSS以获取包含数量字段和添加到购物车按钮的块左侧的属性选择字段。http://www.cbleu.net/sites/tie2/product/premium-quality/
在添加到购物车按钮后移动简短描述位置

在此功能中，您只需删除Css并将其添加到活动子主题（或活动主题）styles.css文件中。

以下是代码：

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
}

代码放在活动子主题（或主题）的function.php文件中，或者放在任何插件文件中。

经过测试和工作......你会得到类似的东西：

具体涉及的相关模板是single-product/add-to-cart/variable.php

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

在WooCommerce中移动变量产品下拉列表

1 个答案: