From price for variation product

Hello,

on product detail page we hide “from-to” price for variation product via theme options:
So the information:
100 €- 200€
is now showing like this via theme options:
100€

But we need to add an prefix: from … like this:
From 100€.
Because this is the lowest value.

I can see woodmart is hide this word via css. Why?
Because in europe its absolute needed.

So now we need to switch this value to visible. But why disable it first and then enabled it again via css? This is not good.

Please check also our attached screenshot and privat content area for better understanding.
Disabled all other plugins, but we still have hidden value by woodmart.

BR
Tommy

Attachments:

You must be logged in to view attached files.

Hello,

Please add the following Custom CSS code to Theme Settings > Custom CSS > Global Custom CSS:

.amount:before {
    content: "from";
    margin-right: 5px;
}

Best Regards.

Hello,

but you can see this text (in germany “ab”) is already included and woocommerce css is setup this element to unvisible.

First solution:
.amount:before {
content: “from”;
margin-right: 5px;
}

-> You can see in the attached screenshot from my initial post here the wording “ab” (which means “from”) is already in html code. But woodmart is making this element unvisible via css. So woodmart hide this element and in next step we need to add it again to make it visible?! This is not a clean work flow in general and will make design shifts.

Second solution:
Adding this css to make it visible after woodmart make it unvisible
.hide-larger-price .price {
word-spacing: -1em;
visibility: hidden;
}
-> With that custom css code we do not need to add the word again. We only need to make it visible back again after woodmart set it to unvisible. But also this flow is not clean: Why first make it unvisible via woodmart css and after that we need custom css to make it visible again.

Please fix it and share an patch.

BR
Tommy

Hello,

but you can see this text (in germany “ab”) is already included and woocommerce css is setup this element to unvisible.

First solution:
.amount:before {
content: “from”;
margin-right: 5px;
}

-> You can see in the attached screenshot from my initial post here the wording “ab” (which means “from”) is already in html code. But woodmart is making this element unvisible via css. So woodmart hide this element and in next step we need to add it again to make it visible?! This is not a clean work flow in general and will make design shifts.

Second solution:
Adding this css to make it visible after woodmart make it unvisible
.hide-larger-price .price {
word-spacing: inherit;
visibility: visible;
}
-> With that custom css code we do not need to add the word again. We only need to make it visible back again after woodmart set it to unvisible. But also this flow is not clean: Why first make it unvisible via woodmart css and after that we need custom css to make it visible again.

Please fix it and share an patch.

BR
Tommy

General note:
we adding the word “ab” (english “from”) to product detailpage via a snippet.

// Ab vor dem Variantenpreis einfügen. Quelle: GermanMarket Support.
add_filter( ‘woocommerce_variable_price_html’, function( $price_string, $variable_product ){
if ( $variable_product->get_variation_price( ‘min’ ) != $variable_product->get_variation_price( ‘max’ ) ) {
$price_string = ‘ab ‘ . wc_price( $variable_product->get_variation_price( ‘min’ ) ) . $variable_product->get_price_suffix();
}
return $price_string;
}, 10, 2 );

If this is wrong:
please tell me correct solution that will work with woodmart.

Hello,

Could you please check how it works with some default WordPress themes like TwentyTwenty or WooCommerce Storefront to understand whether it is our theme issue?

Best Regards.

Install fresh wordpress.
Install elementor.
Install woocommerce.
Install storefront theme.
Adding this snippet to functions.php into child folder:

// Ab vor dem Variantenpreis einfügen. Quelle: GermanMarket Support.
add_filter( ‘woocommerce_variable_price_html’, function( $price_string, $variable_product ){
if ( $variable_product->get_variation_price( ‘min’ ) != $variable_product->get_variation_price( ‘max’ ) ) {
$price_string = ‘ab ‘ . wc_price( $variable_product->get_variation_price( ‘min’ ) ) . $variable_product->get_price_suffix();
}
return $price_string;
}, 10, 2 );

And voila – you can see the word \”Ab\” like prefix.
But if you enable woodmart now in wordpress the word \”ab\” is hidden by woodmart css.
You can check my screenshot from previous message and you will see the following css came from woodmart:

.hide-larger-price .price {
word-spacing: -1em;
visibility: hidden;
}

BR
Tommy

Hello,

But the prefix “AB” is showing with the price.
https://ibb.co/ZNWqPyv

Best Regards.

Yes, because we added a dirty solution:
1. First its added.
2. Second it was disabled by your core css.
3. We overwrite your core css via custom css.

This is a very dirty solution.

Now we removed our custom css and “ab” is missing again now.
Please give us better solution via patch to not overwrite the “ab” label.

BR
Tommy

You can see it in html, but its hidden in browser by default via your core css. 🙁

.hide-larger-price .price {
word-spacing: -1em;
visibility: hidden;
}

