I have this WordPress project and I am using WooCommerce Plug-in and WooCommerce Adamas Theme. I have the following problem:
I need to replace the word “Cart” from the top right menu with an icon of a cart as part of my project. What my theme does in its functions.php
file is to create two a
links to the Cart’s contents PoP Up element. The first is the word “Cart” and the second is the cart product counter.
What I have tried is to add the following CSS properties by adding the class cmagnet-cart
to the second, in order to include the cart icon.
.cmagnet-cart{
background: url('http://www.athlokinisi.gr/images/shopping-cart.png') no-repeat 10px 6px;
min-width: 45px;
text-align: right;
background-size: auto 17px;
}
I have added the class to the appropriate element at the functions.php cartShow() function
where it is originally generated. As you can see, the problem is that when page loads, it shows the icon perfectly on position and then there is a javascript reload of some WooCommerce parameters and hides it again, by returning to its original values. Thus, without my added class.
After contacting the Adamas Theme Support team at PremiumCoding and after several tickets which took place for over 2 weeks, it was pointed out to me that I need to make an alteration at WooCommerce’s JS function, perhaps the cart-fragment.js
. The problem is that nothing makes sense to me in there and I really cannot find where to make the code alteration in order for the Javascript’s second load to include my function or exclude this element from double loading. The Suport team there couldn’t assist me further.
I would appreciate endlessly any help as well as an explanation of why this happens. It doesn’t make any sense to me why to load some elements two times.
To add two additional information:
– I know that when I fix the issue I will just hide (probably by putting in comments) the first a
link which prints the word “Cart”
– The last response I got from support was the following (in case it is of any help):
even if you replace text with icon after loading WooCommerce Ajax,
text will be back. So you will need to change WooCommerce js function
or translate all WooCommerce plugin and theme with WPML plugin and
string translation module.
Extended info:
In general it’s not enough for me to just replace the first a
link that says “Cart” with the cart’s image, because it doesn’t solve my bigger problem which includes the following: I am using Greek language for this project and the theme has many uppercase
CSS elements. There are some problems with this because Greek words in uppercase cannot be automatically transformed because you have to remove the accents from the vowels. Therefore, I had made a jQuery functions which runs on document ready and corrects this problem, but due to the aforementioned problem of the double load it returns all text back to the previous state.
I solved it by adding this code:
into the file:
This
JS
file was the one responsible for the double load of contents. It may not be the best solution, yet a working one.