Woocommerce View Cart button for indiv Products

  • Resolved kristinubute

    (@kristinubute)


    7 years 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” for that PRODUCT 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 5 replies - 1 through 5 (of 5 total)
  • Job a11n

    (@jobthomas)

    Automattic Happiness Engineer

    Hey @kristinubute – I’m not entirely sure I follow. Do you want to change this button to an icon?


    Link to image: https://cld.wthms.co/yj2M74

    Thread Starter kristinubute

    (@kristinubute)

    Hi

    Yes exactly !

    The formatting like it is there above, on the ipad the “View Cart” goes strangely on the next line so was trying to find another method for it to look differently or display normally both on the PC and ipad version.

    Whatever coding I put on the PC version reflects the ipad version.

    Client wants a thin border around the “View Cart” and creamy background, but the thin border views properly on the PC but no border views on the ipad version.

    Formatting has been a bit of a pain so far.

    Any simple ideas for me to know that will make life easier?

    Can I change it into a symbol cart ?
    OR I have changed formatting so it is smaller etc.
    Either /OR

    As I have some pages with normal Woocommerce and some pages with the Divi Builder Shop module the Shop module section doesn’t show the “View Cart” button beside the “Add to Cart” button which is a pain. I have done all sorts of different coding, got it working, but then didn’t look right in formatting on ipad.

    I have tried the @media for ipad also but doesn’t reflect all my coding for certain sections.

    Any advice would be great !

    Thx
    Kristin

    Thread Starter kristinubute

    (@kristinubute)

    I have coding in @media for ipad.

    .added_to_cart {
    background-color: #c0d4f3 !important;
    margin-left: 0px;
    color: #000000;
    border-style: solid;
    border-width: .02px;
    border-color: #5b585b;
    display: inline-block;
    -webkit-appearance: none;
    -webkit-font-smoothing: antialiased;
    font-size: 10px;
    }

    But doesn’t show the borders in the Ipad or the colour background.

    I want a different colour in the background for PC and ipad.

    Thx
    Kristin

    Mikey (a11n)

    (@mikeyarce)

    Hi @kristinubute,

    Could you send us a link to where this button is going to a second line?

    Thanks!

    Thread Starter kristinubute

    (@kristinubute)

    Hi

    Can’t post a link yet on my test site localhost.

    BUT let’s rephrase the question and try another angle (and forget my original question for the time being), HOW can I have the “Add to Cart” button once clicked, just ONLY show the tick next to it like it does on the mobile phones … for the PC and Ipad version only.

    And have NO icon for “View Cart” after “Add to cart” button has been clicked ..

    How can I achieve this ?
    I would prefer that option

    I have been trying to look under “INSPECTOR” to see the relevant coding for the tick but bit hard on the mobiles viewing code .

    Thx
    Kristin

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Woocommerce View Cart button for indiv Products’ is closed to new replies.