"Select options" button in Quark Ecommerce Theme

Hi.

I have a color attribute option on my shop page. Is there a way to combine that color attribute with "Select option' button?
Something like when the user goes over the product, a "Select option" button (which I would like to rename to "Pick your color") appears. And when a user picks a color, "Add to cart" button appears!?!

Plus, the button has some weird behavior when hovered. I just need a green background that turns to black on hover.

URL: http://lishinu.bordomat.com/?post_type=product

Thanks.

Hi,

Unfortunately this kind of feature requires modifications which are beyond our technical support.

Regarding the background color (add to cart) - please add the following custom css:

Code: Select all

.archive.woocommerce ul.products li.product .add_to_cart_button:active,
.archive.woocommerce ul.products li.product .add_to_cart_button:focus,
.archive.woocommerce ul.products li.product .add_to_cart_button:hover,
.related ul.products li.product > .add_to_cart_button:hover,
.upsells.products ul.products li.product > .add_to_cart_button:hover,
.woocommerce > ul.products li.product > .add_to_cart_button:hover {
    background: #333!important
}


Hi,

Unfortunately it's still not working for me. I get the green border and green text color. My code looks like this:

Code: Select all

.archive.woocommerce ul.products li.product .add_to_cart_button,
.related ul.products li.product > .add_to_cart_button,
.upsells.products ul.products li.product > .add_to_cart_button,
.woocommerce > ul.products li.product > .add_to_cart_button {
bottom: 0 !important;
padding: 0 25px !important;
background: #95d545 !important;
border: 2px solid #95d545!important;
color: #fff !important;
}

.archive.woocommerce ul.products li.product:hover .add_to_cart_button,
.related ul.products li.product:hover > .add_to_cart_button,
.upsells.products ul.products li.product:hover > .add_to_cart_button,
.woocommerce > ul.products li.product:hover > .add_to_cart_button   {
bottom: 0px !important;
background: #95d545 !important;
border: 2px solid #95d545!important;
color: #fff !important;
}

.archive.woocommerce ul.products li.product .add_to_cart_button:active,
.archive.woocommerce ul.products li.product .add_to_cart_button:focus,
.archive.woocommerce ul.products li.product .add_to_cart_button:hover,
.related ul.products li.product > .add_to_cart_button:hover,
.upsells.products ul.products li.product > .add_to_cart_button:hover,
.woocommerce > ul.products li.product > .add_to_cart_button:hover {
background: #363636 !important;
border: 2px solid #363636 !important;
color: #fff !important;
}

URL: http://lishinu.bordomat.com/?post_type=product

Thanks.

M

In your previous post your wrote that you want to change the background only - for text and border add also the following css properties:

Code: Select all

border-color: #333!important;
 color: #fff!important;



This is my code. The problem is that is not overriding the existing.

.archive.woocommerce ul.products li.product .add_to_cart_button:active,
.archive.woocommerce ul.products li.product .add_to_cart_button:focus,
.archive.woocommerce ul.products li.product .add_to_cart_button:hover,
.related ul.products li.product > .add_to_cart_button:hover,
.upsells.products ul.products li.product > .add_to_cart_button:hover,
.woocommerce > ul.products li.product > .add_to_cart_button:hover {
background: #363636 !important;
border: 2px solid #363636 !important;
color: #fff !important;
bottom: 0px !important;
}

Please change your code into:

Code: Select all

.archive.woocommerce #gk-bg ul.products li.product .add_to_cart_button:active,
.archive.woocommerce #gk-bg ul.products li.product .add_to_cart_button:focus,
.archive.woocommerce #gk-bg ul.products li.product .add_to_cart_button:hover,
#gk-bg .related ul.products li.product > .add_to_cart_button:hover,
#gk-bg .upsells.products ul.products li.product > .add_to_cart_button:hover,
#gk-bg .woocommerce > ul.products li.product > .add_to_cart_button:hover {
background: #363636 !important;
border-color: #363636 !important;
color: #fff !important;
bottom: 0px !important;
}


Thank you.

M