在 WooCommerce 中移动变化价格位置 [英] Move the variation price location in WooCommerce

问题描述

我已经开始使用 WooCommerce 插件在 Wordepress 中构建电子商店.

我添加了一些带有变体的产品，我注意到价格显示在属性选择字段之后.

是否可以像简单的产品一样在标题和简短描述之间移动价格?

一种产品的网址是:http://www.roubinisideas.com/test2/product/uncategorized/vintage/

解决方案

更新(2019 年 9 月):

<块引用>

• 避免可用性重复(2018 年解决的错误)

• 保持其他产品类型不变(2019 年)

这是可能的，它基于 这个答案是我做出的:

在这里，我更新了 jQuery 代码，以考虑默认情况下为可变产品设置变体时.

代码如下:

add_action( 'woocommerce_single_product_summary', 'move_single_product_variable_price_location', 2 );函数 move_single_product_variable_price_location() {全球$产品；//仅可变产品if( $product->is_type('variable') )://去除可变产品的价格remove_action('woocommerce_single_product_summary', 'woocommerce_template_single_price', 10);//加回可变产品的重新定位(定制)价格add_action('woocommerce_single_product_summary', 'custom_single_product_variable_prices', 10);万一;}函数 custom_single_product_variable_prices(){全球$产品；//主要价格$prices = array( $product->get_variation_price( 'min', true ), $product->get_variation_price( 'max', true ) );$price = $prices[0] !== $prices[1] ?sprintf( __( 'From: %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 ) );排序($价格)；$saleprice = $prices[0] !== $prices[1] ?sprintf( __( 'From: %1$s', 'woocommerce' ), wc_price( $prices[0] ) ) : wc_price( $prices[0] );if ( $price !== $saleprice && $product->is_on_sale() ) {$price = ''.$促销价.$product->get_price_suffix() .'</del><ins>'.$价格.$product->get_price_suffix() .'</ins>';}?><风格>div.woocommerce-variation-price,div.woocommerce-variation-availability,div.hidden-variable-price {高度:0px！重要；溢出:隐藏；位置:相对；行高: 0px !important;字体大小:0%！重要；可见性:隐藏！重要；}</风格><脚本>jQuery(document).ready(function($) {//默认选择可变价格时设置超时(函数(){if( 0 < $('input.variation_id').val() && null != $('input.variation_id').val() ){if($('p.availability'))$('p.availability').remove();$('p.price').html($('div.woocommerce-variation-price > span.price').html()).append('<p class="availability">'+$('div.woocommerce-variation-availability').html()+'</p>');console.log($('div.woocommerce-variation-availability').html());}}, 300 );//在实时变化选择上$('选择').blur(函数(){if( 0 < $('input.variation_id').val() && null != $('input.variation_id').val() ){if($('.price p.availability') || $('.price p.stock') )$('p.price p').each(function() {$(this).remove();});$('p.price').html($('div.woocommerce-variation-price > span.price').html()).append('<p class="availability">'+$('div.woocommerce-variation-availability').html()+'</p>');console.log($('input.variation_id').val());} 别的 {$('p.price').html($('div.hidden-variable-price').html());if($('p.availability'))$('p.availability').remove();console.log('NULL');}});});<?phpecho '<p class="price">'.$price.'</p><div class="hidden-variable-price";>'.$price.'</div>';}

代码位于活动子主题(或主题)的任何 php 文件或任何插件 php 文件中.

此代码已经过测试，适用于 WooCommerce 3+(也应该适用于 WooCommerce 2.6.x)

---

相关:用 WooCommerce 3 中选择的变化价格替换可变价格范围

I'm have started building an e-shop in Wordepress with WooCommerce plugin.

I added some products with variations and I noticed that the price is displayed after attributes select fields.

Is it possible to move the price between Title and short description as for simple products?

The url of one product is: http://www.roubinisideas.com/test2/product/uncategorized/vintage/

解决方案

Update (on September 2019):

• Avoiding availability repetitions (bug solved on 2018)

• Keep other product types unchanged (2019)

This is possible and it's is based on this answer that I have made:

Here I have updated the jQuery code to take into account when a variation is set by default for a variable product.

Here is the code:

add_action( 'woocommerce_single_product_summary', 'move_single_product_variable_price_location', 2 );

function move_single_product_variable_price_location() {
    global $product;

    // Variable product only
    if( $product->is_type('variable') ):
    
    // removing the price of variable products
    remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_price', 10 );
    
    // Add back the relocated (customized) price of variable products
    add_action( 'woocommerce_single_product_summary', 'custom_single_product_variable_prices', 10 );
    
    endif;
}


function custom_single_product_variable_prices(){
    global $product;

    // Main Price
    $prices = array( $product->get_variation_price( 'min', true ), $product->get_variation_price( 'max', true ) );
    $price = $prices[0] !== $prices[1] ? sprintf( __( 'From: %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( __( 'From: %1$s', 'woocommerce' ), wc_price( $prices[0] ) ) : wc_price( $prices[0] );

    if ( $price !== $saleprice && $product->is_on_sale() ) {
        $price = '<del>' . $saleprice . $product->get_price_suffix() . '</del> <ins>' . $price . $product->get_price_suffix() . '</ins>';
    }

    ?>
    <style>
        div.woocommerce-variation-price,
        div.woocommerce-variation-availability,
        div.hidden-variable-price {
            height: 0px !important;
            overflow:hidden;
            position:relative;
            line-height: 0px !important;
            font-size: 0% !important;
            visibility: hidden !important; 
        }
    </style>
    <script>
        jQuery(document).ready(function($) {
            // When variable price is selected by default
            setTimeout( function(){
                if( 0 < $('input.variation_id').val() && null != $('input.variation_id').val() ){
                    if($('p.availability'))
                        $('p.availability').remove();

                    $('p.price').html($('div.woocommerce-variation-price > span.price').html()).append('<p class="availability">'+$('div.woocommerce-variation-availability').html()+'</p>');
                    console.log($('div.woocommerce-variation-availability').html());
                }
            }, 300 );

            // On live variation selection
            $('select').blur( function(){
                if( 0 < $('input.variation_id').val() && null != $('input.variation_id').val() ){
                    if($('.price p.availability') || $('.price p.stock') )
                        $('p.price p').each(function() {
                            $(this).remove();
                        });

                    $('p.price').html($('div.woocommerce-variation-price > span.price').html()).append('<p class="availability">'+$('div.woocommerce-variation-availability').html()+'</p>');
                    console.log($('input.variation_id').val());
                } else {
                    $('p.price').html($('div.hidden-variable-price').html());
                    if($('p.availability'))
                        $('p.availability').remove();
                    console.log('NULL');
                }
            });
        });
    </script>
    <?php

    echo '<p class="price">'.$price.'</p>
    <div class="hidden-variable-price" >'.$price.'</div>';
}

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

This code is tested and works on WooCommerce 3+ (should work on WooCommerce 2.6.x too)

---

related: Replace the Variable Price range by the chosen variation price in WooCommerce 3

这篇关于在 WooCommerce 中移动变化价格位置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！