Home Forums WoodMart support forum Product variations on shop pages

Product variations on shop pages

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #43754

    Andrew Forest
    Participant

    Hi there! A while back I’ve seen you recommending the Show single variations plugin by Iconic on one of your forum posts. Today I decided to give it a try and it seems to work exactly as I wanted. Almost. Please check the link I’ve sent you, I can’t find a way to make the add to cart button for the varations look like the others, and also the discount label is displaying “SALE” instead of the percentage. Could you please take a look?
    Thank you. ๐Ÿ™‚

    #43837

    Artem Temos
    Keymaster

    Hi,

    It is not possible to achieve the same button style since this plugin overrides our theme’s button HTML code. And the “SALE” badge is not fully compatible and for some products, percantage is not applied. Here is a code to make the button look better

    .woodmart-hover-standard .btn-add .jck_wssv_add_to_cart {
          padding: 6px 25px;
       font-size: 12px;
       line-height: 16px;
       -webkit-transition: padding .25s ease, color .25s ease,background-color .25s ease,border-color .25s ease,box-shadow .25s ease,opacity .25s ease;
       -webkit-transition: padding .25s ease, color .25s ease,background-color .25s ease,border-color .25s ease,opacity .25s ease,-webkit-box-shadow .25s ease;
       transition: padding .25s ease, color .25s ease,background-color .25s ease,border-color .25s ease,opacity .25s ease,-webkit-box-shadow .25s ease;
       transition: padding .25s ease, color .25s ease,background-color .25s ease,border-color .25s ease,box-shadow .25s ease,opacity .25s ease;
       transition: padding .25s ease, color .25s ease,background-color .25s ease,border-color .25s ease,box-shadow .25s ease,opacity .25s ease,-webkit-box-shadow .25s ease;
    }
    
    .woodmart-hover-standard .btn-add .jck_wssv_add_to_cart.loading {
        padding: 6px 35px 6px 15px;
    }
    
    .woodmart-hover-standard .btn-add .jck_wssv_add_to_cart:before {
        content:none;
    }    
    
    .woodmart-hover-standard .btn-add .jck_wssv_add_to_cart:after {
        left:auto;
        right:10px;
    }

    Regards

    #43882

    Andrew Forest
    Participant

    Thank you so much for the code, it helped a lot. ๐Ÿ™‚ Do you know any better ways to display the variations like this and hide the parent product? without creating separate products for every color.

    #43899

    Artem Temos
    Keymaster

    Sorry, but we don’t know other solution to this task.

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