When attempting to make a clean shopping cart experience, I get the following seen in the attached image. I am looking to have the fields, which are very over-sized, to resemble the reference image seen above it. What would need to be done to modify this to make it work correctly? Thank you.
Sure thing. I have included the url in the previous responses secure note section.
Hello @mts,
Thanks for sharing website URL. 
Unfortunately, I don’t see any products on the shop page and because of that I can’t add products on shopping cart. Can you please confirm? https://cloudup.com/cPhwXFbYxyb
Thanks.
I am in the process of setting those pages up, hence why the post was made in the first place. For whatever reason the woocommerce setup was not done properly when this site template was set up, and I am manually setting up and linking all necessary pages and shortcode. It should not be showing a blank shop though, which I will look into, but you would need to add items to be able to modify the styling? I believe I can send you a link to a product and you can try to add that directly if that works while I see why no products are showing on the site shop.
Hello @mts,
Thanks for sharing URL.
Please add following CSS under X > Launch > Options > CSS to make necessary changes in WooCommerce fields:
.woocommerce .cart .actions .coupon input[type="text"] {height: 2em; margin-bottom: 10px;}
.woocommerce-account form select, .woocommerce-account form textarea, .woocommerce-account form input[type="tel"], .woocommerce-account form input[type="text"], .woocommerce-account form input[type="email"], .woocommerce-account form input[type="password"], .woocommerce-checkout form select, .woocommerce-checkout form input[type="tel"], .woocommerce-checkout form input[type="text"], .woocommerce-checkout form input[type="email"], .woocommerce-checkout form input[type="password"]{height: 2em;}
.woocommerce-checkout form textarea{height: 5em;}
Thanks.
Thanks for the update.
I’ve updated the required css and it is still very large. I have included a recorded screencast to show you what it is that I see, and what it should look like from the previous image. The reference I have was also taken from another user who has used woocommerce and x theme in the same way, as seen here:
I will include the recording link in the secure note of this reply. Thank you.
Hello There,
To cleanup the spacing around the fields and adjust the heights, please make use of this code:
.woocommerce-account form .form-row, .woocommerce-checkout form .form-row {
margin-bottom: 5px;
}
.woocommerce-account form select, .woocommerce-account form textarea, .woocommerce-account form input[type="tel"], .woocommerce-account form input[type="text"], .woocommerce-account form input[type="email"], .woocommerce-account form input[type="password"], .woocommerce-checkout form select, .woocommerce-checkout form input[type="tel"], .woocommerce-checkout form input[type="text"], .woocommerce-checkout form input[type="email"], .woocommerce-checkout form input[type="password"] {
margin-bottom: 0;
height: auto;
line-height: 1.2em;
font-size: 1em;
}
.woocommerce .cart .actions .coupon input[type="text"] {
width: auto;
float: left;
margin-right: 20px;
}
.woocommerce-account form textarea, .woocommerce-checkout form textarea {
padding: 10px;
line-height: 1.2em;
font-size: 1em;
}
.woocommerce-account form .payment_methods, .woocommerce-checkout form .payment_methods {
margin-bottom: 0;
}
.woocommerce-account form .payment_methods li, .woocommerce-checkout form .payment_methods li {
margin-bottom: 10px !important;
}
.woocommerce-account form .form-row.terms, .woocommerce-checkout form .form-row.terms {
margin-top: 5px;
}
.woocommerce-account .radio input[type="radio"],
.woocommerce-account .checkbox input[type="checkbox"] {
margin-left: 0;
}
.woocommerce-account .button, .woocommerce-checkout .button {
border-color: red;
border-width: 1px;
background-color: red;
color: white;
}
Please let us know if this works out for you.
Hello again. Its closer yes, I was able to tweak some of the color options from this code. Seems like it shoves the footer content to the right with this added css. See attached secure note. Theres no way to remove the titles of each field above and input in the field entry in grey like the address field to save more space?
Thank you.
Update to the last response, I was able to find the labels for the woocommerce fields to remove the unnecessary label sections for the form, so disregard that part of the question. The footer still shows up to the right of the page though.
Hi there,
I checked your website and that is not the case and the footer is in its place. Please clear your browser cache or check the website with another browser.
Also if you have a cache plugin clear the cache and if you have a plugin the minifies CSS files please exclude the theme CSS files from it as our theme files are already minified and having them minified again may cause this kind of inconsistent issues.
Thank you.
Hi there, it unfortunately is the case, as was tested late last night on multiple devices and browsers aside from my own. I walked someone thru sampling the website experience in front of me with their phone and there were many flaws with the checkout experience, but the footer information was shifted to the right and created its own segregated area of gray with the copyright and social media icons. Also, where is the “Apply Coupon” properties so that I can update the font color?
With the apply coupon, is there a way to have the “apply coupon” show up under the coupon code field and not slightly off next to it? Or, if it could say “Apply Coupon” and then the code field to the right of it, that would help too.
Also, the mobile version of this page is completely different than what is seen on the computer, putting in a image background for most of the screen which makes elements impossible to see or read. Where can that be manually overridden in css to force the white background? This seems to occur on an iPhone, but not Android.
Also, any time that the width changes in the following css script, it seemingly breaks the color styling for that page and reverts back to red for buttons and throws the coupon code field all the way left.:
.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;
}
Thanks!
Hi there,
To fix the footer issue, please add this CSS as well
.woocommerce-checkout .x-root {
display: block;
}
The Apply Coupon button is part of the checkout form and it’s not part of the builder. The only way to change its color is again, through CSS.
Example,
.woocommerce-checkout input[name="apply_coupon"] {
background: red !important;
color: #fff !important;
}
About the mobile version, looks like the pseudo selector isn’t working properly in Safari. Would you like to make it white just for checkout page? If yes, then please add this CSS as well
.woocommerce-checkout .backstretch img {
visibility: hidden;
}
.woocommerce-checkout .backstretch {
background: #fff;
}
About the CSS which affect the colors, that CSS has no relation with other color CSS. Could you try doing it again and provide a video recording?
Thanks!
Sure thing, please see attached in secure note.
Hello There,
You are having this issue because you have modified the default cart and check out page. You edited the page using Cornerstone. WooCommerce buttons inside Cornerstone elements may inherit Cornerstone button stylings. By default, you do not have to use Cornerstone for this pages. For the cart and checkout page, you only need this shortcodes.
Cart Page:
Checkout Page:
In you checkout page, you have a redundant cart page because you added it. That should not be there in the first place and only the “Have a coupon? Click here to enter your code” box will be displayed by default.
Once you have revert to the default WooCommerce pages, we can revisit and check again the styling. By the way, I’ve look around and found out that you are comparing the X with WooCommerce using Ethos and Integrity. You are using Ethos and yet you want the styling of Integrity especially the WooCommerce styling of integrity. If you have a staging site, you can check out WooCommerce using Integrity stack.
Hope this helps.
Hi there and thanks for your update.
In short. I am lost. I didn’t use one theme or the other, I used what was included as part of the template.
There was no install of woocommerce on my part, I manually created and linked the necessary pages.
Also, I followed what this gentlemen did here, that had the x theme and what seems to be the same “stack” and that’s what I was looking to do. I’m looking to match this.
There is no redundancy of pages, and I think there was some confusion to my request and the video recording provided.
Please review the link I provided. Your updated css for the spacing @RueNel was helpful to a point; to completely reinstall woocommerce right now is not an option.
Thank you.
Well, I also checked the video and I should agree with @RueNel. You did not use the original functionality of the theme. You used a 3rd party youtube guide to add shortcodes on the cart page. That is a customization and not part of our theme, so whatever you do here including the CSS you added by the help of that party is a customization of the theme and not related to our original view. So this is indeed outside of our support scope and we can not give you that kind of service to fix and fine tune every bit of the customized code.
The redundancy you see after proceed to checkout is because of the way you added both the Woocommerce Checkout and cart shortcodes on one page.
The original way of Woocommerce is that the cart is there and then a new page goes to the checkout.
You either need to hire a developer to fine tune the stuff you added in the page or follow the suggestion of my colleague to strip out all the customization and start from scratch as he said.
As soon as you do the original way you will see all parts will work correctly and there will be no responsive issues on mobile devices.
Thank you for your understanding.
@Rad @RueNel @christopher.amirian Lets run thru a few things there.
1- @christopher.amirian, you mentioned that when you checked the footer issue that it was working correctly and that it was a cache issue, which was incorrect. @Rad had a working option that is working as intended.
2- All I’ve heard is what I’ve done wrong here, is that how support works? Blaming the customer for this and that, assuming these things are an extremely poor way of going about a solution. I’ve paid for theme, which includes this support, so instead of telling me, what I’ve done or did not do, as I’ve clearly stated in a previous response that, I DID NOT INSTALL WOOCOMMERCE, and that it was set however it was in the template, can we focus on the issue and solutions that CAN be done?
3- I’m not hiring a developer for a checkout setup, so I ask that you do not mention this option again. Let’s work withing your “scope of support”, and solve this solution together. This is the whole point of our venture here.
4- I am unfamiliar with woocommerce. If shortcodes do not need to be added, then what pages are needed, with what shortcodes, and where? I have no issues reworking pages, if your solution is to re-input all data, including all products again, as I have stated this is not an option due to time.
5- You cannot also state to use only Cornerstone everywhere in the theme, to only follow up with “Well you used Cornerstone so you caused a problem.” If Cornerstone should not be used in one area of the theme, I would suggest putting that in the overview of the theme. It would make it easier for those using it to know this and avoid this issue.
6- @RueNel
In you checkout page, you have a redundant cart page because you added it. That should not be there in the first place and only the “Have a coupon? Click here to enter your code” box will be displayed by default.
I do not have a redundant cart page, I only have redundant buttons as I outlined in the recording. Can we hide those buttons in the checkout screen? If not, or its cleaner to do and to remove the cart on the checkout page, I will test this. I do not have a staging site at this time, this is all live unfortunately at this time.
7- @christopher.amirian
You used a 3rd party youtube guide to add shortcodes on the cart page.
I actually did not, woocommerce has a list of their shortcodes on their site, did you know this? Here, I will share with you: https://docs.woocommerce.com/document/woocommerce-shortcodes/
You actually haven’t been very helpful for this issue, twice now, so to speed up this process I will ask that if you see this updated thread to pass on responding to this. Also worth noting, to my knowledge I have not modified code other than what was advised to update css with, and only since then have noticed a doubling of buttons that were not originally present with my original request.
@RueNel and @Rad I appreciate your help so far.
Thank you.
Hi there,
As for clarification from our end, all of that changes are from here https://www.youtube.com/watch?v=mOih9YEw_mM which isn’t from us. The redundancy that we’re referring is having a cart page and another cart section on your checkout page. It’s not supposed to be set up like that, which is why the update and to apply coupon buttons are redundant.
By default, the process should be Cart first, then Checkout and that’s to make sure the orders are finalized before heading to the payment page. And it’s Woocommerce’s standard too.
Unfortunately, we can’t cover any customization or works that are provided by other people like from here https://www.youtube.com/watch?v=mOih9YEw_mM. We only did provide the wrapper and templates to make Woocommerce looks integrated with the theme (a skin). But the theme doesn’t have any integration with the shop processes, we can’t cover any customization related to Woocommerce unless it’s related to X’s Woocommerce templates which aren’t in this case.
But, I’ll provide a bit of CSS to remove the redundant buttons and coloring.
.woocommerce-checkout .woocommerce-cart-form .actions {
display: none;
}
.woocommerce-checkout .checkout_coupon .button {
background: #4177a9 !important;
color: #fff !important;
}
The alert message where Click here to enter your code is styled is based on theme’s stack, to match the look. If you wish to change its color then please provide a sample where that styled is being displayed.
Again, we can’t cover any issues caused by customization based on the works of other people. But of course, we can always help if it’s related to the theme.
Thanks!
@Rad, thanks for the clarification. We are both on the same page. Your code updates have been helpful so far. Final stretch for this issue and I think we should be all set here:
Seems like there is and has been 2 bugs in the iOS side of things.
1- Seems like the cart and the shop itself is pulling a image not set, and it makes very hard to read under the text and buttons. All I need at this point is to set the cart, and the shop pages background to white, which Im guessing based on how things have been going so far with the css, its a combination of adding color: #fff !important; to the appropriate pages. My question is what would that code be and for which page? No set background images are being used by default to my knowledge.
2- The cart page on mobile seems to clip off of the screen. What I mean is, that it does not seem to be responsive and cannot get to the content to the right of the screen. Does not allow you to scroll that way to the right either. This is in portrait mode. BUT, when you shift the iPhone landscape mode, it allows the full fields and areas to be read properly and responsive. Due to the background issue that I mentioned you still cannot make out the buttons properly, but you get to see all the content on that page. For this I am not sure about as it works fine in android and PC, chrome and Firefox. Chrome and Safari on the cart page on an iPhone have issues. Either there is an update to the responsive code, or just force desktop view for the cart and perhaps the shop.
I guess the easiest way to “fix” this is to just have a “These pages are best viewed in landscape mode on mobile devices” type note on the cart & checkout page.
I will have pictures attached. Thank you.