Product variations on shop pages

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. 🙂

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

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.

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

[Author]

Posts