Price for variable products broken after updating to 4.0.7 - Support

Tagged: price, variable product, variable products

Viewing 30 posts - 1 through 30 (of 30 total)

Author

Posts
May 17, 2017 at 5:15 pm #794980
mchbeck
Participant
Hi there,

I spotted the following change in the changelog:
– fixed: shortcode “Product Purchase Button”: variable product does not show any price when all have same price
and I was pretty happy about it, because so far, prices for variable products when all have same price were not displayed on my website at all.

The thing is, it doesn’t work correctly on my website. After updating to 4.0.7 it does indeed display the price now, but not where it’s supposed to show it. It’s actually above the product purchase button at a weird location. You can find an example here: http://mondiale.de/testumgebung/de/produkt/pruefung-telc-deutsch-a1/

Any ideas how to fix this or what’s wrong?

Help would be appreciated. Thanks!
- This topic was modified 7 years, 2 months ago by mchbeck. Reason: changed the version to 4.0.7
May 18, 2017 at 7:37 am #795289

Rikard
Keymaster

Hey mchbeck,

We released an update shortly after 4.0.6, could you try to update to 4.0.7 to see if that helps please? http://kriesi.at/documentation/enfold/updating-your-theme-files/

Best regards,
Rikard

May 18, 2017 at 8:18 am #795576

mchbeck
Participant

The site is actually running 4.0.7 already, I just got confused because the changelog only mentions 4.0.6, sorry.

It has not been fixed with 4.0.7, I’m afraid :(

May 19, 2017 at 9:48 pm #796802

Basilis
Inactive Moderator

Hi,

I am not sure if the issue is on us, or on your modifications
It seems that the full CSS are been custom modified there, is that correct?

Best regards,
Basilis

May 22, 2017 at 7:58 am #797433

mchbeck
Participant

There are some minor CSS modifications, but nothing regarding or affecting the purchase button. Most of it is unmodified css that comes with Enfold.

I have now deactivated the minifier though, which might have created the impression that css had been modified.

I’m afraid I can’t update my live site to the latest Enfold version until this issue has been fixed.

May 22, 2017 at 8:47 am #797458

John Torvik
Inactive Moderator

Hi,

May you provide us your WP credentials?

Best regards,
John Torvik

May 22, 2017 at 9:46 am #797498

mchbeck
Participant

Hi John,

Sure, here you go. Thanks!

Please be aware that the site is not running WooCommerce 3.0 yet, as it breaks some stuff, so I’m sticking with 2.x for now.

May 23, 2017 at 11:21 pm #798579

Basilis
Inactive Moderator

Hi,

I am sorry but we can not offer any support, if there is not the latest version up and running
This is part of our support policy, so we do not have to debug things that are old and might have compatibility issues.

Best regards,
Basilis

May 24, 2017 at 8:33 am #798769

mchbeck
Participant

Alrighty, for the sake of testing I’ve upgraded the test site to WooCommerce 3.0 and the issue is still there: http://mondiale.de/testumgebung/de/produkt/pruefung-telc-deutsch-a1/

There are a lot of other issues now too (for example the little cart icon in the menu is not showing up at all when there’s something in your cart), but let’s ignore those for the moment.

May 26, 2017 at 10:12 am #800047
Andy
Inactive Moderator
Hi,

I would try to remove all customizations you’ve implemented so far. So deactivate your child theme and remove any custom code, to make sure you’ve got a clean Enfold installation. Also keep all plugins but WooCommerce by WooThemes deactivated while testing.

If does not work, try this code inside Quick CSS field as a workaround:
```
p.price {
top: 125px;
left: 107px;
position: relative;
z-index: 100;
}
```
and adjust top and left value as needed.

Best regards,
Andy
May 29, 2017 at 9:42 am #800972

mchbeck
Participant

Thanks for the answer, Andy.

While your CSS does indeed function as a workaround, I’d prefer a real fix, because I don’t want to add workaround css to my css file all the time, which might then break something when the next update is released.

I deactivated the child theme and went back to the original Enfold theme, I deactivated all custom css in the Quick CSS box and I deactivated any plugins that might conflict with it. The issue still remains, as you can see: http://mondiale.de/testumgebung/de/produkt/pruefung-telc-deutsch-a1/

Please don’t leave me hanging here with this workaround. Thank you! :)

May 31, 2017 at 5:22 am #801790

Ismael
Moderator

Hi,

All this “workaround” is going to be included in the theme once they are fully tested. A “workaround” is actually the “fix” but we prefer to call it a “workaround” because they are not included or native in the theme yet.

Best regards,
Ismael

May 31, 2017 at 7:53 am #801861

mchbeck
Participant

Alrighty, good to know, thank you.

I’m afraid this workaround is not working 100 % though.

It’s fine here, for example: http://mondiale.de/testumgebung/de/produkt/deutsch-intensiv-a1-b1/

But it’s not fine in this case: http://mondiale.de/testumgebung/de/produkt/pruefung-telc-deutsch-a1/

If I adjust the top value to fix one of these products, the other one gets broken.

June 1, 2017 at 8:13 am #802401
Ismael
Moderator
Hi,

Thank you for the update.

Please remove the css modification then add this code in the functions.php file.
```
// price fix
function ava_custom_script_mod(){
?>
<script>
(function($){
	function a() {
			$('#top .av-woo-purchase-button .price').insertBefore('.single_add_to_cart_button');
	}

	a();
})(jQuery);
</script>
<?php
}
add_action('wp_footer', 'ava_custom_script_mod');
```
Best regards,
Ismael
June 1, 2017 at 8:18 am #802406

