Variable button issue with woocomerce

I understand if this is something that is way beyond what I can request help on, but I am desperate and thought I would ask.

I am creating a site using WordPress and WooCommerce. I have an issue with the variable buttons that I have in my theme.
I can't figure out how to correct the issue of two different style buttons showing when they are rolled over, and makes it difficult to click on.
If you go here: http://espressogirlscoffee.com/coffee/product-category/coffees/single-origin-coffees/
then click on one of the coffee buttons you will see what I mean. I figure its a conflict between WooCommerce and my Variable buttons in the theme I created. Any Chance you can tell me what I need to add to the Custom CSS page to get rid of this issue? I've used ? This is my first WooCommerce Site... I wish I had found you all before I used Woo, and instead used your Ecommerce Plugin.. But I just joined and this site needs to go live tomorrow... and WooCommerce won't give me any support.

Thank you... for your consideration....

  • Loretta

    First thank you so much for looking at this...

    You need to click on the button to see the issue, and sometimes clicking on it doesn't work..

    here is a link to the screen grab wasn't sure how to attach one to this post. My first post since joining...

    http://espressogirlscoffee.com/coffee/?attachment_id=732

    The Red circled one is what happens when it is clicked... if they click the larger button on the bottom they are not sent to the next page.. and on the next page, once they choose the ground of coffee the add to cart button does the same thing, when clicked.

    thanks again for looking at this

  • Loretta

    It does it in Chrome, Explorer, Firefox, and Maxathon Windows 7... and on all of my Tablets.

    You have to click the button to see it.. use the Coffee ones and click on the bottom part of the button.. it does it no matter where you click..

    And its ALL of the cart buttons even add to cart... see this video:

    http://espressogirlscoffee.com/screencaptureespresso.mp4

    thanks... I am using firefox to try to trace it down... did ok with just about everythign else but I dont know enough about where in the CSS or PHP this needs to be edited...

    This is the Custom CSS I've used so far.. the theme has an option for adding Custom CSS. Here is what I was told to add for various thing including the buttons, and it worked at first but after Woocommerce did an update a little while back the custom CSS stopped working for the buttons anyway.

    mark{ background:none; }

    a.pdd-button, a.pdd-button:link, a.pdd-button:link:link, body a.pdd-button:link, a.pdd-button:visited, body a.pdd-button:visited, input.pdd-button, button.pdd-button
    {
    -moz-box-sizing: content-box;
    color: #000000;
    cursor: pointer;
    display: inline-block;
    font-family: Cabin,Arial,'Arial Unicode MS',Helvetica,Sans-Serif;
    font-size: 14px;
    font-style: normal;
    font-weight: normal;
    line-height: 28px;
    margin: 0 5px 0 0 !important;
    overflow: visible;
    position: relative;
    text-align: center;
    text-decoration: none;
    text-indent: 0;
    vertical-align: middle;
    white-space: nowrap;
    }

    button.single_add_to_cart_button:hover {background:#8D4F92 !important; color:#ffffff !important}

    .home .pdd-postheader {display:none !important}

    .tax-product_cat .pdd-postheader {display:none !important}

  • Jack Kitterhing

    Hi there @Loretta

    I hope you are well today and thanks for the additional information.

    I have now been able to replicate this :slight_smile:

    Your CSS looks good, but there's one thing that seemed to help here, your currently using a display: inline-block;

    Change that to just a normal display: block; and it then doesn't do it for me on Firefox in testing, can you try that out and see if it works for you?

    Thank you!

    Kind Regards
    Jack.

  • Loretta

    Thanks for trying... but that didn't work,, it only affects that inactive state button and and changing the line just changes the width of the inactive state buttons to a longer width..
    I notice that in FireFox if I get rid of the "product_type_variable" line, it corrects it. I am just not sure where this line is and how to modify it Here is the line of code I am talking about:

    Select options

  • Loretta

    I figured it out! Its not the best fix but I just removed the code in the CSS that was refering to the varible button styles: .pdd-button.active, .pdd-button.active:hover
    {
    background: #BD8BC1;
    background: linear-gradient(top, #B57EB9 0, #D2AFD4 20%, #BB88BF 50%, #AA6AAF 80%, #B277B6 100%) no-repeat;
    background: -webkit-linear-gradient(top, #B57EB9 0, #D2AFD4 20%, #BB88BF 50%, #AA6AAF 80%, #B277B6 100%) no-repeat;
    background: -moz-linear-gradient(top, #B57EB9 0, #D2AFD4 20%, #BB88BF 50%, #AA6AAF 80%, #B277B6 100%) no-repeat;
    background: -o-linear-gradient(top, #B57EB9 0, #D2AFD4 20%, #BB88BF 50%, #AA6AAF 80%, #B277B6 100%) no-repeat;
    background: -ms-linear-gradient(top, #B57EB9 0, #D2AFD4 20%, #BB88BF 50%, #AA6AAF 80%, #B277B6 100%) no-repeat;
    background: linear-gradient(top, #B57EB9 0, #D2AFD4 20%, #BB88BF 50%, #AA6AAF 80%, #B277B6 100%) no-repeat;
    -svg-background: linear-gradient(top, #B57EB9 0, #D2AFD4 20%, #BB88BF 50%, #AA6AAF 80%, #B277B6 100%) no-repeat;
    border:1px dotted transparent;
    padding:0 15px;
    margin:0 auto;
    }
    .pdd-button.active, .pdd-button.active:hover {
    color: #141624 !important;
    }

    and that fixed it!

    thanks for all your help, you help me narrow it down!

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.