My woocommerce checkout page is displaying incorrectly. The 'ship to a different address' is overlapping order details. Also when customers try to process an order, it says agree to terms and conditions, yet there is no checkbox on the page. Please help. The website is fdlamb.com
My reason to ask if you have made some changes or installed new plug-ins, is because in some ocasions plug-ins can change the properties of the template, causing some conflicts. So deactivating all plugs-ins and seeing if that fix the issue can help to know more to what cause the issue in first place.
Also you could just delete your theme and reinstalling, to return to the default CSS, as im seeing your theme doesn't have a lot of customization.
Anyway, i don't know a lot but I have move some CSS to the property of the button to see if it fix itself.
.checkbox {
position: inherit;
top: 7px;
right: 12px;
}
This is how it appears to me with that code. https://i.stack.imgur.com/lfebb.jpg
Related
I am fairly new to Woocommerce as well as customizing themes and I can't figure out why the below shows up as text at the bottom of the document. I have only served the website locally thus far. I was hoping there was a simple mistake I was making that someone with more experience could clear up for me quickly.
<script type="text/javascript">
var c = document.body.className;
c = c.replace(/woocommerce-no-js/, 'woocommerce-js');
document.body.className = c;
</script>
This script (as well as others related), also overlays the entire front-page.php and restricts access to buttons and other website functionality as well.
Image of Issue
I haven't included any of my custom theme code. Please ask questions and I will post code as needed.
Thanks!
After just about every form of testing and searching possible. I figured out that my custom CSS stylesheet was causing the issue. The code below was causing all the problems. Not sure why it was allowing the code to show up, but lesson learned. Isn't life funny like that? Forces laugh and attempts smile but instead cries
body *{ display: block; }
I've styled and prepared my Contact Form on my website (using Wordpress plugin called Contact Form 7).
I've styled the form, and made everything as I want it. But I only have one problem. I can't figure out how to enter custom text in a specific part of my contact form.
This is the page: http://digesale.com/contact-us/
You will obviously see an empty part in the upper right corner of the form. I want to write some text there. I tried googling for a solution, and I tried looking through the plugin's settings and even php files. I can't figure it out.
Can anyone help?
Thanks
You can add the code where you are adding the fields in contact form 7. You can do customize there by your own html.
Okay guys. So I managed to do it. I went into Contact Form's settings. And I added the following:
<div style="float:right; width: 365px; margin-top: -160px; font-weight:bold; margin-right:10px; font-style:italic; font-size:13px;">MY TEXT AND LINKS AND EVERYTHING</div>
You can see how it looks if you check the page using the link in my original post.
Now, if anyone sees a mistake or something I could do better, do tell? I used CSS to position and style the text and everything. I hope I did it well to work on mobile and all devices and everything. I'm an amateur with this stuff. I can get things done, but don't even start with cross-device compatibility and stuff like that. :)
I am having a specific issue with my wordpress site that I'm trying to resolve.
The site is at www.dontforgetthebubbles.com
As you will see the homepage looks fine.
But many posts are not displaying correctly. As an example:
http://www.dontforgetthebubbles.com/2013/08/cradle-cap/#
The menu columns are all showing simultaneously (hover over 'Clinical' and compare this to the home page to see what I mean)
The 'toggle' button is not working (see http://www.dontforgetthebubbles.com/2013/07/intubating-with-stridor/ for an example of a post where it does work correctly).
I think the issues are related to more recent posts (and the older posts are ok) but it is affecting around 15 posts.
Could anyone suggest what my be causing this?
Thanks
You must have a CSS or plugin causing conflict. I can see that you're loading many stylesheets. Probably have a lot of plugins? Try disabling them one by one, beginning with the most recently installed to narrow it down.
Check all the Javascript files. Looks like some are missing on the pages with the problems. For example, superfish.js or sprite.js. My guess is one of them handles the dynamic menu features with is why <ul class="sub-menu">...</ul> under Clinical doesn't have by default the display:none property unlike your home page.
WooCommerce: Checkout Page
order_review div overlaps the customer_details div, so that you are unable to fill out your billing information. I've tried playing with the z-index but that doesn't seem to be working.
Here is a link to the product page: http://lifestylesconvention.com/shop/adult-couples-registration/
Please fill out the Form and then continue through to the Checkout page. There you will see what I mean. The div for order_review overlaps the div for customer_details on that particular page, so you are unable to fill out the information in the top section.
I'm pulling my hair out trying to figure this out, lol. I'm sure the answer is staring me right in the face, but I just don't see it. Any ideas would be GREATLY appreciated! :)
Thanks in advance!
I've managed to reproduce the problem in firefox.
I haven't found haven't found a solution yet. But I'm confident the issue is jQuery/javascript. Turn off javascript on the page and the problem goes away. You have about 20 scripts loading on the checkout page and I'm afraid I haven't been able to isolate the one responsible.
Not sure what your skill level is, but a few things I would try:
1. renaming the mecurial js directory (temporarily). About half of the scripts come from this directory. If you rename it, the browser wont be able to load them then you can isolate if any of them is causing the error.
2. The problem seems to occur during an AJAX request for /checkout/pay/. My guess woocommerce is disabling the form while it AJAXs some data but then for some reason doesn't re-enable access. Maybe because it can't find /checkout/pay/ (did you delete this page for some reason?)
Hope this helps...Sorry I couldn;t give a definitive solution - I've gotta to my own work.
Good Luck.
You can mimick the second WooCommerce column (perhaps delete that div from your checkout template as you don't use this for a shipping address?). The float: right clears the billing column. It looked differently in Chrome & Firefox btw, because in Chrome it would be 100% wide and float under the billing field, and in Firefox it sat to the right of that column (which I assume is what you want).
#order_review table.shop_table {
width: 48%;
float: right;
}
Would anyone happen to know how to use CSS to link to an internal page instead of using a href?
The situation is... I have a feed on a page from an external source on another one of my website (which controls the link) I wish to use CSS at my end to change the direction of the link almost creating a feed without coding RSS.
As of now I am using the following code to kill the link as I would rather it go nowhere than to an undesired place:
.col-one-thirdtest a.item-link {
pointer-events: none;
cursor: default;
}
Any help would be greatly appreciated.
Problem solved by using http://open.dapper.net/user-dapps.php and http://feed.informer.com/ in order to select the sections of the page I needed and then convert them into an RSS feed! Job Done!
Nope. CSS is not a scripting/behvaioral language. It's a styling language. (Your pointer-events trick doesn't work on all browsers, anyway.)
You'll need to use JavaScript to change the link locations.
Also (as a side note), you might want to reconsider your reasons for having the feed from said external source if the links don't go where you want them to. The behavior you're asking for suggests that your feed might be the wrong way to go about your desired effect.