mchbeck
Participant

Thanks for the update.

If I remove the css from your previous post and insert the code into the functions.php, the price is back to its original position above the whole button area, I’m afraid: http://mondiale.de/testumgebung/de/produkt/pruefung-telc-deutsch-a1/

June 1, 2017 at 8:59 am #802417

Ismael
Moderator

Hi,

Please remove browser cache or hard refresh the page after adding the script.

UPDATE: We modified the code a bit. Please try it again.

Best regards,
Ismael

June 1, 2017 at 9:04 am #802421

mchbeck
Participant

Okay, thanks.

Now it’s fine for one product, but not for the other one again.

It’s fine here: http://mondiale.de/testumgebung/de/produkt/deutsch-intensiv-a1-b1/
It’s not fine here (weird position): http://mondiale.de/testumgebung/de/produkt/pruefung-telc-deutsch-a1/

Also, if you select a specific product variation at http://mondiale.de/testumgebung/de/produkt/deutsch-intensiv-a1-b1/ it shows the price range right above the button and on top of that is the actual price. This is kind of confusing for a customer.

Thanks for your support!

June 1, 2017 at 9:14 am #802423
Ismael
Moderator
Hi!

Please add this css code to re-align the price.
```
.woocommerce-variation-add-to-cart .price {
    display: block !important;
}
```
And if you want to remove the price range after selection, add the following css code.
```
.woocommerce-variation-add-to-cart-enabled .price {
    display: none !important;
}
```
Final css code should be :
```
.woocommerce-variation-add-to-cart .price {
    display: block !important;
}

.woocommerce-variation-add-to-cart-enabled .price {
    display: none !important;
}
```
Regards,
Ismael
June 1, 2017 at 9:32 am #802433

mchbeck
Participant

Yay, thank you, that almost does the trick.

It’s fine for http://mondiale.de/testumgebung/de/produkt/deutsch-intensiv-a1-b1/, here it shows the price range first, and shows only the actual price once a variation has been selected. Perfect!

It’s not fine for http://mondiale.de/testumgebung/de/produkt/pruefung-telc-deutsch-a1/ though. If no variation is selected, it shows the price (which is the same for every variation), but if I select a variation, no price is shown at all. It flashes the actual price for a second, but then it disappears.

June 2, 2017 at 6:46 am #802880

Ismael
Moderator

Hi,

Did you add the css code above? For the “pruefung-telc-deutsch-a1/” product, it doesn’t have to display the actual price because like you said, the variations have the same prices.

Best regards,
Ismael

June 2, 2017 at 7:46 am #802891

mchbeck
Participant

Yes, I added the code above.

Well, it doesn’t display ANY price after selecting a specific variation, but it’s supposed to. Looks a bit weird when the price disappears after selecting a variation, especially when it shows up for a fraction of a second and disappears right away.

June 6, 2017 at 1:38 pm #804499

mchbeck
Participant

Any ideas how to fix that?

June 9, 2017 at 8:03 am #805886
Ismael
Moderator
Hi,

I’m very sorry for the delay. We edited the css modifications then added the following script in the functions.php file.
```
// price fix
function ava_custom_script_mod(){
?>
<script>
(function($){
	function b() {
			$('.single_variation').on('show_variation', function() {
					var variation = $('.woocommerce-variation single_variation'),
							price = $('#top .woocommerce-variation-add-to-cart .price'),
							varprice = $('.woocommerce-variation.single_variation .woocommerce-variation-price .price');

					if(varprice.length != 0) price.css('display', 'none');
			});

			$('.single_variation').on('update_variation_values reset_image hide_variation reset_data', function() {
					var price = $('#top .woocommerce-variation-add-to-cart .price');
					price.css('display', 'block');
			});
	}

	b(); 
})(jQuery);
</script>
<?php
}
add_action('wp_footer', 'ava_custom_script_mod');
```
Best regards,
Ismael
June 9, 2017 at 8:12 am #805892

mchbeck
Participant

Thanks for the update.

Do I add this to the functions.php instead of the old code or in addition?

Also, when you say “We modified the css modifications”, what do I have to modify?

Thanks!

June 9, 2017 at 8:58 am #805916

Ismael
Moderator

Hey!

We already added it in the functions.php file. Please remove browser cache or hard refresh before checking the product pages.

Regards,
Ismael

June 9, 2017 at 9:09 am #805925

mchbeck
Participant

I see, that was unfortunate timing then.

In order to test the WordPress 4.8. update, I reverted all the changes this morning, since there was no reply from you, so I’m afraid the functions.php is in a different state now (I only saw that there had been a reply here after I changed it back). I’m really sorry. Could you please change it again? I won’t touch anything until I hear from you again.

June 12, 2017 at 9:30 am #806784

mchbeck
Participant

Alternatively and ideally, please let me know what has to be modified so that I can modify it myself (and anybody who might find this thread via Google).

Thank you!

June 13, 2017 at 12:05 pm #807395
Ismael
Moderator
Hi,

Alright. We added the modification again in the functions.php file (#805886) and the style.css file (css code below).
```
#top .woocommerce-variation-add-to-cart .price {
    display: block;
}

#top .woocommerce-variation-price {
    display: block;
    margin: 0.85em 0;
}
```
Best regards,
Ismael
June 13, 2017 at 12:16 pm #807401

mchbeck
Participant

That’s perfect, working great.

Thank you, Ismael! :)

June 14, 2017 at 9:23 am #807860

Ismael
Moderator

Hi,

Glad we could help. We’ll close the thread now. :)

Best regards,
Ismael
Author

Posts