Change Quick Buy Button to Image

Try,

.wc_quick_buy_btn {
background-image: url('https://secure.gravatar.com/avatar/0f05f9ab11b34b58d481e2f3c2df1091?s=48&r=g&d=monsterid') no-repeat;
border: 0;
}

Thanks for your reply,

I tried it, but it just removed the button and is only text without border. it seems that background-image doesn’t apply.

Finally found it!

.wc_quick_buy_btn {
background-image: url(https://visualmeditation.co/wp-content/uploads/2015/04/60-days-money-back-guaranteed.png);
background-repeat: no-repeat;
/*background-position: 50% 50%;*/
/* put the height and width of your image here */
height: 300px;
width: 200px;
border: none;
}

Thanx for your support, appreciated.

Hello,

At the recent update, the image is gone and now i take a blank button.

What should I do?

Thanks.

@papgeo

Kindly update the settings once.. and check. as we have done some changes in settings framework.

Varun, PLEASE explain. What settings do we need to update? to what values?

@autobooks.

Kindly update all settings under WooCommerce => Quick Buy

Yes, i found the new setting in WooCommerce => WC Quick Buy and i did the following…

I have quick_buy_button where it says “Button CSS Class” and

.wc_quick_buy_btn {
background-image: url(https://www.com/uploads/image.png);
background-repeat: no-repeat;
background-color: #FFFFFF;
/*background-position: 50% 50%;*/
height: 146px;
width: 380px;
border: none;
/*float: initial;*/
/* the following are for centering */
margin-left: auto;
margin-right: auto;
display: block;
}

wc_quick_buy_btn:hover {}

where it says “Button Internal Style”

I still getting the same… a blank button, No image.

Am I doing something wrong?

Thanks in advance.

change “.wc_quick_buy_btn” with “.wc_quick_buy_button” without quotes.
worked for me

Hello and thanks for your reply.

I tried it but instead of the image, it shows a blud dot :/

hi Varun, I am having the same problem. Please help.

Screenshot of the settings page: https://gharbazar.pk/wp-content/uploads/2014/01/buy-now.jpg

This is the css I am trying to add:
.wc_quick_buy_button {
background-image: url(https://gharbazar.pk/wp-content/uploads/2014/01/red-buy-now.jpg); !important
background-repeat: no-repeat;
background-color: #FFFFFF;
/*background-position: 50% 50%;*/
height: 146px;
width: 380px;
}

Website Link: https://gharbazar.pk

Solution found:

.wc_quick_buy_button {
background: transparent url(https://yoursite.com/wp-content/uploads/2016/10/buy-now-button.png);
!important;
background-repeat: no-repeat;
height: 150px;
width: 100px;
margin-left: auto;
margin-right: auto;
display: block;
border: none;
color: transparent;
}

The IMPORTANT is the Button Label: Write a big string and automatically the width of the button becomes larger.