Return to previous page

Cart page CSS tweaks - by talonhead - on WordPress WooCommerce support

This topic has 18 replies, 2 voices, and was last updated 8 years, 5 months ago ago by Jack Richardson

talonhead

Participant

June 9, 2016 at 09:48

Can I start a thread on a bunch of little tweaks I need done to my cart page please?

#129007 Copied

17 Answers

Jack Richardson

Support staff

June 9, 2016 at 09:51

Hello,

If your queries requires additional customization in php files we recommend you to order the customization via the form https://www.8theme.com/customization-services/ . If you need only styles changes you can post them here.

Best regards,
Jack Richardson.

#129009 Copied

talonhead

Participant

June 9, 2016 at 10:13

They are just like any other style change you have done for me in the past. There are just a lot of them…and I didn’t want to wear out my welcome.

Column titles need to be changed (font and color)
Product description color changed (hover over is GOOD)
“Remove from Cart” “X” hover color needs to be changed
All buttons (aside from “Proceed to Checkout”) needs radiused corners
All buttons stylings need to be changed to match all other buttons on site
“Apply Coupon” button needs to be aligned and padded nicely with “Coupon Code” field
Thumbnails in cart need to be like all the other thumbnails on the shop page (not hard cropped)
Maybe something can be done where the Paypal button “Paypal Checkout”? The text “safer way to pay” is really annoying on my background.

That’s about it so far. If you can tell me how to do these things, that would be superb. Any more clarification, just let me know.

Please, contact administrator
for this information.

#129015 Copied
Jack Richardson

Support staff

June 9, 2016 at 11:29
Hello,

1. Use this css code:
```
table.shop_table thead tr th {
    font-size: 14px;
    font-family: Georgia;
    color: white;
}
```
Change values to yours.

2. Use this code:
```
table.shop_table td.product-details a {
  color: white;
}
```
3. Add the following code in Global Custom CSS:
```
table.shop_table td.product-remove a.btn.remove-item:hover {
   border-color: #CBCBCB;
   color: #c6c6c6;
}
```
4. Use the following code:
```
.checkout_coupon input[type=submit], .actions input[type="submit"].btn.gray {
   border-radius: 5px;
}
```
5. As I see buttons styling is the same, just add radius code.

6. Use this code:
```
.coupon input[type="text"] {
  width: 220px;
}
```
7. Disable “Hard Crop” option for “Product Thumbnails” in Woocommerce > Settings > Products > Display.

8. This is PayPal image https://www.paypal.com/en_US/i/btn/btn_xpressCheckout.gif , you can only edit it with Photoshop.

Best regards,
Jack Richardson.
#129027 Copied
talonhead

Participant

June 9, 2016 at 14:25

If I have my own Paypal image to use that has been Photoshopped, how is it integrated into the site?

All button stylings on the cart page are not the same as the rest of the site.

The text color needs to change to *I think* #c6c6c6 on hover for all buttons on the page. I think that will fix it.

Please also look at the search button in the right sidebar on the cart page. The button colors for both static and hover are incorrect.

Doing great Jack! Mahalo.

Please, contact administrator
for this information.

#129055 Copied
Jack Richardson

Support staff

June 9, 2016 at 16:15
Hello,

The image is loading from the plugin “Paypal for Woocommerce”, you need reupload image in the files of this plugin.

As for the buttons please use this code:
```
.btn.big:hover, .actions input[type="submit"].btn.gray:hover {
    color: #c6c6c6;
}
```
Use this code for search button:
```
.sidebar-widget.widget_search .form-group button:hover {
  background-color: #353535;
  color: #c6c6c6;
}
.sidebar-widget.widget_search .form-group button {
  background-color: #c6c6c6;
  color: #000000;
}
```
Best regards,
Jack Richardson.
#129083 Copied
talonhead

Participant

June 9, 2016 at 16:20

“Proceed to Checkout” button text color correction?
Search button radiused?

#129088 Copied
Jack Richardson

Support staff

June 9, 2016 at 16:47
Hello,

Please use this css code:
```
.bag-total-table .checkout-button:hover {
  color: #c6c6c6;
}

.sidebar-widget.widget_search .form-group button {
   border-radius: 5px;
}
```
Best regards,
Jack Richardson.
#129100 Copied
talonhead

Participant

June 10, 2016 at 09:23

I’ve got a better Paypal logo on the page now. What is the code to bring the blue Paypal Credit button down a bit from the Paypal Express button? See attached. You’ll notice is rather tight between the two.

Please, contact administrator
for this information.

#129165 Copied
Jack Richardson

Support staff

June 10, 2016 at 10:55
Hello,

Add the following code in Global Custom CSS:
```
#paypal_ec_paypal_credit_button {
   padding-top: 20px;
}
```
Best regards,
Jack Richardson.
#129169 Copied
talonhead

Participant

June 10, 2016 at 15:34

Great. I think a few other things:

If an item is removed, a banner pops up (as it should). How to change the color of the banner…as well as the “undo”? Hover seems fine though.See attached.

When also clicking “calculate shipping”, the popup that appears has a button (update totals) that doesn’t match my site’s styling. See attached #2.

Please, contact administrator
for this information.

#129196 Copied
Jack Richardson

Support staff

June 10, 2016 at 18:10
Hello,

Use the following code and change color values to yours:
```
.woocommerce-message {
    background-color: #dff0d8;
    border-color: #d6e9c6;
}
button, .button {
  background-color: #c6c6c6;
}
```
Best regards,
Jack Richardson.
#129211 Copied
talonhead

Participant

June 11, 2016 at 10:12

And to change the font color inside that message banner? Right now it’s #767676. Also the hover color (since my banner color now is red hued).

#129240 Copied

Jack Richardson

Support staff

June 13, 2016 at 10:35

Hello,

Please show on a screenshot what font you want to change.

Thank you.

Best regards,
Jack Richardson.

#129316 Copied

talonhead

Participant

June 13, 2016 at 10:38

Screen shot is the #7676 color text as well as the “Undo” link.

Please, contact administrator
for this information.

#129320 Copied
Jack Richardson

Support staff

June 13, 2016 at 10:49
Hello,

Please add the following code in Global Custom CSS:
```
.woocommerce-message {
  color: #e3e3e3;
}
.woocommerce-message a:hover {
  color: #e3e3e3;
}
```
Best regards,
Jack Richardson.
#129328 Copied
talonhead

Participant

June 13, 2016 at 10:59

Nice! I think that’s all I need for now on that page. Many many thanks for all of your efforts Jack! One of these days, I’ll just figure out where in the inspector and how to make my own changes in CSS.

Close it up.

Please, contact administrator
for this information.

#129332 Copied

Jack Richardson

Support staff

June 13, 2016 at 12:38

Hello,

You’re welcome.

Best regards,
Jack Richardson.

#129346 Copied
Viewing 18 results - 1 through 18 (of 18 total)