Return to previous page

Checkout Page Tweaks - by talonhead - on WordPress WooCommerce support

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

talonhead

Participant

June 15, 2016 at 09:22

Thanks Jack. But that made all content in the table bold…not just the product title bold. See attached. If I decide to keep product variables listed, that could be a problem.

However, the code to remove all variables from each product works fine.

Please, contact administrator
for this information.

#129674 Copied
Jack Richardson

Support staff

June 15, 2016 at 09:35
Hello,

Please also use this code:
```
.order-review .cart_item .variation {
 font-weight: normal;
}
```
Best regards,
Jack Richardson.
#129684 Copied
talonhead

Participant

June 15, 2016 at 09:55

That works. Thank you thank you!

Now let me get a bit more detailed in that area.

See private content.

Please, contact administrator
for this information.

#129693 Copied

Jack Richardson

Support staff

June 15, 2016 at 10:28

Hello,

This is due to text width of your variables.
It can’t be modified via css.

Unfortunately it can’t be copied for those three variables listed above.

Sorry.

Best regards,
Jack Richardson.

#129710 Copied

talonhead

Participant

June 15, 2016 at 10:31

Can you explain what “text width of your variables” exactly mean? Don’t know why some are good…and some are bad.

Try to help me understand.

#129711 Copied

talonhead

Participant

June 15, 2016 at 10:58

Also you mentioned this above:
This image http://prntscr.com/bg0e7h is added as breadcrumbs background in Theme Options > General > Header Settings > Breadcrumbs Style > Background large, and upload image in “Breadcrumbs background” section.

I guess I didn’t get this when you first typed it…but now I do.

What I was looking for was using a different header image JUST for the Cart and Checkout pages. What to do?

#129724 Copied

Jack Richardson

Support staff

June 15, 2016 at 12:01

Hello,

Please compare “Block” variation http://storage3.static.itmages.com/i/16/0615/h_1465988377_7817817_d6ba641586.jpeg and “CRYO Processing of Assembly” http://storage8.static.itmages.com/i/16/0615/h_1465988452_8461917_005ff1b31b.jpeg .
As you can see text width is different and variations are displayed in one line for the whole width of the column.

Best regards,
Jack Richardson.

#129726 Copied

talonhead

Participant

June 15, 2016 at 14:17

I see. So the width of the block CANNOT be changed with CSS?

#129747 Copied
Jack Richardson

Support staff

June 15, 2016 at 17:00
Hello,

You may try to use this css code:
```
.order-review .cart_item .variation dt {
   width: 50%;
}
```
Best regards,
Jack Richardson.
#129782 Copied
talonhead

Participant

June 15, 2016 at 17:11

It isn’t perfect, but livable. Thanks for the tip.

Take the BOLD off the total?

#129787 Copied
Jack Richardson

Support staff

June 15, 2016 at 18:01
Hello,

You have this code in Custom CSS:
```
.order-review .order-total .amount {
    font-size: 24px;
    font-weight: bold !important;
}
```
Remove font-weight.

Best regards,
Jack Richardson.
#129814 Copied
talonhead

Participant

June 15, 2016 at 22:15

Hmm…that’s odd. The total didn’t get bold until I added this recent code change:

table.shop_table td.product-name {
font-weight: bold;
}

Oh well…fixed now.

The text color in ALL input fields (on both Cart and Checkout) needs to be black.

#129839 Copied
Jack Richardson

Support staff

June 16, 2016 at 09:11
Hello,

Please use this css code:
```
input[type="text"] {
  color: black;
}
```
Best regards,
Jack Richardson.
#129862 Copied
talonhead

Participant

June 16, 2016 at 09:32

Great! Every time the Checkout page loads, it puts an overlay momentarily over the Your Order column. Can you tell me why that would be? See screenshot.

Please, contact administrator
for this information.

#129866 Copied

talonhead

Participant

June 16, 2016 at 09:53

On mobile, it has small issue.

Please look at screenshot to fix.

Please, contact administrator
for this information.

#129873 Copied

talonhead

Participant

June 16, 2016 at 09:54

Also, “additional info” needs to index left. See screenshot.

Please, contact administrator
for this information.

#129875 Copied
Jack Richardson

Support staff

June 16, 2016 at 13:53
Hello,

The overlay is a part of Woocommerce function.

As for “Additional Info” block add this code in Custom CSS for desktop:
```
.woocommerce .col2-set .col-2, .woocommerce-page .col2-set .col-2 {
    width: 100%;
}
```
And add this code in Custom CSS for mobile:
```
.woocommerce .col-lg-5.col-md-5 {
    display: inline-block;
}
```
Best regards,
Jack Richardson.
#129926 Copied
talonhead

