Return to previous page

Styling improvements, buttons, colors, products

This topic has 10 replies, 4 voices, and was last updated 8 years, 8 months ago ago by Robert Hall

Aivarsv

Participant

March 31, 2016 at 16:04

Hi,

I have a few improvements to make in product pages where your help would be appreciated:

(1) When moving cursor over the product image, grey area enters from the bottom. Normally there are Add to Wishlist and Quick View buttons but I disabled them. Is it possible to get rid of the grey area

(2) Is it possible to adjust the font color of the content (currently grey), which is tabs: Description, Extra info, etc. Preferably it would be the same black as the product short description

(3) Most of my products have a short name but there are some with a longer name. It results in misalignment in shop product view – ADD TO CART buttons do not appear on the same line. Is there a way to define that the product title always takes up 3 lines? The images are all the same size, the issue is only due to varying Name length

(4) Pagination buttons in product pages. The current selection is all black, it is not changing when moving over the cursor. The same issue with the Filter button in sidebar.

(5) How can I set different color for the buttons Add to Cart?

Thank you for the answers!

#119592 Copied Theme version: 2.6 WooCommerce version: 2.5.5

9 Answers
Eva Kemp

Support staff

March 31, 2016 at 18:26
Hello,

1. Please add this code in Theme Options > Custom CSS > Global Custom CSS:
```
.footer-product {
   display: none;
}
```
2. Use this css code:
```
.tabs .tab-content p {
   color: black;
}
```
3. Please try to use this css code in Theme Options > Custom CSS > Custom CSS for desktop:
```
.products-grid .product-title {
  height: 50px;
}
```
4. Add this code in Global Custom CSS:
```
.pagination-cubic li span.page-numbers.current, .price_slider_wrapper .price_slider_amount button {
  color: #FFF !important;
}
```
5. Use the following code in Global Custom CSS:
```
.etheme_add_to_cart_button.product_type_simple {
    color: red;
    background-color: black;
}
```
Write your color values.

Regards,
Eva Kemp.
#119613 Copied
Aivarsv

Participant

March 31, 2016 at 20:58

Thank you for the quick answer, it was very helpful.
I have few small follow up questions:
(1) I changed also the color of Add to Cart in the single product page single_add_to_cart_button. What should I do to change the hover effect for it (now the color is the same as the hover color). I added a line
.single-product .single_add_to_cart_button:hover {
background-color:white;
color:#a2b816;
}
but it does not change anything

(2) I found that the Buy button in Cart page is Black with Black font. What should I do to recolor it? The same issue as (4) before

(3) Can I do the same product alignment for the Up-sell products in single product page (Our offers) as just done for the product page (question 3 before)

(4) Lastly, can I decrease the font size for the shop sidebar? To make text smaller, especially categories. Ideally, would be to show main categories and sub categories in different sizes. But the main need is to make sidebar texts visually smaller

Thank you!

#119625 Copied Theme version: 2.6 WooCommerce version: 2.5.5
Eva Kemp

Support staff

April 1, 2016 at 08:09
Hello,

1. Please use this code instead of yours:
```
.product-information .cart button[type="submit"]:hover {
  background-color:white;
  color:#a2b816;
}
```
2. Add this css code:
```
.cart-collaterals .checkout-button {
   color: white;
}
```
3. Use the following code:
```
.product-title {
   height: 50px;
}
```
4. Please use this code and change font size values to yours:
```
.product-categories > li > a {
    font-size: 10px !important;
}
.product-categories > li > ul.children li > a {
    font-size: 10px !important;
}
```
Regards,
Eva Kemp.
#119650 Copied
Aivarsv

Participant

April 1, 2016 at 09:33

Thank you, I updated the code but the hover effect still does not work.

The sidebar text size did not change, unfortunately.

If you could help to fine-tune those, it would be great.

#119667 Copied Theme version: 2.6 WooCommerce version: 2.5.5

Jack Richardson

Support staff

April 1, 2016 at 09:45

Hello,

Please provide us with WP Dashboard credentials in private content.

Best regards,
Jack Richardson.

#119670 Copied

Aivarsv

Participant

April 1, 2016 at 09:47

Please see the private content.

Please, contact administrator
for this information.

#119671 Copied Theme version: 2.6 WooCommerce version: 2.5.5

Eva Kemp

Support staff

April 1, 2016 at 10:41

Hello,

There were errors in the code when you pasted it to Custom CSS.
I’ve edited them.
Check your site now.

Regards,
Eva Kemp.

#119682 Copied

Aivarsv

Participant

April 8, 2016 at 08:15

Thank you, it is solved now

#120423 Copied

Robert Hall

Support staff

April 8, 2016 at 08:27

Hello,

You’re welcome!

Regards,
Robert Hall

#120424 Copied
Tagged: buttons, colors, improvements, products, styling, themes, woocommerce, wordpress
Viewing 10 results - 1 through 10 (of 10 total)

The issue related to '‘Styling improvements, buttons, colors, products’' has been successfully resolved, and the topic is now closed for further responses

Styling improvements, buttons, colors, products

Recent Topics

Helpful Topics

Useful links WooCommerce & WordPress

Browse by popular tags:

Explore our best WordPress WooCommerce Themes collection