WooCommerce product image button color, text and disabling

artandmi · February 2017

Hello!

I have a question about buttons that appear by default over a product image.

http://themes.muffingroup.com/be/herbal/shop/

If I put my mouse over a product image I can see two buttons (icons) of golden color:

- How do I change the color of the buttons in Woocommerce? In the whole theme?

- How can I delete one of the icons? I found how to hide the cart icon within setting but what about "product page" link icon?

- How do I edit the icon and text? Can I add more text? For example, instead of cart icon I want "Cart" and instead of link icon I want "Product" text. How can I do it?

Albert · February 2017

Hi,

1. To change buttons color, please use:

.woocommerce ul.products li.product .image_links.double a { color: #000; background: #FFF; }
.woocommerce ul.products li.product .image_links.double a:hover { color: #FFF !important; background: #000 !important; }

2. To remove link icon, you need to use:

.woocommerce ul.products li.product .image_links.double a.link { display: none !important; }
.woocommerce .image_frame .image_wrapper .image_links.double {
    margin-left: -30px;
    width: 60px;
}
.woocommerce ul.products li.product a.link { display: none !important; }
.woocommerce ul.products li.product a.add_to_cart_button {
    width: 100%;
}

3. This requires files customization and couldn't be achieved with custom css unfortunately.

artandmi · February 2017

2. To remove link icon, you need to use:

-> Slide bottom option doesn't work correctly when using this CSS

Albert · February 2017

2. What exactly does not work? We checked above css and we didn't noticed anything wrong. Please paste it onto your site then and let us know so we can check what's happening.

artandmi · February 2017

Please, follow the way I describe below so you can find out what I am talking about:

a. BeTheme options -> Custom CSS & JS -> Insert the CSS code to remove the link icon -> Save the change

b. BeTheme options -> Global settings -> Image frame-> Change from "Overlay" to "Slide bottom"

c. See the Shop page (remaining cart button is distorted"

Albert · February 2017

We tested it on our end and it works, so please send us link to page where you used above css and it does not work so we can check.

WooCommerce product image button color, text and disabling

Comments