Essential Grid WooCommerce Price not including Tax

Support
#1

1.On the site medvetenandning-dot-se, there is WooCommerce enabled and on the site. Tax is enabled. But on the product page medvetenandning(.)se(/)produkter/ essential grid is used for displaying the products. These prices don’t include VAT. While on any single product page, prices incude VAT. I want the essential grid to show prices incuding VAT. How do I achieve this?
2.Also, I’d like to remove the default cornerstone slider fade animation.
3.The slider loads after everything else has loaded even though the slider is the first element. How can I fix this? Thanks.
Note: I am not using revslider. it’s the built in slider.

#2

Hi there,

Thanks for posting in.

  1. Have you tried editing the grid’s skin and change the source to Full Price? If not, you should assign a skin on your grid, something that you can edit.

For the meantime, would you mind providing your login credentials in a secure note? I like to test it first,

  1. That’s not possible, it’s part of the core. The one responsible for it is the javascript in which minified along with other features.

  2. That’s normal regardless of slider plugin. Even if you add a grid, it will load later than standard content. It’s because a slider is not a simple feature, it needs to load the images and execute scripts. If you just wish to improve its loading, then you should not display a full-size image ( 1920x1080 ) and use CDN such us CloudFlare to serve your site’s assets.

Thanks!

#3

Okay. Please check secure note for credentials.

#4

Also, I’d like to remove all animations(apart from slider since its not possible) on mobile. These animations are added via cornerstone options.
Update:
I’ve removed animations on mobile using the following CSS with media query.
.noanimation {
-webkit-transition: none !important;
-moz-transition: none !important;
-o-transition: none !important;
transition: none !important;
}

I’m sure there is a better way. This method works but some images are loading like lazy load which shouldn’t be. Thanks.

#5

Hi There,

Thank you for the credentials.
On shop page that is built using essential grid and on single page both prices doesn’t include VAT which is how it should be: . https://screencast-o-matic.com/watch/cb6e68Iay4Please check this guide: https://docs.woocommerce.com/document/setting-up-taxes-in-woocommerce/

For essential grid to include tax, you have to edit the skin you were using and then look for the part that is displaying price then use this instead $_product->get_price_excluding_tax()

For the transition, to reset it we can use CSS like what you did. Unsetting the default value by editing the element templates us possible but it is outside the scope our support.

If you don’t want the default animation that comes with slider element in Cornerstone, please try revolution slider instead. That plugin has more options that you use, like settings the animation that fit your needs

#6

I’m sorry I forgot to mention. If you use a VPN of another country you’ll be about to see it. Here’s how it looks on a VPN from Sweden location. Note the difference in price.

I’m not sure about where to edit the skin since I didn’t create it and was created by someone else. Can you please explain in details?

Regarding CSS, looking at the post at https://theme.co/apex/forums/topic/disable-animations-on-mobile/ and https://theme.co/apex/forums/topic/remove-feature-box-icon-animation-on-mobile/ seems you do help? I’m not sure.
Thanks.

#7

Hi,

  1. Eesential grid skin editor does not allow php codes. It could be possible with custom development, but this would be outside the scope of support we can offer. You may wish to consult a developer to assist you with this.

As a start you may refer to the link below.

https://www.themepunch.com/essgrid-doc/item-skin-editor/

  1. To disable animation, you can try adding this code in X> Launch > Options > CSS 
@media (max-width: 767px) {
   .js .x-column[data-fade="true"] {
       opacity: 1 !important;
   }

   .js .x-column[data-fade="true"][data-fade-animation="in-from-right"] {
       right: 0px !important;
   }

   .js .x-column[data-fade="true"][data-fade-animation="in-from-left"] {
       left: 0px !important;
   }
}

Thanks