Participant

June 16, 2016 at 14:21

Great! We’re almost there!

Can we get “additional info” input box to be same width as the fields above it? See screenshot.

Please, contact administrator
for this information.

#129947 Copied
Jack Richardson

Support staff

June 16, 2016 at 14:27
Hello,

In this case remove the code:
```
.woocommerce .col2-set .col-2, .woocommerce-page .col2-set .col-2 {
    width: 100%;
}
```
and add this one:
```
.woocommerce .col2-set .col-2, .woocommerce-page .col2-set .col-2 {
    float: left;
}
```
Best regards,
Jack Richardson.
#129951 Copied
talonhead

Participant

June 16, 2016 at 14:45

Worked just fine. Thanks!

What makes the “g” get clipped at the bottom in this screenshot?

Please, contact administrator
for this information.

#129964 Copied

talonhead

Participant

June 16, 2016 at 15:20

Sorry to revert back to the “cart” page, but the subtotal block needs to be wider? All the way over to the edge of the uppermost line? See screenshot.

Please, contact administrator
for this information.

#129972 Copied
Jack Richardson

Support staff

June 16, 2016 at 19:44
Hello,

Use this code in Global Custom CSS:
```
.woocommerce-cart .cart-collaterals .cart_totals table {
    width: 100%;
}
```
What browser are you checking this form in http://prntscr.com/bh44i7 ?
I don’t see such issue:
http://storage9.static.itmages.com/i/16/0616/h_1466102692_1703183_6692e551dc.jpeg

Best regards,
Jack Richardson.
#130010 Copied
talonhead

Participant

June 17, 2016 at 11:03

Thanks Jack! That fixed the column width.

On the “g” getting clipped, I was checking in FF…but after I restarted it and opened the page back up, the “G” was fine. Go figure. You saw the screenshot though. It *did* clip it for some reason.

I guess the only few thing left I can think of on this page is the “Country” field needs radiused corners to match everything else on the site? See screenshot.

Also, “sign me up for the newsletter aligned left? http://prntscr.com/bhgwfe

Oh and BTW…you had mentioned earlier to add an image in the breadcrumbs is how the background was achieved on the Classico Cart and Checkout pages.

How does that work if I want a different image to show only on those pages instead of the entire site? As you know, I currently have a header background image used on the entire site except the Home page.

Thoughts on that?

Please, contact administrator
for this information.

#130079 Copied
Jack Richardson

Support staff

June 17, 2016 at 12:29
Hello,

Please use this code in Global Custom CSS:
```
.select2-container .select2-choice {
   border-radius: 5px !important;
}
```
Could you clarify the query regarding “sign me up for the newsletter aligned left”?
As I see it’s left aligned http://storage4.static.itmages.com/i/16/0617/h_1466162496_2169549_8710b480f0.jpeg . What do you want to achieve?

Unfortunately there is no option to set different breadcrumbs image for custom pages.

Best regards,
Jack Richardson.
#130097 Copied
talonhead

Participant

June 17, 2016 at 13:00

It’s not aligned at my end. http://prntscr.com/bhi39z

I understand no option to set different breadcrumbs image for custom pages. Just out of curiosity how is Classico’s home page different? in fact, it doesn’t even have an image header or breadcrumb…just a slider at the top. http://prntscr.com/bhi4py

#130108 Copied

Jack Richardson

Support staff

June 17, 2016 at 14:08

Hello,

Slider is added via option “Show revolution slider instead of breadcrumbs and page title” in home page editor.

Please provide correct WP admin credentials in Private Content.
Do you see this alignment http://prntscr.com/bhi39z being logged in or as a guest?

Best regards,
Jack Richardson.

#130113 Copied

talonhead

Participant

June 17, 2016 at 14:48

I see it logged in Jack.

Please, contact administrator
for this information.

#130120 Copied
Jack Richardson

Support staff

June 17, 2016 at 18:20
Hello,

Add the following css code in Custom CSS for Desktop section:
```
.mc4wp-checkbox.mc4wp-checkbox-woocommerce {
   width: 50%;
}
```
Best regards,
Jack Richardson.
#130134 Copied
talonhead

Participant

June 17, 2016 at 20:44

Great! That pretty much does it Jack. Always a pleasure! Close this up.

#130149 Copied

Jack Richardson

Support staff

June 18, 2016 at 07:12

Hello,

You’re welcome.

Best regards,
Jack Richardson.

#130163 Copied
1 2

Viewing 60 results - 31 through 60 (of 60 total)