Skip to:
Content
Pages
Categories
Search
Top
Bottom

Is BP Default Theme 1.7rc1 compatible with WooCommerce 2.0.5?

  • Avatar of SydneyDesigner
    SydneyDesigner
    Participant

    @sydneydesigner

    Using WP3.5.1 and BuddyPress 1.7rc1 Default Theme with WooCommerce 2.05.

    The WooCommerce “Add to Cart”, “Proceed to Checkout” & “Place Order” button text/background colours are not working on IE8/9, making some button text unreadable. All seems to work OK on Chrome and Firefox.

    See the IE8/9 problems with these buttons on http://shinfin.com/leg-fins-flippers-buy/shinfin/leg-fins-with-straps-pair/ and subsequent shopping pages.

    How do I make BP Default Theme 1.7rc1 compatible with WooCommerce 2.0.5? Please help if you can.

    Many thanks.

Viewing 4 replies - 1 through 4 (of 4 total)
  • Avatar of @modemlooper
    @modemlooper
    Moderator

    @modemlooper

    You should be asking Woo Themes about compatibility.

    Avatar of SydneyDesigner
    SydneyDesigner
    Participant

    @sydneydesigner

    Thanks @modemlooper. I have been asking at Woo Themes but no reply yet. If I hear anything I will post here too, to help others.

    However, these IE8/9 problems with the WooCommerce buttons go away when I switch to twentytwelve theme and return when I switch back to BuddyPress Default Theme (I’m now on the latest BuddyPress 1.7 version and the problem is still there). So I’m guessing that the fix needs to be done in the BuddyPress Default Theme to make it work with WooCommerce (rather than the other way around)- would you agree with this logic?

    Avatar of aces
    aces
    Participant

    @aces

    Using IE developer tools I can see that line 1720 of bp’s default.css uses a filter that starts as white ( #ffffff ). If this line is turned off then the white text of the add to cart button can be seen.

    It can also be seen that Woocommerce colours this text white though I can’t tell you the line it’s on.

    Using Firebug with firefox it seems that woocommerce colours the button background with it’s own ‘mozilla’ only gradient which seems missing from the ie version

    This should be fixable by adding to the child theme style sheet

    Try using Firebug with Firefox, or use the developer tools in Chrome, Safari and IE, or Opera Dragonfly to see for yourself.

    Avatar of SydneyDesigner
    SydneyDesigner
    Participant

    @sydneydesigner

    Thanks @aces

    I’ve been trying your suggestions and am getting closer I think, but I’m still a bit out of my league so wondering if you or anyone else can help a bit more please.

    In the absence of anything in my child theme, should the WooCommerce button CSS always override the BuddyPress default.css? ….Or are there ways that the BuddyPress default.css can win out? For example if both have the same named a.button…etc. definitions which may conflict with each other, which one wins out?

    Here is the a.button code from WooCommerce to compare with 1720 of bp’s default.css. I don’t understand it well enough to work out the conflict, or how to hack either to fix it, or better still how to add something into my child theme to fix it. Any ideas gratefully received?

    ` /* =Buttons
    ————————————————————– */

    a.button, button.button, input.button, #respond input#submit, #content input.button {
    font-size: 100%;
    margin: 0;
    line-height: 1em;
    cursor: pointer;
    position: relative;
    font-family: inherit;
    text-decoration:none;
    overflow: visible;
    padding: 6px 10px;
    text-decoration:none;
    font-weight:bold;
    .border_radius(2px);
    left: auto;
    text-shadow:0 1px 0 @secondary + #111;
    color: @secondarytext;
    .darkorlighttextshadow( @secondarytext );
    border: 1px solid darken( @secondary, 20 );
    .vertical_gradient( @secondary, darken( @secondary, 10 ) );
    white-space: nowrap;
    display: inline-block;

    -webkit-box-shadow:
    inset 0 -1px 0 rgba(0,0,0,0.075),
    inset 0 1px 0 rgba(255,255,255,0.3),
    0 1px 2px rgba(0,0,0,0.1);
    -moz-box-shadow:
    inset 0 -1px 0 rgba(0,0,0,0.075),
    inset 0 1px 0 rgba(255,255,255,0.3),
    0 1px 2px rgba(0,0,0,0.1);
    box-shadow:
    inset 0 -1px 0 rgba(0,0,0,0.075),
    inset 0 1px 0 rgba(255,255,255,0.3),
    0 1px 2px rgba(0,0,0,0.1);

    &.loading {
    color: lighten( @secondarytext, 10 );
    border: 1px solid @secondary;

    &:before {
    content: “”;
    position:absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    background: url(../images/ajax-loader.gif) center no-repeat rgba(255,255,255,0.65);
    }
    }

    &.added {
    &:before {
    content: “”;
    position:absolute;
    height: 16px;
    width: 16px;
    top: 0.35em;
    right: -26px;
    text-indent: 0;
    background: url(../images/success.png) no-repeat;
    }
    }

    &:hover {
    .vertical_gradient( @secondary, darken( @secondary, 15 ) );
    text-decoration:none;
    }

    &:active {
    top: 1px;
    }

    &.alt {
    .vertical_gradient( @primary, darken( @primary, 10 ) );
    border-color: darken(@primary, 20);
    color: @primarytext;
    .darkorlighttextshadow( @primarytext, 0.6 );

    &:hover {
    .vertical_gradient( @primary, darken( @primary, 15 ) );
    color:@primarytext + #111;
    .darkorlighttextshadow( @primarytext + #111, 0.6 );
    }
    }
    }

    .cart .button, .cart input.button {
    float:none;
    }

    a.added_to_cart {
    padding-top: .5em;
    white-space: nowrap;
    display: inline-block;
    }`

    Here is a link to a post I started on the WooCommerce forum which gives some more info about how I am working around this conflict at the moment, whilst still trying to get a fix –
    http://wordpress.org/support/rss/topic/woocommerce-205-cart-button-colours-not-workinbg-on-ie89

    Many thanks for any help and I hope it helps some others too.

Viewing 4 replies - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.