Home Forums WoodMart – Premium Template Change Icon on Add to Cart Button on shop list and archives

This topic contains 15 replies, has 2 voices, and was last updated by Elise Noromit Elise Noromit 5 days, 21 hours ago.

Viewing 16 posts - 1 through 16 (of 16 total)
  • Author
    Posts
  • #112782

    webresultat
    Customer

    Hi,
    could you please help me?
    I would like to change the actual “shopping cart” hover icon on the “Add to Cart”-Button to another icon.

    how is this possible for the shop page and also for the category archives?

    Thanks for your help
    greetings

    #112790

    Hello,

    Choose and advise which icons you want to replace from this source https://fontawesome.com/v4.7.0/icons/

    Provide page URL and screens which ones.

    Best Regards

    #112970

    webresultat
    Customer

    Thanks for your fast reply.

    As my page is in development mode I cannot provide a valid page link yet.

    But it’s about the shop page and categorie archives.
    there products are shown as grid with summary on hover style.
    Now on the “addtocart” button there is a hover effect where a cart icon is shown.
    I think its following class : button product_type_external add-to-cart-loop

    I would like to replace the hover effect icon with any fontawesome icon.

    Specially here I would like to take following icon : fa-plus-square

    Best option would be if i could change this icon by myself, if i want to change it afterwards again.

    i attach a screenshot of the “addtocart” button on products grid view, but as it’s on the hover effect i cannot add a screenshot of the icon itself.

    thanks for your help.
    greetings

    Attachments:
    You must be logged in to view attached files.
    #113097

    Hello,

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

    body .product-list-item .woodmart-add-btn>a:before, 
    body .woodmart-hover-base:not(.product-in-carousel):not(.hover-width-small):not(.add-small-button) .woodmart-add-btn>a:before,
    body .woodmart-hover-button .hover-mask>a:before, 
    body .woodmart-hover-info-alt .product-actions>a:before, 
    body .woodmart-hover-quick .woodmart-add-btn>a:before,
    body .woodmart-hover-standard .btn-add>a:before, 
    body .woodmart-price-table .woodmart-plan-footer.add-to-cart-loop:before{
        content: "\f196 ";
    	 font-family: fontawesome;
    }

    Best Regards

    #113193

    webresultat
    Customer

    Thank you.
    But this code is doing something else.
    Now the Colored Button with “Buy Now” is not there anymore. Now I only see a Cart-Icon on white background instead.
    What I wanted is to have the “BuyNow” Colored Button, and on mouse hover there is shown the cart-icon.
    I want to replace this icon with ” fa-plus-square” but still want to have to colored button with tagging “Buy now”. So I only want to change the icon on mouse hover.
    Do you get me now?

    Thanks for your help
    greetings

    #113194

    webresultat
    Customer

    To be more clear I want to replace the shopping-cart-icon on mouse hover with “fa-plus-square” from fontawesome.

    #113196

    webresultat
    Customer

    I use “Show summary on hover” template for shop page from your theme and as you can see in settings page on the preview image of this template it’s about the green “select options” button . there on hover the icon needs to be changed.

    #113203

    webresultat
    Customer

    Oh sorry missed something.

    In 3×3 Grid view its already working with the wished icon but in 4×4 grid view its still the shopping-cart-icon. can you help me there?

    #113211

    Hello,

    As soon as your site is on the live host, contact us with your site admin access and we shell provide your new CSS.

    Best Regards

    #113213

    webresultat
    Customer

    Okay thank you. You can access our environment. See Private Content.

    Private Content Hidden
    #113240

    Hello,

    You requested to provide the code to change the icon to any, plus in the square, for example, so that you could further insert your own icon. So I have provided the code. You can insert any icon from fontawesome icons https://gyazo.com/e5cf03962ac23d25b0d18449955d5e60

    Please clarify what icon do you want.

    Best Regards

    #113255

    webresultat
    Customer

    I attach a video of the 4×4 grid view where still the shoppingcart icon is shown.

    Private Content Hidden
    • This reply was modified 6 days, 13 hours ago by  webresultat. Reason: video link attached
    #113284

    Hello,

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

    body .woodmart-buttons .woodmart-add-btn > a:before {
        content: "\f196 ";
    	 font-family: fontawesome;
    }

    Best Regards

    #113287

    webresultat
    Customer

    Thank you so much for your patience and your help! everything working fine now!!

    #113288

    webresultat
    Customer

    Except one more thing:
    Before I added your latest code I had the blue “buynow” button still viewable on 3×3 grid view and on 2×2 grid view.
    as i now added your latest code all grid views have only the style from 4×4.
    now there is no blue button anymore.
    could you advise me how to have the blue button viewable on 2×2 and 3×3?
    and only on 4×4 i wanted to replace the icon on white background.
    greetings

    #113318

    Hello,

    CSS code does not influence the button form. Moreover, the CSS provided touche only icon content. Remove the CSS for testing and you will have the same result.

    Set 3 columns in the row. Now you have 4 https://gyazo.com/34f2259000992d173bc36299d7056a92

    Best Regards

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

You must be logged in to reply to this topic.