Community Forums › Forums › Archived Forums › Design Tips and Tricks › Best way to make WooCommerce pretty
- This topic has 4 replies, 3 voices, and was last updated 8 years ago by Konspaul.
-
AuthorPosts
-
February 26, 2016 at 10:08 am #179983KonspaulMember
I'm working on a client page that has Genesis sample theme and WooCommerce. I'd like to edit the response after a buyer presses "Add to basket" button. Right now after pressing the button it shows a square that according to WooCommerce css should be Font Awesom icon e017 (content: "\e017";). Font Awesom is installed to the site but still this icon is not working. How can I tackle this problem. What is the best we to make WooCommerce pretty? Maybe a plugin?
http://horsma.comFebruary 26, 2016 at 8:46 pm #180028ChristophMemberHi,
could you please be more specific where the icon is not loading?
I see a hand pointing to the right after clicking the add to cart button
http://screencast.com/t/Wg0ZuGnokAlso the console shows that you are trying to load some files but they cannot be found:
http://screencast.com/t/OoaLiTnb8p6q
February 27, 2016 at 5:59 am #180053KonspaulMemberOkey, the loading error should be fixed now. Thank for pointing that out!
That would also fix all those icon problems but yesterday I actually changed the woocommerce.css file abit to load the fontawesom fonts so that is why you see not the hand pointing to the right. Everything is fine with the icons now.
Could you help me with something else please?
After pressing the Add to Basket button I'd like the hand to spin three rounds. Right now the hand has this code:
a.added_to_cart:before { font-family: Fontawesome; content: "\f0a4"; margin: 0 3px; display: inline-block; -webkit-transform: rotate(1080deg); -moz-transform: rotate(1080deg); -ms-transform: rotate(1080deg); -o-transform: rotate(1080deg); transform: rotate(1080deg); -webkit-transform-origin: 50% 50%; -moz-transform-origin: 50% 50%; -ms-transform-origin: 50% 50%; -o-transform-origin: 50% 50%; transform-origin: 50% 50%; -webkit-transition: 3s ease all; -moz-transition: 3s ease all; -o-transition: 3s ease all; transition: 3s ease all;
When this code was tested in Chrome inspector the hand actually rotated. But when I put that very same code to my woocommerce.css files I don't get any animation. What can cause this malfunction?
Here are the screenshots and screen recordings: https://drive.google.com/folderview?id=0B1iP4v6DAtWkWkxYc0VEZkZUd0k&usp=sharing
February 27, 2016 at 9:04 am #180059Victor FontModeratorWhen you change the wooommerce.css file, you are changing a core plugin file. The next time WooCommerce issues an update to their plugin, your changes will be overwritten and you will lose all of your hard work. If you don't want to lose your work, a better approach is to add custom or overriding woocommerce css directly to your child theme's style.css file. However, there's a little trick to this to make it work properly. By default, the child theme's css file loads before the WooCommerce css file, whereby giving the WooCommerce style sheet priority in the browser. You need to change the load order to give your child theme's style.css file the priority. This article explains how: http://victorfont.com/change-genesis-child-theme-style-sheet-load-order/.
Also, to rotate a font awesome icon, you would normally add the fa-spin class to the icon. However, since you wrote your own spin code, are you sure you included the closing brace when you transferred the code to the woocommerce.css? It's missing from your code above.
Regards,
Victor
https://victorfont.com/
Call us toll free: 844-VIC-FONT (842-3668)
Have you requested your free website audit yet?March 1, 2016 at 1:05 pm #180359KonspaulMemberHello Victor and thank you for your message.
I can add fa-spin class because the actual hand spin is pseudo element. As far as I know there is no way to add a class to element that is generated by css code.
I double checked and the closing brace is there. You can see that the code actually works when inspected in Chrome. Somehow the animation itself is not working. Do you have any ideas?
-
AuthorPosts
- The forum ‘Design Tips and Tricks’ is closed to new topics and replies.