WooCommerce product image button color, text and disabling

artandmi

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

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.

Learn more: Video Tutorials | How To | FAQ Vote on what comes next

artandmi

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

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

Albert

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.

Learn more: Video Tutorials | How To | FAQ Vote on what comes next

artandmi

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

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.

Learn more: Video Tutorials | How To | FAQ Vote on what comes next