Woocommerce oversized fields issue

[rad]

Hi there,

1. Ah, it sounds like it’s happening in all woocommerce pages, in that case, let’s make the CSS more global. Please change this CSS,

.woocommerce-checkout .backstretch img {
visibility: hidden;
}
.woocommerce-checkout .backstretch {
background: #fff;
}

to this

body.woocommerce-page .backstretch img {
visibility: hidden;
}
body.woocommerce-page .backstretch {
background: #fff;
}

2. The cause of this issue is your existing custom CSS,

.woocommerce .cart .actions .coupon input[type="text"] {
width: 350px;
float: left; 
margin-right: 20px;
}

If it’s intended for desktop then it should be like this

@media ( min-width: 980px ) {
.woocommerce .cart .actions .coupon input[type="text"] {
width: 350px;
float: left; 
margin-right: 20px;
}
}

Thanks!

[mtsuser]

@Rad Very nice! This fixed both of those issues.

But, caused the original float issue to come back up on the cart page with the coupon code field and update cart button to be all mixed up. Alright, for this, all I need is to have the apply coupon and coupon code field to be next to one another. Basically, just swap places with the update cart button.

Or, just hide the apply coupon button and coupon code field altogether and have the update field button by itself on the right hand side, as there is the option to input coupons on the final page already as it is. And then that’s all for this issue.
I have an imaged attached in the secure note so show you what I see and what I mean. The easiest would just be to hide the extra button and coupon field. Thanks again.

[rad]

Hi there,

Please remove that CSS, it causes too many issues due to the structure. The coupon button is on different rows grouped along with the update button. That’s why it’s not working. Please replace it with this

@media ( min-width: 980px ) {
.woocommerce .cart .actions .coupon {
    max-width: 350px;
    float: right;
}
}

It’s the best output, you can’t move the button after the input field since the buttons are grouped together.

Thanks!

[mtsuser]

@Rad Thanks for the update. Hmm, that didn’t work. It undoes the footer fix and background fix when I update with that css. Switching it back fixed it back to normal.

The easiest way would just to hide the coupon button and field on the cart page. Can we do that? Thank you.
EDIT UPDATE:

Looks like it can be done easily by modifying the functions.php child theme file and adding the following:

// hide coupon field on cart page.
function hide_coupon_field_on_cart( $enabled ) {
 
	if ( is_cart() ) {
		$enabled = false;
	}
 
	return $enabled;
}
add_filter( 'woocommerce_coupons_enabled', 'hide_coupon_field_on_cart' );
 
// hide coupon field on checkout page
function hide_coupon_field_on_checkout( $enabled ) {
 
	if ( is_checkout() ) {
		$enabled = true;
	}
 
	return $enabled;
}
add_filter( 'woocommerce_coupons_enabled', 'hide_coupon_field_on_checkout' );

Just need to get the update cart button sorted correctly to the right and this issue may be all set.

Finding the correct css for that button and attach a
text-align: right;
to it will do it.

[rad]

Hi there,

But that CSS has no relation to the footer and its CSS. Maybe try adding it and let me know then I’ll check. Maybe the CSS formatting is corrupted with missing closing or opening brackets.

Buf if you prefer that fix then that’s okay too. As for the button, this should be the CSS

.woocommerce .cart .actions {
    text-align: right;
}

Thanks!

[mtsuser]

@Rad hello again!
The added text align you added worked, couldn’t find the class, thank you!

As for the added code for the footer, it shouldn’t have an effect, but when I change or remove, it screws up the footer. Adding it back and it works again.

The one thing I did realize is that all of the headers how are also without color, Which I did not see until now. What I mean is, if you look at the stripe of color behind the word “Shop”, its not there, but is for other pages. Where is the css located to update that to match like the rest of the site, but still forcing the shop/cart/checkout pages to white backgrounds for legibility? Thanks for all your help thus far.

[rad]

Hi there,

What code is added to the footer? I’m referring to this CSS

.woocommerce .cart .actions .coupon input[type="text"] {
width: 350px; //I've experiemented with different width sizes, was originally given to me as width: auto;
float: left; 
margin-right: 20px;
}

And this

@media ( min-width: 980px ) {
.woocommerce .cart .actions .coupon {
    max-width: 350px;
    float: right;
}
}

In which, it shouldn’t affect the footer styling since it isn’t related. Of perhaps you’re adding more codes?

As for headers, are you referring to the landmark where large titles are displayed? Please change this CSS

body.woocommerce-page .backstretch {
    background: #fff;
}

to this

body.woocommerce-page .backstretch {
    background: #fff;
    top: 130px !important;
}

Thanks!

[mtsuser]

@Rad
Replacing
.woocommerce .cart .actions .coupon input[type=“text”] {
width: 350px;
float: left;
margin-right: 20px;
}

Creates issues with the footer with the replaced code
@media ( min-width: 980px ) {
.woocommerce .cart .actions .coupon input[type=“text”] {
width: 350px;
float: left;
margin-right: 20px;
}
}

So I have just used the original css prior to your suggestion.

I have hidden the fields I have request assistance with easily after much longer research with others who have requested similarly the removal of these buttons on these pages.

Also, to clarify, I wanted the Landmark titles that you refer to them as to match how it is for the rest of the site. It has a stripe of color, what is seen is the brand theming behind the title. Take a look at About>Services and note how the header looks there.

Hope that clarifies things. Thanks again.

[rad]

Hi there,

Yes, that CSS and it has no relation to the footer to be affected by the change. How about moving at the end of all other CSS? But since it’s now hidden then you can ignore that.

About the title, I was right and that CSS change should fix it.

Thanks!

[mtsuser]

@Rad As for the titles, it was the correct reference yes, however the background color is not the same size nor style once I add that css. I’ll attach screenshots to show you what I mean.

[ruenel]

Hello There,

Thanks for writing in!

1.) To resolve your issue #1, please do this:

• Go to X > Launch > Options > Layout & Design > Background Options.
• Remove the background image because when this image is displayed, it will be stretch out and you will not have the same image size.
• Make sure that the background color is set.
• Remove the code we have previously given,

body.woocommerce-page .backstretch img {
visibility: hidden;
}
body.woocommerce-page .backstretch {
background: #fff;
}

• Replace that code using this code instead:

body {
    background-image: url(//miktek.tv/miktekinc/wp-content/uploads/2017/11/miktek-slide-01-1920x1440.jpg);
    background-position: top center;
    background-repeat: no-repeat;
    background-size: 1920px 1440px;
}

.site > .x-container.main {
    min-height: calc(100vh - 281px);
}

This code will manually set a background image and will also set a minimum height to the content area so that there will be no excess background color when the page contents is short enough.

–

2.) To resolve your issue #2, you will have edit each of your product categories and insert an “Archive Title”. Go to Products > Categories, select a category and then find the “Archive Title” field.

We would loved to know if this has work for you. Thank you.

[mtsuser]

In short, it gets most of what I was looking for. The Archive title was something I wasn’t aware wasn’t filled in already to it was a quick fix. Thank you @RueNel

[paul.r]

On behalf of my colleague, you’re welcome. Cheers!