diff --git a/addons/website_sale/static/src/css/website_sale.css b/addons/website_sale/static/src/css/website_sale.css
index 78e50abf1d0..ca422d8dce4 100644
--- a/addons/website_sale/static/src/css/website_sale.css
+++ b/addons/website_sale/static/src/css/website_sale.css
@@ -1,4 +1,12 @@
-.thumbnail.disabled {
+.thumbnail.disabled :not(.css_unpublish):not(.css_publish) {
     opacity: 0.5;
-    background: #eee;
+}
+.thumbnail > .css_unpublish, .thumbnail > .css_publish {
+    position: absolute;
+    right: -6px;
+    top: -10px;
+    display: none;
+}
+.thumbnail:hover > .css_unpublish, .thumbnail:hover > .css_publish {
+    display: block;
 }
\ No newline at end of file
diff --git a/addons/website_sale/static/src/js/website_sale.js b/addons/website_sale/static/src/js/website_sale.js
index cf517314abe..ca4c250f91a 100644
--- a/addons/website_sale/static/src/js/website_sale.js
+++ b/addons/website_sale/static/src/js/website_sale.js
@@ -13,8 +13,13 @@ $(document).ready(function () {
     
     $payment = $(".oe_website_sale .js_payment");
     $("input[name='payment_type']", $payment).click(function (ev) {
-        var payment_id = $(ev.target).val();
+        var payment_id = $(ev.currentTarget).val();
         $("div[data-id]", $payment).addClass("hidden");
         $("a.btn:last, div[data-id='"+payment_id+"']", $payment).removeClass("hidden");
     });
+
+    // change for css
+    $(document).on('mouseup', '.js_publish', function (ev) {
+        $(ev.currentTarget).parents(".thumbnail").toggleClass("disabled");
+    });
 });
diff --git a/addons/website_sale/views/website_sale.xml b/addons/website_sale/views/website_sale.xml
index dbdfe98df46..057dbb58143 100644
--- a/addons/website_sale/views/website_sale.xml
+++ b/addons/website_sale/views/website_sale.xml
@@ -111,6 +111,7 @@
                 <div class='row grid grid-align-top'>
                     <t t-foreach="products" t-as="product">
                     <div t-attf-class="col-md-2 mb16 thumbnail text-center #{not product.website_published and 'disabled' or ''}" style="width: 170px; margin-left: 16px;">
+                        <t t-call="website.publish"><t t-set="object" t-value="product"/></t>
                         <a t-attf-href="/shop/product/#{ product.id }/?#{ search and ('search=%s' % search) or ''}#{ category_id and ('&amp;category_id=%s' % category_id) or ''}">
                             <h5  t-field="product.name"> </h5>
                             <img class="img-rounded" t-att-src="product.img('image_small')"/>
@@ -124,7 +125,7 @@
                                 <b><t t-esc="product.product_variant_ids[0].price" /> €</b>
                             </div>
                             <div class="mb8 mt8">
-                                <a t-if="product.website_published" t-attf-href="./add_cart/?product_id=#{ product.id }" class="btn btn-default btn-sm btn-success">Add to cart</a>
+                                <a t-attf-href="./add_cart/?product_id=#{ product.id }" class="btn btn-default btn-sm btn-success">Add to cart</a>
                             </div>
                         </div>
                     </div>