Wordpress Version: 4.9.7
WooCommerce Version: 3.4.3
WooCommerce has caused layout issues with the Cart & Checkout page. It's any WooCommerce page with a table.
The table with classes of:
shop_table shop_table_responsive cart woocommerce-cart-form__contents
is causing issues. The WooCommerce CSS for the table sets a width of 100%, however the actual width shows as 4870px. The theme's parent element width is set as 1100px.
Why is the table's width much larger than that set by the theme?
There are no CSS declarations after that overwrites.
There are no issues with the products page or product page.
You can always remove default WooCommerce styles, the risk is that you may use some. Anyway it worth the check:
add_filter( 'woocommerce_enqueue_styles', '__return_empty_array' );
If this doesn't help, maybe post a link to the page so we can inspect the layout and CSS?
You might have unnecessary pre tag as a wrapper, causing the table to stretch:
<pre>[woocommerce_cart]</pre>
In order to remove it, you may install "Disable Gutenberg" plugin, then edit the Cart Page in Text tab, leaving only:
[woocommerce_cart]
I had the same issue. The root cause I found was caused by copy/pasting the short code from the woocomerce website directly into a visual editor (WPBakery Page Builder in my case).
The copy picked up the <pre> tag from the source and applied it when pasting, triggering a change of the style to preformatted without me noticing.
Two solutions to fix - depending on your Visual Editor and preference.
Simply changing back to the default Paragraph setting,
Highlight [woocomerce_cart]
Select Paragraph from the drop-down styles list
Update/Publish!
OR, Remove the <pre> tags manually
Change to a 'text' only view of the page code
Remove surrounding <pre> tags leaving [woocomerce_cart]
Update/Publish!
Sorry, can't embed images yet...
Image showing issue:
Image showing manual solution:
This should work for any other short codes pasted in as well, including [woocomerce_checkout] as mentioned in OP.
Related
I have a problem with my theme and I am sick of tired to communicate with the theme support team...so I try to solve the issue myself (if possible).
My problem is: I have some single product layout under theme option but when I try to change none of them work. I could overwrite the style in the child theme (how the information, text...etc will show) but my main problem is the product image. Is it too big and the thumbs appear under the image. I want smaller image box and thumbs on the left side. Is it possible to overwrite this in the child theme somehow?
I am not a professional programmer or web designer, but would be happy to learn :)
Thanks for any help or comments :)
May be you can check it with word press plugins. Here is a link. Before override Woo commerce Single Product Template You can try it with custom css in your theme style.css
Copy this very basic CSS and place in your child theme’s style.css file. Check this link.
I'm working on a woocommerce storefront for a client that has a custom-built theme (by someone else) and for the life of me cannot find where I need to go to remove the subtext over the product preview on the main Shop page (the "at vero...")
See below:
Inspect element shows:
When I went into the wc-template-functions.php file I found the product_loop but there is nothing in here that I see generating the paragraph below the product title. Before I write some css to locate the <p> child element under parent woocommerce-LoopProduct-link woocommerce-loop-product__link - is there someone within WC functions I can locate this? The product has no categories or tags as I thought this could be where it was coming from. My Google searches have resulted in nothing specific to what I'm looking to change on the shop page, just changes to the product page which I do not need.
you can simply hide using CSS instead of change in core files
I have built my online shop in Wordpress, theme Ellie, and using Woocommerce plugin.
Issue is that the texts "View Cart" and "Checkout" are too close to each other in 2 different places: Footer and Cart widget on Shop page. Something wrong there.
Shop page
Footer
https://senjacosmetics.com/shop/
Really happy if you can help! I tried to research this but didn't find anything. I'm not a developer so cannot proceed on my own.
This is just small css issue. You can easily solve it by adding some css rule.
You can add following css rule in your theme's style sheet or if your theme supports custom css, then via that feature.
.woocommerce-mini-cart__buttons a.checkout{margin-left:15px;}
"woocommerce-mini-cart__buttons" is the class assigned to 'p' tag which contains both the links. "checkout" is one of the class assigned to the 'Checkout' link.
You can change the value of '15px' to anything you want depending on how much space you want between the two links.
Following is screenshot for your reference. I added the css rule to checkout link in developer console.
Hope this helps.
I'm making a WordPress website with WooCommerce and I need to resize the product thumbnails in the display products (category) page.
In particular I have this situation:
And I'd like to have a page like this:
Is it possible? I've checked that the CSS class should be img.attachment-shop_catalog.wp-post-image and I've tried with -webkit-transform:scale(1.2); but my product image thumbnails overlap. It's not a problem of WooCommerce images settings (the "force hard crop" option is disabled), so I think I have to add a custom CSS. Could you help me to fix this?
Thanks in advance!
I would have checked all surrounding classes cause it is probably limited by them, or there is padding-right set on outer container.
I would have tried to find (using Chrome possibilities) and try first to locally resize them and product container in CSS.
I am using woocommerce for the first time and have searched for answers to this question for hours now. Found none. I'm exhausted and really grateful if someone wishes to help out.
I am using woocommerce on a self-created child theme. The main shop page uses a theme-template called "page-left-sidebar", which normally places the sidebar with widgets to the left of the page. This option would look good in the web shop that I'm trying to create.
But Woocommerce templates override my custom templates, and although I get the correct "page-left-sidebar"-template's sidebar widgets, I see with my eyes and also when investigating with firebug, that woocommerce is calling the "page-right-sidebar"-template's main & sidebar css rules instead those of the left-sidebar-template. The page-right-sidebar is the default page template in my theme, as it happens.
I have tried editing woocommerce's "archive-product.php" -page. But I just cannot understand, where and how to tell the div's to be situated where I want them to.
My theme's default "page.php" and "page-left-sidebar.php"-template are identical. Only the template's name (obviously) changes. In my "style.css" I have rules both for default sidebar (sidebar to the right) and page-left-template-sidebar.
What files should I edit and how?
To display sidebar on the left, the style.css file should have property float:left for that section
Found a workaround... I still don't understand how the default templates work, but I've tried until I give up. I just hard-coded a div style="right;" in the archive-product.php, closing the div just before the sidebar commanding lines. It's crude, I know, but it seems to do the trick.