Added to Cart Button /ViewCart button

  • Resolved kristinubute

    (@kristinubute)


    8 years, 2 months ago

    Hi

    In Woocommerce I don’t want to change the look of the “Add to Cart” Button (I know how to change the colours and positioning of this in CSS) but I want to CHANGE the styling/icon for AFTER the client has clicked on “ADD TO CART” button, and it displays the “VIEW CART” right next to the “Add to Cart” which then the customer can click to view the CART straight away if they want. It’s usually just a boring old “View Cart”
    text next to the Product after added

    I want to change the look of this to an ICON (cart button ?) or style it better somehow and make it go underneath the “Add to Cart” button once clicked on the Ipad especially .. FOrmatting on the iPad for this is a pain trying to change the coding CSS for the Ipad so it displays properly on iPad etc

    Any help greatly appreciated urgently

    Thx
    Kristin

Viewing 3 replies - 1 through 3 (of 3 total)
  • Caleb Burks

    (@icaleb)

    Automattic Happiness Engineer

    8 years, 2 months ago

    Hello,

    What you are describing sounds like something the theme is doing. By default, there is just another button that appears like this: http://cld.wthms.co/UpXy57. YOu’ll see the default behavior if you temporarily switch to a default WordPress theme.

    So this is something you’ll need to contact the theme authors about, as the code that generates this is not within WooCommerce core.

    Thread Starter kristinubute

    (@kristinubute)

    8 years, 2 months ago

    Hi

    Yes that is what it looks like already on my site. It’s already there by default. I had changed the colours etc.

    What I was meaning what is the best way to change it to maybe something completely different like an icon or something else ?

    And have it smaller or something. Basically at the moment I have it next to the “Add to Cart” button … and obviously displays once client has clicked on “Add to Cart”.

    But when you have 4 products across the page, and if a client clicks on all 4 products to BUY then you have 2 icons for each product (“still the Add to Cart” displaying AND the “View Cart”. If all products clicked doesn’t fit across the screen properly (8 icons altogether because I as the pretend client has ordered all 4 products on the same line).

    It gets a bit squishy.. Also on the mobile version also.

    So therefore trying to find an alternative method for the “Added to Cart” button to be smaller or something different so it doesn’t take up so much room.

    Thx
    Kristin

    Caleb Burks

    (@icaleb)

    Automattic Happiness Engineer

    8 years, 2 months ago

    Gotcha. So changing this is possible, but will require some custom code – JavaScript to be specific.

    This is where the extra button is currently added: https://github.com/woocommerce/woocommerce/blob/ca317727102560dce7c8a65622ff9301a8f8380e/assets/js/frontend/add-to-cart.js#L96-L114. So could attach a custom event to change this behavior.

    Or, you could also take advantage of the fact the main add to cart button has the added class appended to the list once added. So you could do custom CSS to add an icon to the end of .ajax_add_to_cart.added {} for example, then hide the other button.

    • This reply was modified 8 years, 2 months ago by Caleb Burks.
Viewing 3 replies - 1 through 3 (of 3 total)

The topic ‘Added to Cart Button /ViewCart button’ is closed to new replies.