Hello,

Please add the following Custom CSS code to Theme Settings > Custom CSS > Global Custom CSS:

.hide-larger-price .price {
    visibility: visible !important;
    word-spacing: 0em !important;
}

Best Regards.

Hello Aizaz.

This was not my question. Because this css snippet i already have and tested.
I do not wanna solve it via custom css.

My question/task was:
Why woodmart set hide-larger-price to unvisible?
Because this is an core function of woodmart.

So now your solution is:
1. First adding “ab” to price.
2. In next step woodmart will overwrite it and make it visibility: hidden.
3. So we need to make it visible again via visibility: visible.

Its not professional what we are doing here. Why woodmart is set this important word for europe seller to invisible out of the box?

So we added it, then you make it unvisible, after that we need to overwrite your css with important tag to make it visible again. This is most dirty css war i ever have seen. 🙂

Please solve it via patching theme in next update. Do you plan to fix that soon?

BR
Tommy

Hello,

By default, WooCommerce does not have options to hide a higher price.

The HTML structure of WooCommerce prices cannot be changed using the WordPress theme itself and in this case the only way to hide a higher price is to do it with css.

A larger price using CSS can be hidden only by defining a standard price structure and any change to the HTML structure inside the price block may cause this option to work incorrectly.

The technical aspect of CSS from “Hide “to” price” option is to hide ALL elements inside “price” block except the FIRST “amount” block (https://prnt.sc/QpcnwAiywf47) and as you can see from the structure on his site (https://prnt.sc/ElUjXcTnOUrC) his prefix “EB” does not have any wrapping HTML block that can be used to show it in the same way as was made with “amount” block so it can’t be “excluded” from hiding.

In conclusion: we can’t change the HTML structure of the price via WordPress theme only, and we can use only CSS. CSS that hides larger prices works only with unmodified price structures. Your site has a modified price structure which can’t be used with our “Hide “to” price” option enabl, and it needs to be disabled.

Best Regards.

Hello,

i know that.
So what i have to do to show the lowest price with prefix “from” (german “ab”)?

We need this result:
From 10€

With other themes the word “from” is not disabled by theme.
So their logic are much smarter to handle prefix for europe online shops.

We also wrote ticket to germanized. And they confirmed also: Other themes can handle this fine without to hide it and after that we need to re-enable it via css. This is a “dirty” why.

So we asking again:
Do you have option to add “ab” like prefix before price?

Your theme hide everything what is located before price range. That is not good.
Disable/enable the woodmart option “hide to price” will not help. Because in europe you only show the lowest price.

BR
Tommy

“Your site has a modified price structure which can’t be used with our “Hide “to” price” option enabl, and it needs to be disabled.”

I am free to use any other clean solution to fix that issue.
But we can not do this:
adding “ab” via php snippet.
your theme hiding it.
We re-adding it/make it visible via css.

This is like working with outdated theme and not clean work.
Other themes are able to fix it without custom css and custom php.
also germanized is able to fix that via native functions in other themes.
But in woodmart not.

BR
Tommy

Hi,

Our theme and WooCommerce plugin by default doesn’t have the option to add prefixes before price. As was said in the previous reply, our “Hide “to” price” option works only with an unmodified price structure. Your price structure was modified by your custom code (https://prnt.sc/HMsTGvGnTURl) in a way that is incompatible with our “Hide “to” price” option. In this situation, you need to modify your code to become compatible with our “Hide “to” price” option or disable it completely.

For now, there are only two possible solutions:

1. Disable “Hide “to” price” option (https://prnt.sc/HhmTpaSLJc3_) in Theme Settings, so all CSS that conflicts with your custom prefix will disappear (https://monosnap.com/file/pRMgoTxYjei4LvYnu9uYRXWR64KSzq).
2. Modify your code in the way that it will become compatible to our “Hide “to” price” option.

To make it compatible, you need to modify your code by wrapping the prefix word ab (https://prnt.sc/2acMKuReU85V) into the span tag, so in the result, it will look like <span>ab</span>. After that, we can prepare custom CSS code for you that will make prefixes visible, similar to what is done with the first lower price.

Currently, the “Hide “to” price” feature is realized only by CSS, if it can be done via PHP we will consider implementing it in the next updates.

Kind Regards

Hello,

i solved that issue by this snippet:
add_filter( ‘woocommerce_format_price_range’, function( $price, $from, $to ) {
return sprintf( ‘<span class=”price-range-prefix”>’ . __( ‘ab %s’, ‘woocommerce-german-market’ ) . ‘</span>’, wc_price( $from ) );
}, 20, 3 );

Hello,

Sounds great that if your issue has been solved. Currently, we haven’t seen changes related to the product price, but let us know if you need any help in the future.

Best Regards.

[Author]

Posts